/* Webbo Booking Thank You (v2) */
.webbo-ty-wrap{width:100%}
/* 2.37.6: WooCommerce's order-received page, one column: no container padding/gap, the view starts right under the header. */
.e-con.webbo-cb-ty-flush{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;padding:0;margin-top:0}
.e-con.webbo-cb-ty-flush>.e-con-inner{padding:0}
.webbo-cb-ty-flush .webbo-ty-wrap,.webbo-cb-ty-flush .woocommerce-order{margin-top:0}
.ty{--cb-theme:#1919ff;--cb-on:#fff;--ty-ink:#0f172a;--ty-mute:#64748b;--ty-line:#eef0f4;font-family:var(--wa-font,var(--webbo-ui-font,var(--e-global-typography-text-font-family,inherit)));color:var(--ty-ink);-webkit-font-smoothing:antialiased;padding-bottom:56px}
.ty *{box-sizing:border-box}
.ty-hero{text-align:center;padding:72px 24px 44px;background:radial-gradient(110% 85% at 50% 0%,var(--cb-t14,#e3e4ff) 0%,transparent 72%),linear-gradient(180deg,var(--cb-t8,#f4f5ff) 0%,rgba(255,255,255,0) 100%)}
.ty-tick{width:88px;height:88px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;background:var(--cb-theme);color:var(--cb-on);box-shadow:0 0 0 10px var(--cb-t14,#e3e4ff),0 18px 40px -12px color-mix(in srgb,var(--cb-theme) 60%,transparent);animation:tyFade .3s ease-out both}
.ty-tick svg{width:42px;height:42px}
.ty-tick path{stroke-dasharray:24;stroke-dashoffset:24;animation:tyDraw .45s .35s ease-out forwards}
/* 2.37.6: the tick fades in (no zoom/scale). */
@keyframes tyFade{from{opacity:0}to{opacity:1}}
@keyframes tyDraw{to{stroke-dashoffset:0}}
@keyframes tyUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.ty-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cb-theme);margin-bottom:10px}
.ty-hero h1{font-size:40px;line-height:1.12;font-weight:600;letter-spacing:-.025em;margin:0 0 12px}
.ty-hero p{margin:0 auto;max-width:520px;color:var(--ty-mute);font-size:16.5px;line-height:1.5}
.ty-hero p b{color:var(--ty-ink);font-weight:600}
.ty-chip{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:#fff;border:1px solid var(--cb-t30,#c9cbff);border-radius:999px;padding:5px 5px 5px 16px;font-size:14px;color:var(--ty-mute);box-shadow:0 4px 14px -8px rgba(15,23,42,.25)}
.ty-chip strong{color:var(--ty-ink);font-weight:600;letter-spacing:.01em}
.ty-copy{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--cb-t8,#eef0ff);color:var(--cb-theme);font-weight:600;font-size:12.5px;font-family:inherit;padding:7px 12px;cursor:pointer;transition:background .15s}
.ty-copy:hover{background:var(--cb-t14,#e3e4ff)}
.ty-copy svg{width:14px;height:14px}
.ty-copy.done{background:var(--cb-theme);color:var(--cb-on)}
.ty-wrap{max-width:720px;margin:0 auto;padding:0 24px}
.ty-wrap>*{animation:tyUp .5s .25s ease-out both}
.ty-ticket{background:#fff;border:1px solid var(--ty-line);border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -24px rgba(15,23,42,.22);overflow:hidden}
.ty-when{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:18px}
.ty-when>div{background:var(--cb-t8,#f4f5ff);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center;min-width:0}
.ty-when .ic{background:#fff;color:var(--cb-theme)}
.ty-when small{display:block;font-size:12px;color:var(--ty-mute);margin-bottom:2px}
.ty-when b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ty-when .main b{font-size:20px}
.ty-perf{position:relative;height:0;border-top:2px dashed var(--ty-line);margin:2px 0}
.ty-perf:before,.ty-perf:after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--ty-page,#fff);border:1px solid var(--ty-line)}
.ty-perf:before{left:-11px}.ty-perf:after{right:-11px}
.ty-rows{list-style:none;margin:0;padding:8px 22px}
.ty-row{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--ty-line)}
.ty-row:last-child{border-bottom:0}
.ty .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cb-t8,#f4f5ff);color:var(--cb-theme);flex:none}
.ty .ic svg{width:20px;height:20px}
.ty-row small,.ty-lbl{display:block;font-size:12.5px;color:var(--ty-mute);margin-bottom:3px}
.ty-val{font-size:15.5px;font-weight:600;line-height:1.4}
.ty-sub{display:block;font-size:13.5px;color:var(--ty-mute);font-weight:400;margin-top:2px}
.ty-items{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.ty-items li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px}
.ty-items li span{color:var(--ty-ink);font-weight:500}
.ty-items li b{font-weight:500;color:var(--ty-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.ty-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;background:#f8fafc;border-top:1px solid var(--ty-line)}
.ty-total span{font-size:14px;color:var(--ty-mute)}
.ty-total strong{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--cb-theme);font-variant-numeric:tabular-nums}
.ty-next{margin-top:44px}
.ty-next h2,.ty-h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 22px;text-align:center}
.ty-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.ty-steps:before{content:"";position:absolute;top:17px;left:16.66%;right:16.66%;height:2px;background:var(--cb-t30,#c9cbff)}
.ty-steps li{position:relative;text-align:center;padding:0 6px}
.ty-dot{position:relative;width:36px;height:36px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--cb-theme);color:var(--cb-on);font-weight:600;font-size:14px;box-shadow:0 0 0 6px #fff}
.ty-steps b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.ty-steps span{font-size:13.5px;color:var(--ty-mute);line-height:1.45}
.ty-actions{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ty-btn,.ty-btn2{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:14px 22px;font-weight:600;font-size:15px;font-family:inherit;line-height:1.2;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;min-width:200px}
.ty-btn{background:var(--cb-theme);color:var(--cb-on);border:0;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cb-theme) 70%,transparent)}
.ty-btn:hover{background:var(--cb-dark,#15167e);transform:translateY(-1px)}
.ty-btn2{background:#fff;color:var(--ty-ink);border:1px solid #e2e8f0}
.ty-btn2:hover{border-color:#cbd5e1;background:#f8fafc}
.ty-btn svg,.ty-btn2 svg{width:18px;height:18px}
.ty-btn2 svg{color:#25d366}
.ty-home{display:block;width:max-content;margin:18px auto 0;color:var(--cb-theme);font-weight:600;font-size:14.5px;text-decoration:none}
.ty-home:hover{text-decoration:underline}
.ty-cap{margin:40px auto 0;max-width:460px;text-align:center;font-size:11.5px;color:#94a3b8;line-height:1.5}
.ty button:focus-visible,.ty a:focus-visible{outline:2px solid var(--cb-theme);outline-offset:3px}
@media (max-width:600px){
 .ty-hero{padding:48px 20px 32px}.ty-tick{width:76px;height:76px}.ty-tick svg{width:36px;height:36px}
 .ty-hero h1{font-size:29px}.ty-hero p{font-size:15px}
 .ty-wrap{padding:0 16px}
 .ty-when{grid-template-columns:1fr 1fr;padding:14px;gap:8px}.ty-when .main{grid-column:1/-1}.ty-when>div{padding:12px}.ty-when b{font-size:16px}.ty-when .when-ic{display:none}
 .ty-rows{padding:4px 16px}.ty-row{grid-template-columns:36px 1fr;gap:12px}.ty .ic{width:36px;height:36px;border-radius:10px}
 .ty-total{padding:16px}.ty-total strong{font-size:23px}
 .ty-next{margin-top:36px}.ty-next h2{text-align:left}
 .ty-steps{grid-template-columns:1fr;gap:22px}.ty-steps:before{top:18px;bottom:18px;left:17px;right:auto;width:2px;height:auto}
 .ty-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;text-align:left;padding:0}.ty-dot{margin:0}
 .ty-actions{flex-direction:column;margin-top:36px}.ty-btn,.ty-btn2{width:100%}
}
.ty.is-narrow .ty-hero{padding:48px 20px 32px}
.ty.is-narrow .ty-tick{width:76px;height:76px}
.ty.is-narrow .ty-tick svg{width:36px;height:36px}
.ty.is-narrow .ty-hero h1{font-size:29px}
.ty.is-narrow .ty-hero p{font-size:15px}
.ty.is-narrow .ty-wrap{padding:0 16px}
.ty.is-narrow .ty-when{grid-template-columns:1fr 1fr;padding:14px;gap:8px}
.ty.is-narrow .ty-when .main{grid-column:1/-1}
.ty.is-narrow .ty-when>div{padding:12px}
.ty.is-narrow .ty-when b{font-size:16px}
.ty.is-narrow .ty-when .when-ic{display:none}
.ty.is-narrow .ty-rows{padding:4px 16px}
.ty.is-narrow .ty-row{grid-template-columns:36px 1fr;gap:12px}
.ty.is-narrow .ic{width:36px;height:36px;border-radius:10px}
.ty.is-narrow .ty-total{padding:16px}
.ty.is-narrow .ty-total strong{font-size:23px}
.ty.is-narrow .ty-next{margin-top:36px}
.ty.is-narrow .ty-next h2{text-align:left}
.ty.is-narrow .ty-steps{grid-template-columns:1fr;gap:22px}
.ty.is-narrow .ty-steps:before{top:18px;bottom:18px;left:17px;right:auto;width:2px;height:auto}
.ty.is-narrow .ty-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;text-align:left;padding:0}
.ty.is-narrow .ty-dot{margin:0}
.ty.is-narrow .ty-actions{flex-direction:column;margin-top:36px}
.ty.is-narrow .ty-btn,.ty.is-narrow .ty-btn2{width:100%}

@media (prefers-reduced-motion:reduce){.ty-tick,.ty-wrap>*{animation:none}.ty-tick path{animation:none;stroke-dashoffset:0}.ty-btn,.ty-btn2{transition:none}}
.ty h1,.ty h2,.ty p{color:inherit}
.ty a.ty-btn,.ty a.ty-btn2{text-decoration:none}
.ty .ty-steps .ty-dot{color:#fff;font-size:14px;line-height:1} /* 2.37.4: white step numbers in the circles */
.ty .ty-home,.ty .ty-home:hover{text-decoration:none}
.ty .ty-home:hover{text-decoration:underline}
/* 2.37.4: the payment method's own thank-you text (e.g. bank details) inside the view. */
.ty .ty-payinfo{background:#fff;border:1px solid var(--ty-line);border-radius:18px;padding:18px 22px;margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--ty-ink)}
.ty .ty-payinfo :is(h2,h3){font-size:16px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.ty .ty-payinfo p{margin:0 0 8px}.ty .ty-payinfo p:last-child{margin-bottom:0}
.ty .ty-payinfo ul{list-style:none;margin:0;padding:0}.ty .ty-payinfo li{margin:2px 0}

/* 2.38.0: Theme Builder "Order Received" widgets. Each widget is its own .ty box; only the last one (Order Buttons)
   keeps the view's space at the bottom, so stacked widgets (no container gap) look exactly like the built-in view. */
.ty.ty-w{padding-bottom:0}
.ty.ty-w-actions,.ty.ty-w-auto{padding-bottom:56px}
.webbo-ty-tpl>.elementor{width:100%}
/* A Booking Ticket or Order Items card under another widget (not the Order Header) keeps an 18px gap, like Payment Info. */
.elementor-widget:not(.elementor-widget-webbo-order-header)+.elementor-widget-webbo-order-items .ty-ticket,.elementor-widget:not(.elementor-widget-webbo-order-header)+.elementor-widget-webbo-order-ticket .ty-ticket{margin-top:18px}
/* 2.48.11: calmer booking card.
   Tiles: date white with a 1px neutral inset outline, Drop-off / Arrival soft green, Ready by soft amber (AA text on each). Total amount near-black.
   Rows: 26px soft grey number badges (1, 2, 3) top-aligned, centred on the eyebrow line. Row 1 adds the store address and Get directions.
   Sizes of the tiles are unchanged; outlines are inset shadows so nothing moves. */
.ty .ty-when>div:nth-child(1){background:#fff;box-shadow:inset 0 0 0 1px #e5e7eb}
.ty .ty-when>div:nth-child(1) .ic{background:#f3f4f6;color:#374151}
.ty .ty-when>div:nth-child(1) small{color:#4b5563}
.ty .ty-when b{color:#111827;font-weight:600}
/* 2.48.13: Drop-off / Arrival tile = solid accent like Add to Calendar (text white only at AA, else dark ink);
   Ready by tile = light accent tint, soft accent border, accent text auto-darkened to AA. */
.ty .ty-when>div:nth-child(2){background:var(--cb-theme,#1919ff);box-shadow:none;color:var(--cb-on-fill,var(--cb-on,#fff))}
.ty .ty-when>div:nth-child(2) .ic{background:color-mix(in srgb,var(--cb-on-fill,var(--cb-on,#fff)) 18%,transparent);color:var(--cb-on-fill,var(--cb-on,#fff))}
.ty .ty-when>div:nth-child(2) small,.ty .ty-when>div:nth-child(2) b,.ty .ty-when>div:nth-child(2) strong,.ty .ty-when>div:nth-child(2) .ty-when-sub{color:var(--cb-on-fill,var(--cb-on,#fff))}
.ty .ty-when>div:nth-child(3){background:var(--cb-t8,#f4f5ff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cb-theme,#1919ff) 22%,transparent)}
.ty .ty-when>div:nth-child(3) .ic{background:color-mix(in srgb,var(--cb-theme,#1919ff) 14%,#fff);color:var(--cb-ink,var(--cb-theme,#1919ff))}
.ty .ty-when>div:nth-child(3) small,.ty .ty-when>div:nth-child(3) b,.ty .ty-when>div:nth-child(3) strong,.ty .ty-when>div:nth-child(3) .ty-when-sub{color:var(--cb-ink,var(--cb-theme,#1919ff))}
.ty .ty-rows{counter-reset:tyrow}
.ty .ty-rows>.ty-row{counter-increment:tyrow;grid-template-columns:26px 1fr;gap:12px;align-items:flex-start}
.ty .ty-rows>.ty-row>.ic{width:26px;height:26px;border-radius:50%;background:#f3f4f6;box-shadow:none;color:#374151;font-size:13px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.ty .ty-rows>.ty-row>.ic svg{display:none}
.ty .ty-rows>.ty-row>.ic::before{content:counter(tyrow)}
/* Badge centre = eyebrow line-box centre: eyebrow is 12.5px at line-height 1.5 (18.75px), so margin-top = (18.75 - 26) / 2.
   The account app sets the eyebrow to 13px (19.5px line box). */
.ty .ty-rows>.ty-row>.ic{margin-top:calc((12.5px * 1.5 - 26px) / 2)}
body.wm-app-body .wa-content .ty .ty-rows>.ty-row>.ic{margin-top:calc((13px * 1.5 - 26px) / 2)}
.ty .ty-store{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ty .ty-store-txt{min-width:0}
.ty .ty-addr{overflow-wrap:anywhere}
.ty .ty-dir{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;font-size:13.5px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s}
.ty .ty-dir svg{width:16px;height:16px;color:#4b5563;flex:none}
.ty .ty-dir:hover{background:#f9fafb;border-color:#d1d5db;color:#111827}
.ty .ty-dir:focus-visible{outline:2px solid #1f2937;outline-offset:2px}
.ty .ty-dir:active{background:#f3f4f6;transform:scale(.98)}
@media (max-width:600px){.ty .ty-rows>.ty-row{gap:10px}.ty .ty-store{flex-direction:column;align-items:flex-start;gap:10px}.ty .ty-dir{min-height:44px;padding:0 16px}}
.ty.is-narrow .ty-rows>.ty-row{gap:10px}
.ty.is-narrow .ty-store{flex-direction:column;align-items:flex-start;gap:10px}
.ty.is-narrow .ty-dir{min-height:44px;padding:0 16px}
@media (prefers-reduced-motion:reduce){.ty .ty-dir{transition:none}.ty .ty-dir:active{transform:none}}
.ty .ty-total strong,.ty .ty-total strong *{color:#111827;font-weight:600}
/* 2.48.11: row badges use the accent like the pre-2.49.1 icon chips (tint var(--cb-t8,#f4f5ff), number var(--cb-theme)). */
.ty .ty-rows>.ty-row>.ic{background:var(--cb-t8,#f4f5ff);color:var(--cb-theme)}
/* Walk-in (Anytime) tiles: a sub-line under the value; tiles in a row stretch to the same height. */
.ty .ty-when-walkin{align-items:stretch}
.ty .ty-when-sub{display:block;font-size:12px;line-height:1.4;color:#4b5563;margin-top:2px}
/* Track your repair icon in the brand accent (WhatsApp keeps its green); Back to Home uses an icon, not a typed arrow. */
.ty .ty-track svg{color:var(--cb-theme)}
.ty .ty-home{display:flex;align-items:center;gap:6px}
.ty .ty-home svg{width:16px;height:16px;flex:none}
.ty .ty-when-walkin b{white-space:normal}
/* Walk-in tiles carry a sub-line: equal columns, chip above the text, 16px values, so all three stay one height. */
.ty .ty-when-walkin{grid-template-columns:1fr 1fr 1fr}
.ty .ty-when-walkin>div{flex-direction:column;align-items:flex-start;gap:10px}
.ty .ty-when-walkin b,.ty .ty-when-walkin .main b{font-size:16px;line-height:1.3}
@media (max-width:600px){.ty .ty-when-walkin{grid-template-columns:1fr 1fr}.ty .ty-when-walkin>div{gap:0}}
.ty.is-narrow .ty-when-walkin{grid-template-columns:1fr 1fr}
.ty.is-narrow .ty-when-walkin>div{gap:0}
/* 2.48.12 mobile: Copy and Back to Home get a 44px tap area without changing how they look. */
.ty .ty-copy,.ty .ty-home{position:relative}
.ty .ty-copy::after{content:"";position:absolute;inset:-6px -4px}
.ty .ty-home::after{content:"";position:absolute;inset:-11px -8px}
/* 2.48.12: Paid online / Paid in store / Balance due under the total. */
.ty .ty-paid{margin:0;padding:0 22px 16px;background:#f8fafc;font-size:14px}
.ty .ty-paid div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.ty .ty-paid dt{color:#4b5563}
.ty .ty-paid dd{margin:0;color:#111827;font-weight:500;font-variant-numeric:tabular-nums}
.ty .ty-paid .due dt,.ty .ty-paid .due dd{color:#111827;font-weight:600}
@media (max-width:600px){.ty .ty-paid{padding:0 16px 14px}}
.ty.is-narrow .ty-paid{padding:0 16px 14px}

/* 2.48.13: action buttons. Add to Calendar is the one filled (accent) button; Track Order / View Booking / WhatsApp share one outline style.
   Phones: Add to Calendar full width, the others 50/50 beneath. Wide: one even row. */
.ty .ty-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:560px;margin-left:auto;margin-right:auto;flex-direction:initial}
.ty .ty-actions>.ty-btn,.ty .ty-actions>.ty-btn2{width:100%;min-width:0;min-height:48px;box-sizing:border-box;padding:12px 12px;gap:8px;font-size:15px;white-space:nowrap;line-height:1.2}
.ty .ty-actions>.ty-btn{grid-column:1/-1}
.ty .ty-actions>.ty-btn2{background:#fff;color:var(--ty-ink,#141a2b);border:1px solid #d5dbe5;box-shadow:none}
.ty .ty-actions>.ty-btn2:hover{background:#f8fafc;border-color:#b8c2d1}
.ty .ty-actions>.ty-btn2 svg{color:var(--cb-theme)}
.ty .ty-actions>.ty-btn2[href*="wa.me"] svg{color:#25d366}
.ty .ty-actions>.ty-btn2:last-child:nth-child(even),.ty .ty-actions>.ty-btn2:only-child{grid-column:1/-1}
@media (min-width:768px){
 .ty:not(.is-narrow) .ty-actions{display:flex;flex-wrap:nowrap;max-width:760px}
 .ty:not(.is-narrow) .ty-actions>.ty-btn,.ty:not(.is-narrow) .ty-actions>.ty-btn2{flex:1 1 0;width:auto}
}
@media (max-width:380px){.ty .ty-actions>.ty-btn,.ty .ty-actions>.ty-btn2{font-size:14.5px;padding:12px 8px}}

/* 2.48.14: Change booking row (quiet links under the buttons), dialog and toast. */
.ty .ty-change{max-width:560px;margin:14px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;font-size:14px;color:#4b5563;text-align:center}
.ty .ty-change-label{padding:0 4px}
.ty .ty-change-acts{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.ty .ty-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;background:none;border-radius:10px;font:inherit;font-weight:600;font-size:14px;color:var(--cb-ink,var(--cb-theme,#1919ff));cursor:pointer}
.ty .ty-link svg{width:16px;height:16px;flex:none}
.ty .ty-link:hover{background:var(--cb-t8,#f4f5ff)}
.ty .ty-link:focus-visible{outline:2px solid var(--cb-theme,#1919ff);outline-offset:2px}
.ty .ty-link-quiet{color:#4b5563}
.ty .ty-link[disabled]{color:#6b7280;cursor:not-allowed;background:none}
.ty .ty-change-note{flex-basis:100%;margin:0;font-size:13px;line-height:1.5;color:#4b5563}
.ty .ty-change-note a{color:var(--cb-ink,var(--cb-theme,#1919ff));font-weight:600}
.ty .ty-change.is-cancelled{gap:8px;padding:12px 14px;border-radius:12px;background:#fdecec;color:#7a1a12;justify-content:flex-start;text-align:left}
.ty .ty-change.is-cancelled svg{width:18px;height:18px;flex:none}
.ty .ty-change.is-cancelled p{margin:0}
.ty.ty-in-account .ty-change{margin:16px auto 4px}
html.bk-lock{overflow:hidden}
.bk-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;font-family:'Inter Tight',system-ui,sans-serif;color:#141a2b}
.bk-back{position:absolute;inset:0;background:rgba(15,22,34,.5)}
.bk-dialog{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 60px -20px rgba(15,22,34,.45);display:flex;flex-direction:column}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 6px}
.bk-head h2{margin:0;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#141a2b}
.bk-x{width:44px;height:44px;margin:-8px -10px -8px 0;display:grid;place-items:center;border:0;background:none;border-radius:10px;color:#4b5563;cursor:pointer}
.bk-x:hover{background:#f3f4f6}
.bk-body{padding:6px 20px 8px}
.bk-p{margin:0 0 12px;font-size:15px;line-height:1.5}
.bk-mute{color:#4b5563;font-size:14px}
.bk-note{margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--cb-t8,#f4f5ff);font-size:14px;line-height:1.5;color:#273248}
.bk-label{display:block;margin:0 0 8px;font-size:13px;font-weight:600;color:#4b5563}
.bk-sec{margin:0 0 14px}
.bk-input{width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;border:1px solid #d5dbe5;border-radius:10px;font:inherit;font-size:16px;color:#141a2b}
.bk-input:focus{outline:2px solid var(--cb-theme,#1919ff);outline-offset:1px;border-color:transparent}
.bk-input[aria-invalid=true]{border-color:#b42318}
.bk-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bk-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bk-day,.bk-time{min-height:48px;padding:6px 4px;border:1px solid #d5dbe5;background:#fff;border-radius:10px;font:inherit;color:#141a2b;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.2}
.bk-day{min-height:56px}
.bk-day small,.bk-time small{font-size:11.5px;color:#4b5563;font-weight:400}
.bk-day b,.bk-time b{font-size:14px;font-weight:600;white-space:nowrap}
.bk-time.is-walk{grid-column:1/-1}
.bk-day:hover:not([disabled]),.bk-time:hover:not([disabled]){border-color:var(--cb-theme,#1919ff)}
.bk-day.is-on,.bk-time.is-on{background:var(--cb-theme,#1919ff);border-color:var(--cb-theme,#1919ff);color:var(--cb-on-fill,#fff)}
.bk-day.is-on small,.bk-time.is-on small{color:inherit}
.bk-day[disabled],.bk-time[disabled]{background:#f5f7fa;color:#6b7280;cursor:not-allowed;border-color:#e5e7eb}
.bk-day:focus-visible,.bk-time:focus-visible,.bk-btn:focus-visible,.bk-x:focus-visible{outline:2px solid var(--cb-theme,#1919ff);outline-offset:2px}
.bk-hint,.bk-load{grid-column:1/-1;margin:0;font-size:14px;color:#4b5563}
.bk-err{display:flex;gap:8px;align-items:flex-start;margin:4px 0 8px;padding:10px 12px;border-radius:10px;background:#fdecec;color:#8a1c12;font-size:14px;line-height:1.45}
.bk-err[hidden]{display:none}
.bk-err svg{flex:none;margin-top:1px}
.bk-foot{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 20px 18px;background:#fff;border-top:1px solid #eef1f6}
.bk-btn{min-height:48px;padding:10px 12px;border-radius:12px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.bk-btn1{background:var(--cb-theme,#1919ff);color:var(--cb-on-fill,#fff);border:0}
.bk-btn1[disabled]{opacity:.45;cursor:not-allowed}
.bk-btn2{background:#fff;color:#141a2b;border:1px solid #d5dbe5}
.bk-danger{background:#b42318;color:#fff;border:0}
.bk-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:bk-spin .8s linear infinite}
@keyframes bk-spin{to{transform:rotate(360deg)}}
.bk-toast{position:fixed;left:50%;bottom:24px;z-index:100001;transform:translate(-50%,16px);opacity:0;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 16px;border-radius:12px;background:#141a2b;color:#fff;font-family:'Inter Tight',system-ui,sans-serif;font-size:14.5px;font-weight:600;line-height:1.4;box-shadow:0 14px 36px -14px rgba(15,22,34,.6);transition:opacity .2s,transform .2s}
.bk-toast svg{flex:none;color:#86efac}
.bk-toast.is-bad svg{color:#fca5a5}
.bk-toast.is-in{opacity:1;transform:translate(-50%,0)}
@media (max-width:420px){.bk-modal{align-items:flex-end;padding:0}.bk-dialog{max-width:none;border-radius:16px 16px 0 0;max-height:92vh}.bk-head{padding:16px 16px 4px}.bk-body{padding:6px 16px 8px}.bk-foot{padding:12px 16px 16px}.bk-btn{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.bk-spin{animation-duration:2s}.bk-toast{transition:none}}
/* Theme button resets (e.g. Hello Elementor's pink :hover/:focus) must not reach these controls. */
.ty .ty-link:focus,.ty .ty-link:active{background:none;color:var(--cb-ink,var(--cb-theme,#1919ff))}
.ty .ty-link-quiet:focus,.ty .ty-link-quiet:active{color:#4b5563}
.ty .ty-link:hover:not([disabled]){background:var(--cb-t8,#f4f5ff)}
.bk-modal button{box-shadow:none;text-transform:none;letter-spacing:normal}
.bk-day,.bk-time,.bk-day:focus,.bk-time:focus,.bk-day:hover,.bk-time:hover{background:#fff;color:#141a2b}
.bk-day.is-on,.bk-time.is-on,.bk-day.is-on:hover,.bk-time.is-on:hover,.bk-day.is-on:focus,.bk-time.is-on:focus{background:var(--cb-theme,#1919ff);color:var(--cb-on-fill,#fff)}
.bk-day[disabled],.bk-time[disabled],.bk-day[disabled]:hover,.bk-time[disabled]:hover{background:#f5f7fa;color:#6b7280}
.bk-x:focus,.bk-x:active{background:none;color:#4b5563}
.bk-x:hover{background:#f3f4f6;color:#141a2b}
.bk-btn1:hover,.bk-btn1:focus,.bk-btn1:active{background:var(--cb-dark,var(--cb-theme,#1919ff));color:var(--cb-on-fill,#fff)}
.bk-btn1[disabled]:hover{background:var(--cb-theme,#1919ff)}
.bk-btn2:hover,.bk-btn2:focus,.bk-btn2:active{background:#f8fafc;color:#141a2b}
.bk-danger:hover,.bk-danger:focus,.bk-danger:active{background:#8f1c13;color:#fff}
.ty .ty-change.is-cancelled{flex-wrap:nowrap;align-items:flex-start;font-size:14px;line-height:1.5;color:#7a1a12}
.ty .ty-change.is-cancelled svg{margin-top:2px}
.ty .ty-actions>.ty-btn2:first-child+.ty-btn2:last-child{grid-column:auto}
.ty-wrap>.ty-change,.ty-wrap>.ty-ticket{animation:none}
/* 2.48.14 fix: themes animate buttons (Hello Elementor reset.css: transition:all .3s), so a just-selected slot was
   caught mid-fade from its hover colour. Dialog controls change state instantly; keyboard focus ring only on :focus-visible. */
.bk-modal button{transition:none}
.bk-modal button:focus:not(:focus-visible){outline:none;box-shadow:none}
