/* Chows Reservations — front end
   Every rule is scoped to #chows-reserve so it outranks theme styles.
   Colours, fonts and radius come from the settings screen as CSS variables. */

/* ---------- trigger button (lives outside the modal) ---------- */
.chows-trigger.chows-trigger{
	display:inline-block;
	font-family:var(--chows-font-body) !important;
	font-size:12px !important; font-weight:500 !important;
	letter-spacing:.18em !important; text-transform:uppercase !important; line-height:1 !important;
	color:var(--chows-bg-deep) !important; background:var(--chows-accent) !important;
	border:1px solid var(--chows-accent) !important; padding:16px 30px !important;
	border-radius:var(--chows-radius) !important; box-shadow:none !important;
	cursor:pointer; text-decoration:none !important; min-height:0 !important;
	transition:background .25s ease;
}
.chows-trigger.chows-trigger:hover{ background:var(--chows-accent-hover) !important; border-color:var(--chows-accent-hover) !important; }
.chows-trigger.chows-trigger:focus-visible{ outline:2px solid var(--chows-accent); outline-offset:3px; }
.chows-trigger--float.chows-trigger{
	position:fixed; right:24px; bottom:24px; z-index:9998;
	box-shadow:0 10px 30px -8px rgba(0,0,0,.5) !important;
}

/* ---------- scoped reset ---------- */
#chows-reserve, #chows-reserve *, #chows-reserve *::before, #chows-reserve *::after{ box-sizing:border-box; }
#chows-reserve p, #chows-reserve h2, #chows-reserve dl, #chows-reserve dd, #chows-reserve dt, #chows-reserve ol, #chows-reserve li{
	margin:0 !important; padding:0; list-style:none;
}
#chows-reserve button, #chows-reserve input, #chows-reserve select, #chows-reserve textarea{
	font-family:var(--chows-font-body) !important; margin:0 !important;
	box-shadow:none !important; text-shadow:none !important; min-height:0 !important;
	border-radius:var(--chows-radius) !important; line-height:normal;
}
#chows-reserve button::after, #chows-reserve button::before{ content:none !important; }
#chows-reserve svg{ vertical-align:middle; }

/* ---------- shell ---------- */
#chows-reserve{
	position:fixed; inset:0; z-index:99999;
	display:flex; align-items:center; justify-content:center; padding:24px;
	font-family:var(--chows-font-body); color:var(--chows-text);
}
/* The WordPress admin bar sits on top of everything, so start below it. */
body.admin-bar #chows-reserve{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar #chows-reserve{ top:46px; } }
#chows-reserve[hidden]{ display:none; }
#chows-reserve .chows-overlay{ position:absolute; inset:0; background:rgba(10,8,6,.72); backdrop-filter:blur(3px); }

#chows-reserve .chows-dialog{
	position:relative; display:grid; grid-template-columns:300px 1fr;
	width:min(940px,100%);
	/* measured against the padded flex container, so it can never exceed the screen */
	max-height:100%;
	background:var(--chows-bg); border:1px solid var(--chows-line);
	border-radius:var(--chows-radius);
	box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
	animation:chows-rise .38s cubic-bezier(.2,.8,.25,1) both;
	overflow:hidden;
}
@keyframes chows-rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

#chows-reserve .chows-close{
	position:absolute; top:14px; right:14px; z-index:3;
	width:38px !important; height:38px !important; display:grid; place-items:center; padding:0 !important;
	background:transparent !important; border:1px solid var(--chows-line) !important;
	color:var(--chows-muted) !important; cursor:pointer;
	transition:color .2s ease, border-color .2s ease;
}
#chows-reserve .chows-close svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }
#chows-reserve .chows-close:hover{ color:var(--chows-accent) !important; border-color:var(--chows-accent) !important; background:transparent !important; }

/* ---------- brand panel ---------- */
#chows-reserve .chows-brand{
	display:flex; flex-direction:column; justify-content:space-between; gap:32px;
	padding:44px 34px; background:var(--chows-bg-deep);
	border-right:1px solid var(--chows-line);
	min-height:0; overflow-y:auto;
}
#chows-reserve .chows-eyebrow{
	display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
	color:var(--chows-muted); margin-bottom:20px !important;
}
#chows-reserve .chows-logo{ display:block; width:130px; height:auto; max-width:100%; }
#chows-reserve .chows-mark{
	display:block; font-family:var(--chows-font-display); font-size:32px;
	letter-spacing:.16em; color:var(--chows-text); line-height:1.1; text-transform:none;
}
#chows-reserve .chows-rule{ display:block; width:46px; height:1px; background:var(--chows-accent); margin-top:22px; }
#chows-reserve .chows-tag{ font-size:13px; line-height:1.6; color:var(--chows-muted); font-weight:300; margin-top:16px !important; }

