/* Palette: white, black, #d37551 (accent), #3e3b68 (primary) */
.hbw{--hbw-primary:#3e3b68;--hbw-accent:#d37551;--hbw-ink:#111;--hbw-muted:#6a6880;--hbw-line:#e6e4ee;--hbw-r:16px;
	--hbw-accent-soft:color-mix(in srgb,var(--hbw-accent) 11%,#fff);--hbw-primary-soft:color-mix(in srgb,var(--hbw-primary) 8%,#fff);
	--hbw-accent-dark:color-mix(in srgb,var(--hbw-accent) 85%,#000);
	container:hbw/inline-size;width:100%;max-width:1180px;margin:24px auto;color:var(--hbw-ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.hbw,.hbw *{box-sizing:border-box}
.hbw [hidden]{display:none!important}
.hbw-i{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}

/* progress */
.hbw-steps{list-style:none;margin:0 0 22px!important;padding:0!important;display:flex;background:#fff;border:1px solid var(--hbw-line);border-radius:var(--hbw-r);padding:10px!important}
.hbw-steps li{flex:1;position:relative;margin:0!important;padding:0}
.hbw-steps li+li::before{content:"";position:absolute;left:-50%;right:50%;top:22px;height:2px;background:var(--hbw-line);z-index:0}
.hbw-steps li.done+li::before,.hbw-steps li.active::before{background:var(--hbw-primary)}
.hbw-steps button{all:unset;box-sizing:border-box;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:6px 4px;cursor:default;text-align:center}
.hbw-steps li.open button{cursor:pointer}
.hbw-sn{width:32px;height:32px;border-radius:50%;border:2px solid var(--hbw-line);background:#fff;color:var(--hbw-muted);display:grid;place-items:center;font-size:14px;font-weight:700;transition:.25s}
.hbw-sn .hbw-i{display:none;width:16px;height:16px}
.hbw-steps em{font-style:normal;font-size:13px;font-weight:600;color:var(--hbw-muted)}
.hbw-steps li.active .hbw-sn{background:var(--hbw-accent);border-color:var(--hbw-accent);color:#fff;box-shadow:0 0 0 5px var(--hbw-accent-soft)}
.hbw-steps li.active em{color:var(--hbw-ink)}
.hbw-steps li.done .hbw-sn{background:var(--hbw-primary);border-color:var(--hbw-primary);color:#fff}
.hbw-steps li.done .hbw-sn b{display:none}.hbw-steps li.done .hbw-sn .hbw-i{display:block}
.hbw-steps li.done em{color:var(--hbw-primary)}

/* layout */
.hbw-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}
.hbw-card{background:#fff;border:1px solid var(--hbw-line);border-radius:var(--hbw-r);padding:28px;box-shadow:0 1px 3px rgba(17,17,17,.05)}
.hbw-step{display:none}
.hbw-step.on{display:block;animation:hbwin .35s ease}
@keyframes hbwin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.hbw-h{margin:0 0 4px!important;font-size:22px!important;font-weight:700;line-height:1.25;color:var(--hbw-primary)}
.hbw-lead{margin:0 0 20px;color:var(--hbw-muted);font-size:14px}
.hbw-h+.hbw-sub{margin-top:16px}
.hbw-sub{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin:0 0 10px;color:var(--hbw-ink)}
.hbw-sub .hbw-i{color:var(--hbw-accent)}
.hbw-sub small{font-weight:400;color:var(--hbw-muted)}
.hbw-hint{color:var(--hbw-muted);font-size:14px;margin:4px 0;grid-column:1/-1}
.hbw-loading{opacity:.45;pointer-events:none;transition:opacity .2s}

/* nav buttons */
.hbw-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--hbw-line)}
.hbw-back{padding:13px 24px;border:1.5px solid var(--hbw-primary);border-radius:12px;background:#fff;color:var(--hbw-primary);font:inherit;font-weight:600;cursor:pointer;transition:.2s}
.hbw-back:hover{background:var(--hbw-primary);color:#fff}
.hbw-next{position:relative;padding:14px 34px;border:0;border-radius:12px;background:var(--hbw-accent);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:.2s}
.hbw-next:hover:not(:disabled){background:var(--hbw-accent-dark);transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--hbw-accent) 35%,transparent)}
.hbw-next:disabled{background:#d9d7e3;color:#fff;cursor:not-allowed}
.hbw-next.busy{color:transparent}
.hbw-next.busy::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border:3px solid #fff;border-right-color:transparent;border-radius:50%;animation:hbwspin .7s linear infinite}
@keyframes hbwspin{to{transform:rotate(360deg)}}

/* rooms: 3 columns */
.hbw-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hbw-room{position:relative;display:block;cursor:pointer;border:2px solid var(--hbw-line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.hbw-room input{position:absolute;opacity:0;pointer-events:none}
.hbw-room:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(62,59,104,.14)}
.hbw-room.on{border-color:var(--hbw-accent);box-shadow:0 0 0 4px var(--hbw-accent-soft)}
.hbw-room-img{height:150px;background:linear-gradient(135deg,var(--hbw-primary),color-mix(in srgb,var(--hbw-primary) 55%,var(--hbw-accent))) center/cover no-repeat}
.hbw-room-body{padding:14px 16px 16px}
.hbw-room-name{font-weight:700;font-size:17px;line-height:1.3}
.hbw-room-meta{display:flex;align-items:center;gap:6px;color:var(--hbw-muted);font-size:13px;margin-top:3px}
.hbw-room-desc{font-size:13px;color:var(--hbw-muted);margin-top:8px}
.hbw-room-price{margin-top:12px;color:var(--hbw-muted);font-size:13px}
.hbw-room-price b{font-size:21px;color:var(--hbw-accent)}
.hbw-tick{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--hbw-accent);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .2s}
.hbw-room.on .hbw-tick{transform:scale(1)}

/* calendar */
.hbw .flatpickr-calendar.inline{width:100%!important;max-width:100%!important;box-shadow:none;border:1px solid var(--hbw-line);border-radius:14px;padding:10px 10px 14px;background:#fff;touch-action:manipulation}
.hbw .flatpickr-calendar .flatpickr-innerContainer,.hbw .flatpickr-rContainer,.hbw .flatpickr-days,.hbw .dayContainer{width:100%!important;min-width:100%!important;max-width:100%!important}
.hbw .flatpickr-day{max-width:none;height:48px;line-height:48px;border-radius:12px;font-weight:500;margin:1px 0;color:var(--hbw-ink)}
.hbw .flatpickr-day:hover{background:var(--hbw-primary-soft);border-color:transparent}
.hbw .flatpickr-day.today{border-color:var(--hbw-primary)}
.hbw .flatpickr-day.selected,.hbw .flatpickr-day.selected:hover{background:var(--hbw-accent);border-color:var(--hbw-accent);color:#fff}
.hbw .flatpickr-day.flatpickr-disabled,.hbw .flatpickr-day.flatpickr-disabled:hover{color:#c3c1d0;text-decoration:line-through;background:#f6f5fa;cursor:not-allowed}
.hbw .flatpickr-day.prevMonthDay,.hbw .flatpickr-day.nextMonthDay{color:#c3c1d0}
.hbw .flatpickr-months .flatpickr-month,.hbw .flatpickr-current-month,.hbw .flatpickr-current-month input.cur-year{color:var(--hbw-primary);font-weight:700}
.hbw .flatpickr-weekday{color:var(--hbw-muted);font-weight:600}
.hbw .flatpickr-months .flatpickr-prev-month svg,.hbw .flatpickr-months .flatpickr-next-month svg{fill:var(--hbw-primary)}
.hbw .flatpickr-months .flatpickr-prev-month:hover svg,.hbw .flatpickr-months .flatpickr-next-month:hover svg{fill:var(--hbw-accent)}
.hbw-date{display:none}

/* time chips */
.hbw-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-bottom:26px}
.hbw-chip{padding:11px 6px;border:1.5px solid var(--hbw-line);border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--hbw-ink);cursor:pointer;transition:.15s}
.hbw-chip:hover:not(:disabled){border-color:var(--hbw-primary);background:var(--hbw-primary-soft)}
.hbw-chip.on{background:var(--hbw-accent);border-color:var(--hbw-accent);color:#fff}
.hbw-chip:disabled{color:#b9b7c8;background:#f6f5fa;text-decoration:line-through;cursor:not-allowed}

/* steppers */
.hbw-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
.hbw-stepper{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--hbw-line);border-radius:12px;padding:4px}
.hbw-stepper button{width:42px;height:42px;border:0;border-radius:9px;background:var(--hbw-primary-soft);color:var(--hbw-primary);font-size:22px;line-height:1;cursor:pointer;font-family:inherit;transition:.15s;padding:0}
.hbw-stepper button:hover{background:var(--hbw-primary);color:#fff}
.hbw-stepper output{font-size:18px;font-weight:700;min-width:36px;text-align:center}

/* inputs */
.hbw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hbw-grid label{display:block;font-size:14px;font-weight:600}
.hbw-grid label small{font-weight:400;color:var(--hbw-muted)}
.hbw-full{grid-column:1/-1}
.hbw-in{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--hbw-line);border-radius:12px;font:inherit;font-weight:400;color:var(--hbw-ink);background:#fff;transition:.15s}
.hbw-in:focus{outline:0;border-color:var(--hbw-accent);box-shadow:0 0 0 4px var(--hbw-accent-soft)}
.hbw-hp{position:absolute!important;left:-9999px!important;opacity:0}
.hbw-msg{margin-top:14px;font-size:14px;font-weight:600}
.hbw-msg.err{color:#b3261e;background:#fdecea;padding:10px 12px;border-radius:10px}

/* live summary */
.hbw-summary{position:sticky;top:24px;background:#fff;border:1px solid var(--hbw-line);border-radius:var(--hbw-r);overflow:hidden;box-shadow:0 12px 34px rgba(62,59,104,.12)}
.hbw-sum-head{background:var(--hbw-primary);color:#fff;padding:16px 22px;font-weight:700;font-size:17px;letter-spacing:.2px}
.hbw-sum-img{height:0;background:var(--hbw-primary-soft) center/cover no-repeat;transition:height .35s}
.hbw-sum-img.has{height:150px}
.hbw-sum-body{padding:20px 22px 22px}
.hbw-sum-room{font-size:19px;font-weight:700;margin-bottom:14px;color:var(--hbw-ink)}
.hbw-sum-dates{margin:0 0 12px;padding:14px;background:var(--hbw-primary-soft);border-radius:12px;display:grid;gap:10px}
.hbw-sum-dates div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hbw-sum-dates dt{color:var(--hbw-muted)}.hbw-sum-dates dd{margin:0;font-weight:600;text-align:right}
.flash{animation:hbwflash .8s ease}
@keyframes hbwflash{0%{background:var(--hbw-accent-soft);box-shadow:0 0 0 6px var(--hbw-accent-soft)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.hbw-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--hbw-muted);padding:6px 0}
.hbw-line b{color:var(--hbw-ink);font-weight:600;white-space:nowrap}
.hbw-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px dashed var(--hbw-line);margin-top:8px;padding-top:14px;font-weight:600}
.hbw-total strong{font-size:30px;color:var(--hbw-accent)}
.hbw-trust{list-style:none;margin:16px 0 0!important;padding:0!important;font-size:13px;color:var(--hbw-muted);display:grid;gap:6px}
.hbw-trust li{display:flex;align-items:center;gap:8px;margin:0}.hbw-trust .hbw-i{color:var(--hbw-accent)}

/* success */
.hbw-success{max-width:540px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--hbw-line);border-radius:var(--hbw-r);padding:40px 28px;box-shadow:0 12px 34px rgba(62,59,104,.12)}
.hbw-ok{width:76px;height:76px;border-radius:50%;background:var(--hbw-accent);color:#fff;display:grid;place-items:center;margin:0 auto 16px;animation:hbwpop .4s ease}
.hbw-ok .hbw-i{width:38px;height:38px}
@keyframes hbwpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.hbw-success h2{margin:0 0 6px;font-size:26px;color:var(--hbw-primary)}
.hbw-ok-msg{color:var(--hbw-muted)}
.hbw-ok-box{margin:20px 0 22px;padding:16px;background:var(--hbw-primary-soft);border-radius:12px;text-align:left;display:grid;gap:10px}
.hbw-ok-box div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hbw-ok-box span{color:var(--hbw-muted)}.hbw-ok-box b{text-align:right}

/* responsive (based on the width of the form's own container, so it also works in narrow theme columns) */
@container hbw (max-width:900px){
	.hbw-layout{grid-template-columns:1fr}
	.hbw-summary{position:static}
}
@container hbw (max-width:640px){
	.hbw-card{padding:20px 16px;border-radius:14px}
	.hbw-h{font-size:19px!important}
	.hbw-steps{padding:8px 4px!important}
	.hbw-steps em{display:none}
	.hbw-steps li.active em{display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;margin-top:-2px}
	.hbw-steps{margin-bottom:34px!important}
	.hbw-rooms{grid-template-columns:1fr}
	.hbw-room{display:flex}.hbw-room-img{width:112px;height:auto;min-height:132px;flex:none}
	.hbw-room-body{padding:12px 14px}
	.hbw-grid{grid-template-columns:1fr}
	.hbw-times{grid-template-columns:repeat(3,1fr)}
	.hbw .flatpickr-day{height:42px;line-height:42px}
	.hbw-in{font-size:16px}
	.hbw-nav{margin-top:20px;padding-top:16px}
	.hbw-next{flex:1;padding:14px 16px}
	.hbw-back{padding:13px 18px}
}
