/* Kahani Reservations — full-screen booking takeover.
   Colours, chamfer and both fonts arrive as CSS variables from PHP.

   A note on the selectors: theme kits (Elementor especially) print rules like
   `.elementor-kit-7 button { font-family:…; border-radius:…; background:… }`.
   That is specificity (0,1,1), which beats a bare `.kres-chip` (0,1,0) and was
   dressing our chips up as theme buttons. Every element rule below is therefore
   scoped under `.kres`, giving (0,2,0) — ours win without a single !important. */

.kres{
	--kres-e:cubic-bezier(.19,1,.22,1);
	--kres-base:.42s;
	position:fixed;inset:0;z-index:2147483000;
	background:var(--kres-deep,#0E0D0B);
	color:var(--kres-text,#B8AA96);
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:16px;font-weight:300;line-height:1.6;
	opacity:0;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
	transition:opacity .5s ease,visibility 0s linear .5s;
	-webkit-font-smoothing:antialiased;
}
.kres[hidden]{display:none}
.kres.is-open{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.kres.is-quick{--kres-base:.06s}
.kres *{box-sizing:border-box}
body.kres-locked{overflow:hidden}

/* Sticky headers carry very high z-index values of their own, so the site's
   navigation was showing through the takeover. While it is open they drop
   back; everything is restored the moment it closes. */
body.kres-locked header,
body.kres-locked .site-header,
body.kres-locked .elementor-location-header,
body.kres-locked [data-elementor-type="header"]{
	z-index:1 !important;
	pointer-events:none;
}

/* Themes often force a display value on buttons, which defeats the plain
   hidden attribute we use for the Back button and the WhatsApp link. */
.kres [hidden]{display:none !important}

/* ---------- inherited-style reset ----------
   Everything interactive starts from our own type, colour and shape. */
.kres button,
.kres input,
.kres select,
.kres textarea{
	margin:0;
	font-family:var(--kres-body,system-ui,sans-serif);
	font-weight:300;
	letter-spacing:normal;
	text-transform:none;
	box-shadow:none;
	-webkit-appearance:none;appearance:none;
}
.kres button{background:transparent;color:inherit}

/* ---------- curtain ---------- */
.kres__curtain{
	position:fixed;left:0;right:0;height:50.5%;z-index:8;
	background:var(--kres-deep,#0E0D0B);
	transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.kres__curtain--t{top:0}
.kres__curtain--b{bottom:0}
.kres.is-open .kres__curtain--t{transform:translateY(-100%)}
.kres.is-open .kres__curtain--b{transform:translateY(100%)}

/* ---------- backdrop texture ---------- */
.kres__watermark{
	position:fixed;inset:0;z-index:0;pointer-events:none;
	display:grid;place-items:center;
	opacity:0;transition:opacity 1.6s var(--kres-e) .35s;
}
.kres.is-open .kres__watermark{opacity:.05}
.kres__watermark i{
	display:block;width:min(760px,120vw);aspect-ratio:420/490;
	background:var(--kres-accent,#C49F2E);
	-webkit-mask:var(--kres-mark) center/contain no-repeat;
	        mask:var(--kres-mark) center/contain no-repeat;
}

.kres__grain{
	position:fixed;inset:0;z-index:1;pointer-events:none;
	opacity:.3;mix-blend-mode:overlay;background-size:300px 300px;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- top bar ---------- */
.kres__bar{
	position:sticky;top:0;z-index:6;
	display:flex;align-items:center;justify-content:space-between;
	gap:20px;padding:18px clamp(20px,4vw,48px);
	background:linear-gradient(to bottom,var(--kres-deep,#0E0D0B) 62%,transparent);
}
.kres__brand{display:flex;align-items:center;gap:13px}
.kres__brand i{
	display:block;width:26px;aspect-ratio:420/490;
	background:var(--kres-accent,#C49F2E);
	-webkit-mask:var(--kres-mark) center/contain no-repeat;
	        mask:var(--kres-mark) center/contain no-repeat;
}
.kres__brand span{
	font-family:var(--kres-display,Georgia,serif);
	font-size:20px;letter-spacing:.24em;color:var(--kres-heading,#F5E8D0);
}
.kres__logo{max-height:40px;width:auto;display:block}
.kres .kres__close{
	width:40px;height:40px;display:grid;place-items:center;padding:0;
	border:1px solid transparent;border-radius:var(--kres-radius,0);
	color:var(--kres-muted,#847766);cursor:pointer;
	transition:color .3s var(--kres-e),border-color .3s var(--kres-e);
}
.kres .kres__close:hover{color:var(--kres-accent,#C49F2E);border-color:var(--kres-hair)}
.kres__close svg{width:16px;height:16px}

/* ---------- progress thread ---------- */
.kres__thread{
	position:sticky;top:76px;z-index:6;height:1px;
	background:var(--kres-hair);margin:0 clamp(20px,4vw,48px);
}
.kres__thread i{
	display:block;height:1px;width:0;
	background:var(--kres-accent,#C49F2E);
	transition:width .8s var(--kres-e);
}

/* ---------- shell ---------- */
.kres__shell{
	position:relative;z-index:5;max-width:var(--kres-maxw,880px);margin:0 auto;
	padding:clamp(26px,5vw,54px) clamp(20px,4vw,48px) 90px;
}

.kres__steps{
	display:flex;gap:26px;list-style:none;padding:0;
	margin:0 0 clamp(26px,4vw,40px);
	font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
	color:var(--kres-muted,#847766);
}
.kres__steps li{display:flex;align-items:center;gap:9px;margin:0;transition:color .4s ease}
.kres__steps li::before{content:none}
.kres__steps li b{
	display:grid;place-items:center;width:22px;height:22px;
	font-weight:600;font-size:10px;border:1px solid currentColor;border-radius:50%;
}
.kres__steps li.is-active{color:var(--kres-accent,#C49F2E)}
.kres__steps li.is-done{color:var(--kres-gold,#C9A45C)}

.kres__head{margin-bottom:clamp(24px,3.4vw,38px)}
.kres__eyebrow{
	margin:0 0 14px;font-family:var(--kres-body,system-ui,sans-serif);
	font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
	color:var(--kres-accent,#C49F2E);
}
.kres .kres__title{
	margin:0;padding:0;
	font-family:var(--kres-display,Georgia,serif);font-weight:300;
	font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.02em;
	text-transform:none;color:var(--kres-heading,#F5E8D0);
}
.kres .kres__title em{font-style:italic;color:var(--kres-accent,#C49F2E)}
.kres__note{
	margin:18px 0 0;max-width:62ch;
	font-size:14px;line-height:1.85;color:var(--kres-muted,#847766);
}

/* ---------- field furniture ---------- */
.kres__field{margin-bottom:clamp(22px,3vw,32px)}
.kres__field--notes{margin-top:18px}
.kres__label{
	display:flex;align-items:center;gap:14px;margin:0 0 14px;
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
	color:var(--kres-accent,#C49F2E);line-height:1;
}
.kres__label::after{
	content:"";flex:1;height:1px;
	background:linear-gradient(to right,var(--kres-hair),transparent);
}
.kres__label span{color:var(--kres-muted,#847766);letter-spacing:2px}

/* ---------- chips ---------- */
.kres .kres-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.kres .kres-chip{
	min-width:52px;padding:13px 16px;box-shadow:none;text-shadow:none;
	background:transparent;color:var(--kres-text,#B8AA96);
	border:1px solid var(--kres-hair);border-radius:var(--kres-radius,0);
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;
	line-height:1;cursor:pointer;
	transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.kres .kres-chip:hover:not(:disabled){
	border-color:var(--kres-gold,#C9A45C);color:var(--kres-heading,#F5E8D0);
}
.kres .kres-chip.is-on{
	background:var(--kres-accent,#C49F2E);border-color:var(--kres-accent,#C49F2E);
	color:var(--kres-deep,#0E0D0B);font-weight:600;
}
.kres .kres-chip:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.kres .kres-chip:focus-visible{outline:2px solid var(--kres-accent,#C49F2E);outline-offset:2px}

/* ---------- date rail ---------- */
.kres .kres-rail{position:relative;display:flex;align-items:center;gap:10px}
.kres .kres-rail__track{
	display:flex;gap:9px;overflow-x:auto;scroll-behavior:smooth;
	padding-bottom:4px;scrollbar-width:none;
}
.kres .kres-rail__track::-webkit-scrollbar{display:none}
.kres .kres-rail__arrow{
	flex:none;width:34px;height:56px;display:grid;place-items:center;padding:0;
	background:transparent;color:var(--kres-muted,#847766);
	border:1px solid var(--kres-hair);border-radius:var(--kres-radius,0);
	cursor:pointer;transition:.3s ease;
}
.kres .kres-rail__arrow:hover{
	color:var(--kres-accent,#C49F2E);border-color:var(--kres-gold,#C9A45C);
}
.kres .kres-day{
	flex:none;width:66px;padding:9px 0;text-align:center;box-shadow:none;text-shadow:none;
	background:transparent;color:var(--kres-text,#B8AA96);
	border:1px solid var(--kres-hair);border-radius:var(--kres-radius,0);
	font-family:var(--kres-body,system-ui,sans-serif);
	line-height:1.25;cursor:pointer;
	transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.kres .kres-day small{
	display:block;font-family:var(--kres-body,system-ui,sans-serif);
	font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;opacity:.65;
}
.kres .kres-day b{
	display:block;font-family:var(--kres-display,Georgia,serif);
	font-size:23px;font-weight:400;font-style:normal;margin:3px 0 1px;
}
.kres .kres-day em{
	display:block;font-family:var(--kres-body,system-ui,sans-serif);
	font-style:normal;font-size:10px;font-weight:500;
	letter-spacing:1.5px;text-transform:uppercase;opacity:.55;
}
.kres .kres-day:hover:not(:disabled){
	border-color:var(--kres-gold,#C9A45C);color:var(--kres-heading,#F5E8D0);
}
.kres .kres-day.is-on{
	background:var(--kres-accent,#C49F2E);border-color:var(--kres-accent,#C49F2E);
	color:var(--kres-deep,#0E0D0B);
}
.kres .kres-day.is-on small,
.kres .kres-day.is-on em{opacity:.8}
.kres .kres-day:disabled{opacity:.25;cursor:not-allowed}
.kres .kres-day:focus-visible{outline:2px solid var(--kres-accent,#C49F2E);outline-offset:2px}

/* ---------- time slots ---------- */
.kres .kres-slots{display:grid;gap:18px}
.kres .kres-slots h4{
	margin:0 0 11px;padding:0;
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
	color:var(--kres-muted,#847766);
}
.kres .kres-slots.is-loading{opacity:.45}

/* ---------- inputs ---------- */
/* Two fixed columns, so the fields pair up predictably: first and last name on
   one row, phone and email on the next. auto-fit was fitting a third column at
   this width and leaving a hole beside the last field. */
.kres .kres-grid2{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px 22px;
}
.kres .kres-inp{
	width:100%;padding:14px 16px;
	background:var(--kres-bg,#1A1713);color:var(--kres-heading,#F5E8D0);
	border:1px solid var(--kres-hair);border-radius:var(--kres-radius,0);
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:15px;font-weight:300;line-height:1.4;
	transition:border-color .3s ease;
}
.kres .kres-inp::placeholder{color:var(--kres-muted,#847766);opacity:1}
.kres .kres-inp:focus{outline:none;border-color:var(--kres-accent,#C49F2E)}
.kres .kres-textarea{resize:vertical;min-height:86px}
.kres .kres-lab{
	display:block;margin-bottom:8px;
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
	color:var(--kres-muted,#847766);
}
.kres .kres-lab span{opacity:.7;letter-spacing:1.5px}
.kres .kres-err{
	display:block;margin-top:6px;min-height:14px;
	font-size:12px;color:var(--kres-error,#D9743F);
}
.kres .kres-check{
	display:flex;align-items:flex-start;gap:12px;margin-top:22px;
	font-size:14px;line-height:1.6;color:var(--kres-text,#B8AA96);cursor:pointer;
}
.kres .kres-check input{
	width:17px;height:17px;margin-top:2px;flex:none;
	-webkit-appearance:auto;appearance:auto;
	accent-color:var(--kres-accent,#C49F2E);
}

/* honeypot — moved off screen rather than display:none, which bots skip */
.kres .kres-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- buttons ---------- */
.kres .kres-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	padding:16px 34px;
	background:var(--kres-accent,#C49F2E);color:var(--kres-deep,#0E0D0B);
	border:1px solid var(--kres-accent,#C49F2E);border-radius:var(--kres-radius,0);
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:15px;font-weight:600;letter-spacing:.4px;text-transform:none;
	line-height:1;cursor:pointer;text-decoration:none;
	box-shadow:none;text-shadow:none;
	clip-path:polygon(var(--kres-btn-cham,11px) 0,100% 0,100% calc(100% - var(--kres-btn-cham,11px)),calc(100% - var(--kres-btn-cham,11px)) 100%,0 100%,0 var(--kres-btn-cham,11px));
	transition:background .35s ease,color .35s ease,opacity .3s ease;
}
.kres .kres-btn:hover{background:transparent;color:var(--kres-heading,#F5E8D0)}
.kres .kres-btn:disabled{opacity:.3;cursor:not-allowed}
.kres .kres-btn:focus-visible{outline:2px solid var(--kres-accent,#C49F2E);outline-offset:4px}
.kres .kres-btn--ghost{
	background:transparent;color:var(--kres-text,#B8AA96);border-color:var(--kres-hair);
}
.kres .kres-btn--ghost:hover{
	background:transparent;border-color:var(--kres-gold,#C9A45C);
	color:var(--kres-heading,#F5E8D0);
}
.kres .kres-btn--wa{background:#25D366;border-color:#25D366;color:#08240f;margin-top:20px}
.kres .kres-btn--wa:hover{background:transparent;color:#25D366}
.kres .kres-btn--wa svg{width:18px;height:18px;fill:currentColor}

.kres__foot{
	display:flex;gap:12px;align-items:center;flex-wrap:wrap;
	margin-top:clamp(26px,4vw,40px);padding-top:26px;
	border-top:1px solid var(--kres-hair);
}
.kres__spacer{flex:1}
.kres__recap{font-size:13px;color:var(--kres-muted,#847766);letter-spacing:.3px}

.kres .kres-msg{
	margin:16px 0 0;padding:14px 18px;
	background:var(--kres-bg,#1A1713);
	border-left:2px solid var(--kres-accent,#C49F2E);
	font-size:14px;line-height:1.7;color:var(--kres-text,#B8AA96);
}

/* ---------- steps ---------- */
.kres .kres-step{display:none}
.kres .kres-step.is-active{display:block}
.kres.is-open .kres-step.is-active > *{
	opacity:0;transform:translateY(16px);
	animation:kres-rise .85s var(--kres-e) forwards;
	animation-delay:calc(var(--kres-base) + var(--n,0) * .075s);
}
.kres .kres-step > *:nth-child(1){--n:0}
.kres .kres-step > *:nth-child(2){--n:1}
.kres .kres-step > *:nth-child(3){--n:2}
.kres .kres-step > *:nth-child(4){--n:3}
.kres .kres-step > *:nth-child(5){--n:4}
.kres .kres-step > *:nth-child(n+6){--n:5}
@keyframes kres-rise{to{opacity:1;transform:none}}

/* ---------- confirmation ---------- */
.kres .kres-done{max-width:620px}
.kres .kres-seal{position:relative;width:76px;height:76px;margin-bottom:26px}
.kres .kres-seal svg{width:76px;height:76px;display:block}
.kres .kres-seal__ring{
	fill:none;stroke:var(--kres-accent,#C49F2E);stroke-width:1;
	stroke-dasharray:232;stroke-dashoffset:232;
}
.kres .kres-seal__tick{
	fill:none;stroke:var(--kres-accent,#C49F2E);stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
	stroke-dasharray:36;stroke-dashoffset:36;
}
.kres .kres-step[data-step="3"].is-active .kres-seal__ring{
	animation:kres-draw 1.1s var(--kres-e) .1s forwards;
}
.kres .kres-step[data-step="3"].is-active .kres-seal__tick{
	animation:kres-draw .6s var(--kres-e) .8s forwards;
}
@keyframes kres-draw{to{stroke-dashoffset:0}}

.kres .kres-summary{
	display:grid;grid-template-columns:auto 1fr;gap:12px 26px;
	margin:28px 0 0;padding:24px 26px;
	background:var(--kres-bg,#1A1713);border:1px solid var(--kres-hair);
	clip-path:polygon(var(--kres-cham,16px) 0,calc(100% - var(--kres-cham,16px)) 0,100% var(--kres-cham,16px),100% calc(100% - var(--kres-cham,16px)),calc(100% - var(--kres-cham,16px)) 100%,var(--kres-cham,16px) 100%,0 calc(100% - var(--kres-cham,16px)),0 var(--kres-cham,16px));
}
.kres .kres-summary dt{
	margin:0;padding-top:5px;
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
	color:var(--kres-muted,#847766);
}
.kres .kres-summary dd{
	margin:0;font-family:var(--kres-display,Georgia,serif);
	font-size:21px;font-weight:400;line-height:1.35;
	color:var(--kres-heading,#F5E8D0);
}

.kres .kres-where{margin:22px 0 0;font-size:14px;line-height:1.8;color:var(--kres-muted,#847766)}
.kres .kres-where a{
	color:var(--kres-gold,#C9A45C);text-decoration:none;
	border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.kres .kres-where a:hover{border-bottom-color:var(--kres-gold,#C9A45C)}

.kres .kres-ref{
	margin:22px 0 0;font-size:12px;letter-spacing:3px;text-transform:uppercase;
	color:var(--kres-muted,#847766);
}
.kres .kres-ref strong{color:var(--kres-accent,#C49F2E);font-weight:600}
.kres .kres-wa-wrap{margin:0}

/* ---------- trigger button ----------
   Lives outside .kres, so the class is doubled to clear theme button rules. */
.kres-trigger.kres-trigger{
	display:inline-flex;align-items:center;gap:10px;
	padding:15px 32px;
	background:transparent;color:var(--kres-heading,#F5E8D0);
	border:1px solid var(--kres-gold,#C9A45C);border-radius:var(--kres-radius,0);
	font-family:var(--kres-body,system-ui,sans-serif);
	font-size:15px;font-weight:600;letter-spacing:.4px;text-transform:none;
	line-height:1;cursor:pointer;text-decoration:none;box-shadow:none;
	clip-path:polygon(var(--kres-btn-cham,11px) 0,100% 0,100% calc(100% - var(--kres-btn-cham,11px)),calc(100% - var(--kres-btn-cham,11px)) 100%,0 100%,0 var(--kres-btn-cham,11px));
	transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.kres-trigger.kres-trigger:hover{
	background:var(--kres-accent,#C49F2E);border-color:var(--kres-accent,#C49F2E);
	color:var(--kres-deep,#0E0D0B);
}
.kres-trigger.kres-trigger:focus-visible{outline:2px solid var(--kres-accent,#C49F2E);outline-offset:4px}
.kres-trigger--float.kres-trigger--float{position:fixed;right:24px;bottom:24px;z-index:9998}

@media(max-width:620px){
	.kres .kres-grid2{grid-template-columns:1fr}
}

@media(max-width:640px){
	.kres__steps{gap:14px;font-size:10px;letter-spacing:2px}
	.kres__steps li b{display:none}
	.kres .kres-summary{grid-template-columns:1fr;gap:4px 0}
	.kres .kres-summary dt{padding-top:12px}
	.kres__foot .kres-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
	.kres,.kres *{animation-duration:.01ms !important;transition-duration:.01ms !important}
	.kres .kres-step.is-active > *{opacity:1 !important;transform:none !important}
	.kres .kres-seal__ring,.kres .kres-seal__tick{stroke-dashoffset:0}
}