#chows-reserve .chows-hours{ display:grid; gap:14px; }
#chows-reserve .chows-hours div{ padding-bottom:12px; border-bottom:1px solid var(--chows-line-soft); }
#chows-reserve .chows-hours dt{
	font-size:10px; letter-spacing:.16em; text-transform:uppercase;
	color:var(--chows-muted); margin-bottom:5px !important;
}
#chows-reserve .chows-hours dd{ font-size:13px; line-height:1.5; color:var(--chows-text); }
#chows-reserve .chows-hours a{ color:var(--chows-accent) !important; text-decoration:none !important; }
#chows-reserve .chows-hours a:hover{ color:var(--chows-accent-hover) !important; }

/* ---------- form panel ---------- */
#chows-reserve .chows-panel{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--chows-bg); }
#chows-reserve .chows-thread{ height:2px; background:var(--chows-line-soft); }
#chows-reserve .chows-thread span{ display:block; height:100%; width:33.33%; background:var(--chows-accent); transition:width .5s cubic-bezier(.2,.8,.25,1); }

#chows-reserve .chows-stepbar{
	display:flex; gap:26px; padding:20px 44px 0 !important;
	font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--chows-muted); opacity:.75;
}
#chows-reserve .chows-stepbar li::before{ content:attr(data-step-label) " · "; }
#chows-reserve .chows-stepbar li.is-active{ color:var(--chows-accent); opacity:1; }

#chows-reserve .chows-scroll{
	flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
	padding:26px 44px 44px; -webkit-overflow-scrolling:touch;
	scrollbar-width:thin; scrollbar-color:var(--chows-line) transparent;
}
#chows-reserve .chows-scroll::-webkit-scrollbar{ width:8px; }
#chows-reserve .chows-scroll::-webkit-scrollbar-thumb{ background:var(--chows-line); border-radius:8px; }
#chows-reserve .chows-scroll::-webkit-scrollbar-track{ background:transparent; }
#chows-reserve .chows-step{ display:none; }
#chows-reserve .chows-step.is-active{ display:block; animation:chows-fade .35s ease both; }
@keyframes chows-fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

#chows-reserve .chows-h2{
	font-family:var(--chows-font-display) !important; font-size:30px !important; font-weight:400 !important;
	color:var(--chows-text) !important; margin-bottom:6px !important; line-height:1.2 !important;
	text-transform:none !important; letter-spacing:.01em !important;
}
#chows-reserve .chows-sub{ font-size:14px; font-weight:300; color:var(--chows-muted); margin-bottom:26px !important; line-height:1.5; }

#chows-reserve .chows-field{ margin-bottom:20px; min-width:0; }
#chows-reserve .chows-label{
	display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
	color:var(--chows-muted) !important; margin-bottom:9px !important; font-weight:400;
}
#chows-reserve .chows-optional{ letter-spacing:.06em; text-transform:none; opacity:.6; }

/* inputs */
#chows-reserve .chows-input{
	width:100% !important; padding:14px 15px !important; height:auto !important;
	color:var(--chows-text) !important; font-size:15px !important; font-weight:300 !important;
	background-color:var(--chows-bg-deep) !important; border:1px solid var(--chows-line) !important;
	outline:none; transition:border-color .2s ease;
	-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
}
#chows-reserve select.chows-input{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23999999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:right 16px center !important;
	background-size:11px 7px !important;
	padding-right:42px !important;
	cursor:pointer;
}
#chows-reserve select.chows-input::-ms-expand{ display:none; }
#chows-reserve select.chows-input option{ background:var(--chows-bg-deep); color:var(--chows-text); }
#chows-reserve input[type="date"].chows-input::-webkit-calendar-picker-indicator{ filter:invert(.7); cursor:pointer; }
#chows-reserve .chows-input:focus{ border-color:var(--chows-accent) !important; }
#chows-reserve .chows-input::placeholder{ color:var(--chows-muted); opacity:.55; }
#chows-reserve .chows-textarea{ resize:vertical; line-height:1.6; }
#chows-reserve .chows-input.has-error{ border-color:var(--chows-error) !important; }
#chows-reserve .chows-error{ display:block; font-size:12px; color:var(--chows-error); margin-top:6px !important; line-height:1.5; }
#chows-reserve .chows-msg{ font-size:13px; font-weight:300; color:var(--chows-error); margin-top:14px !important; line-height:1.5; }

#chows-reserve .chows-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }

/* chips — the selected state must never be ambiguous */
#chows-reserve .chows-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#chows-reserve .chows-chip{
	min-width:52px; padding:12px 14px !important; font-size:14px !important; font-weight:400 !important;
	line-height:1.2 !important; cursor:pointer; text-transform:none !important; letter-spacing:normal !important;
	color:var(--chows-muted) !important; background:transparent !important;
	border:1px solid var(--chows-line) !important;
	transition:border-color .2s ease, color .2s ease, background .2s ease;
}
#chows-reserve .chows-chip:hover{ color:var(--chows-text) !important; border-color:var(--chows-muted) !important; background:transparent !important; }
#chows-reserve .chows-chip.is-on{
	background:var(--chows-accent) !important; border-color:var(--chows-accent) !important;
	color:var(--chows-bg-deep) !important; font-weight:600 !important;
	box-shadow:0 0 0 3px var(--chows-line-soft) !important;
}
#chows-reserve .chows-chip:focus-visible, #chows-reserve .chows-input:focus-visible{ outline:2px solid var(--chows-accent); outline-offset:2px; }

#chows-reserve .chows-btn--wide{ width:100%; margin-top:6px; }

/* buttons */
#chows-reserve .chows-btn{
	padding:15px 34px !important; font-size:11px !important; font-weight:500 !important;
	letter-spacing:.18em !important; text-transform:uppercase !important; line-height:1.2 !important;
	color:var(--chows-bg-deep) !important; background:var(--chows-accent) !important;
	border:1px solid var(--chows-accent) !important; cursor:pointer;
	transition:background .22s ease, color .22s ease, border-color .22s ease;
}
#chows-reserve .chows-btn:hover{ background:var(--chows-accent-hover) !important; border-color:var(--chows-accent-hover) !important; color:var(--chows-bg-deep) !important; }
#chows-reserve .chows-btn:focus-visible{ outline:2px solid var(--chows-accent); outline-offset:3px; }
#chows-reserve .chows-btn[disabled]{ opacity:.5; cursor:not-allowed; }
#chows-reserve .chows-btn--ghost{ background:transparent !important; color:var(--chows-muted) !important; border-color:var(--chows-line) !important; }
#chows-reserve .chows-btn--ghost:hover{ background:transparent !important; color:var(--chows-accent) !important; border-color:var(--chows-accent) !important; }
#chows-reserve .chows-btn--wa{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	width:100%; margin-bottom:14px; text-decoration:none !important;
	background:#25D366 !important; border-color:#25D366 !important; color:#0b3d1f !important;
}
#chows-reserve .chows-btn--wa:hover{ background:#1FBE59 !important; border-color:#1FBE59 !important; color:#0b3d1f !important; }
#chows-reserve .chows-btn--wa svg{ width:18px; height:18px; fill:currentColor; flex:none; }
#chows-reserve .chows-btn--wa[hidden]{ display:none; }
#chows-reserve .chows-wa-wrap{ margin-bottom:0 !important; }

#chows-reserve .chows-foot{
	flex:0 0 auto; display:flex; gap:12px;
	padding:18px 44px; background:var(--chows-bg);
	border-top:1px solid var(--chows-line);
}
#chows-reserve .chows-foot[hidden]{ display:none; }
#chows-reserve .chows-foot .chows-btn{ flex:1; }

#chows-reserve .chows-check{ display:flex; gap:11px; align-items:flex-start; font-size:13px; font-weight:300; color:var(--chows-muted); cursor:pointer; line-height:1.5; }
#chows-reserve .chows-check input{ width:17px !important; height:17px !important; margin-top:1px !important; accent-color:var(--chows-accent); flex:none; -webkit-appearance:checkbox !important; appearance:auto !important; }

/* honeypot */
#chows-reserve .chows-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* confirmation */
#chows-reserve .chows-done{ text-align:center; padding:14px 0; }
#chows-reserve .chows-seal{ width:62px; height:62px; margin:0 auto 22px; display:grid; place-items:center; border:1px solid var(--chows-accent); border-radius:50%; }
#chows-reserve .chows-seal svg{ width:24px; height:24px; fill:none; stroke:var(--chows-accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#chows-reserve .chows-summary{ margin:26px 0 !important; text-align:left; display:grid; gap:11px; }
#chows-reserve .chows-summary div{ display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--chows-line-soft); }
#chows-reserve .chows-summary dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--chows-muted); }
#chows-reserve .chows-summary dd{ font-size:14px; color:var(--chows-text); text-align:right; }
#chows-reserve .chows-where{ font-size:13px; font-weight:300; line-height:1.7; color:var(--chows-muted); margin-bottom:20px !important; }
#chows-reserve .chows-where a{ color:var(--chows-accent) !important; text-decoration:none !important; border-bottom:1px solid var(--chows-line); }
#chows-reserve .chows-where a:hover{ color:var(--chows-accent-hover) !important; }
#chows-reserve .chows-ref{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--chows-muted); margin-bottom:22px !important; }
#chows-reserve .chows-ref strong{ color:var(--chows-accent); font-weight:500; }

/* ---------- responsive ---------- */
@media (max-width:820px){
	#chows-reserve{ padding:0; align-items:stretch; }
	#chows-reserve .chows-dialog{ grid-template-columns:1fr; max-height:100vh; height:100%; width:100%; border-radius:0; border:0; }
	#chows-reserve .chows-brand{ flex-direction:row; align-items:center; gap:16px; padding:20px; border-right:0; border-bottom:1px solid var(--chows-line); }
	#chows-reserve .chows-brand-bottom{ display:none; }
	#chows-reserve .chows-eyebrow{ margin-bottom:8px !important; }
	#chows-reserve .chows-logo{ width:88px; }
	#chows-reserve .chows-mark{ font-size:22px; }
	#chows-reserve .chows-rule, #chows-reserve .chows-tag{ display:none; }
	#chows-reserve .chows-stepbar{ padding:18px 20px 0 !important; gap:16px; }
	#chows-reserve .chows-scroll{ padding:20px 20px 30px; }
	#chows-reserve .chows-btn--wa{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	width:100%; margin-bottom:14px; text-decoration:none !important;
	background:#25D366 !important; border-color:#25D366 !important; color:#0b3d1f !important;
}
#chows-reserve .chows-btn--wa:hover{ background:#1FBE59 !important; border-color:#1FBE59 !important; color:#0b3d1f !important; }
#chows-reserve .chows-btn--wa svg{ width:18px; height:18px; fill:currentColor; flex:none; }
#chows-reserve .chows-btn--wa[hidden]{ display:none; }
#chows-reserve .chows-wa-wrap{ margin-bottom:0 !important; }

#chows-reserve .chows-foot{ padding:14px 20px calc(14px + env(safe-area-inset-bottom)); }
	#chows-reserve .chows-foot .chows-btn{ padding:15px 14px !important; }
	#chows-reserve .chows-h2{ font-size:24px !important; }
	#chows-reserve .chows-grid-2{ grid-template-columns:1fr; }
	.chows-trigger--float.chows-trigger{ right:16px; bottom:16px; padding:14px 24px !important; }
}

/* short viewports — small laptops, browsers with lots of toolbars */
@media (max-height:760px){
	#chows-reserve{ padding:14px; }
	#chows-reserve .chows-brand{ padding:26px 28px; gap:18px; }
	#chows-reserve .chows-scroll{ padding-top:18px; padding-bottom:28px; }
	#chows-reserve .chows-h2{ font-size:26px !important; }
	#chows-reserve .chows-sub{ margin-bottom:20px !important; }
	#chows-reserve .chows-field{ margin-bottom:16px; }
	#chows-reserve .chows-btn--wa{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	width:100%; margin-bottom:14px; text-decoration:none !important;
	background:#25D366 !important; border-color:#25D366 !important; color:#0b3d1f !important;
}
#chows-reserve .chows-btn--wa:hover{ background:#1FBE59 !important; border-color:#1FBE59 !important; color:#0b3d1f !important; }
#chows-reserve .chows-btn--wa svg{ width:18px; height:18px; fill:currentColor; flex:none; }
#chows-reserve .chows-btn--wa[hidden]{ display:none; }
#chows-reserve .chows-wa-wrap{ margin-bottom:0 !important; }

#chows-reserve .chows-foot{ padding:14px 44px; }
}

@media (prefers-reduced-motion:reduce){
	#chows-reserve .chows-dialog, #chows-reserve .chows-step, #chows-reserve .chows-slots{ animation:none; }
	#chows-reserve .chows-thread span{ transition:none; }
}