/* ==========================================================================
   Default tenant theme — faithful port of the Next.js "tenant redesign"
   (SimplyBook-inspired). Brand tokens (--brand-primary/-secondary/-accent
   and --brand-primary-rgb) are injected per-center by the Blade layout.
   ========================================================================== */

:root {
  --tw-maxw: 1520px;

  /* The width the SITE may use. Normally the viewport; the theme builder shrinks it
     by its rail, so full-bleed sections bleed to the edge of the space they actually
     have instead of sliding underneath the panel. */
  --tw-vw: 100vw;

  --tw-canvas: #fafbfc;
  --tw-surface: #ffffff;
  --tw-surface-dim: #f4f6f8;
  --tw-surface-mute: #f7f8fa;
  --tw-text: #1f2b4d;
  --tw-text-secondary: #6b7a8d;
  --tw-text-muted: #9ca5b4;
  --tw-border: #e8ecf1;
  --tw-border-light: #f0f2f5;
  --tw-star: #f59e0b;
  --tw-success: #10b981;
  --tw-danger: #ef4444;

  --tw-r-sm: 10px;
  --tw-r-md: 14px;
  --tw-r-lg: 20px;
  --tw-r-xl: 24px;

  --tw-primary-tint: rgba(var(--brand-primary-rgb, 26, 58, 127), 0.08);
  --tw-primary-tint-strong: rgba(var(--brand-primary-rgb, 26, 58, 127), 0.14);
  --tw-primary-border: rgba(var(--brand-primary-rgb, 26, 58, 127), 0.20);
  --tw-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04);
  --tw-shadow-md: 0 8px 32px rgba(var(--brand-primary-rgb, 26, 58, 127), 0.12);
  --tw-shadow-hover: 0 12px 36px rgba(var(--brand-primary-rgb, 26, 58, 127), 0.15);

  --tw-font-brand: 'Outfit', system-ui, sans-serif;
  --tw-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --tw-nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--tw-font-body); color: var(--tw-text); background: var(--tw-canvas); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
/* Sticky footer: main grows to fill short pages so the footer sits at the viewport bottom (no empty gap beneath it). */
body > main { flex: 1 0 auto; }
html[dir="rtl"] body, html[lang="ar"] body { font-family: 'Tajawal', 'Plus Jakarta Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--tw-font-brand); color: var(--tw-text); margin: 0; line-height: 1.2; }
[id] { scroll-margin-top: 88px; }

/* ── Top gradient accent line ─────────────────────────────────────────── */
.tw-accent-line { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary, var(--brand-primary)) 45%, var(--brand-accent, var(--brand-primary)) 100%); }

/* ── Navbar (fixed, glassmorphic) ─────────────────────────────────────── */
.tw-navbar { position: fixed; inset: 3px 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--tw-nav-h); padding: 0 clamp(1rem, 4vw, 2rem); background: rgba(255,255,255,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--tw-border-light); }
.tw-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.tw-brand__logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 3px 12px rgba(0,0,0,0.12); }
.tw-brand__badge { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 1.2rem; font-weight: 800; font-family: var(--tw-font-brand); background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-brand__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tw-brand__name { font-family: var(--tw-font-brand); font-weight: 700; font-size: 1.05rem; color: var(--tw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-brand__sub { font-size: 0.72rem; color: var(--tw-text-muted); font-weight: 500; }
.tw-nav { display: flex; align-items: center; gap: 1.5rem; }
.tw-nav a { font-weight: 600; font-size: 0.95rem; color: var(--tw-text-secondary); padding: 0.35rem 0; position: relative; white-space: nowrap; transition: color 0.2s ease; }
.tw-nav a::after { content: ""; position: absolute; inset-inline: 0 100%; bottom: -2px; height: 2px; background: var(--brand-primary); border-radius: 2px; transition: inset-inline-end 0.25s ease; }
.tw-nav a:hover { color: var(--brand-primary); }
.tw-nav a:hover::after { inset-inline-end: 0; }
.tw-nav a.is-active { color: var(--brand-primary); background: var(--tw-primary-tint); border-radius: 999px; padding: 0.45rem 1.1rem; }
.tw-nav a.is-active::after { display: none; }
.tw-nav__actions { display: flex; align-items: center; gap: 0.6rem; }
/* Desktop: the menu wrapper is transparent so nav + actions lay out inline in the
   bar. On mobile it becomes a slide-down drawer (see the 900px media query). */
.tw-menu { display: contents; }
.tw-nav-scrim { display: none; }
.tw-lang { display: flex; align-items: center; gap: 0.15rem; background: var(--tw-surface-dim); border-radius: 12px; padding: 0.2rem; }
.tw-lang a { font-size: 0.82rem; font-weight: 600; color: var(--tw-text-secondary); padding: 0.32rem 0.6rem; border-radius: 9px; transition: all 0.2s ease; }
.tw-lang a[aria-current="page"] { color: #fff; background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 35%, transparent); }
.tw-btn-ghost { font-family: var(--tw-font-brand); font-weight: 600; font-size: 0.88rem; color: var(--tw-text); background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 12px; padding: 0.55rem 1.05rem; cursor: pointer; transition: all 0.2s ease; }
.tw-btn-ghost:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.tw-btn-signin { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--tw-font-brand); font-weight: 600; font-size: 0.88rem; color: #fff; border: 0; border-radius: 12px; padding: 0.6rem 1.1rem; cursor: pointer; background: linear-gradient(135deg, var(--brand-secondary, var(--brand-primary)), var(--brand-primary)); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 32%, transparent); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tw-btn-signin:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 38%, transparent); }
.tw-btn-ghost:disabled, .tw-btn-signin:disabled { opacity: 0.92; cursor: default; }
/* Account dropdown menu (navbar) — bookings / pets / packages / … / sign out. */
.tw-acct { position: relative; }
.tw-acct__btn { border: 0; }
.tw-acct__chev { transition: transform 0.2s ease; }
.tw-acct__chev.is-open { transform: rotate(180deg); }
.tw-acct__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 208px; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 14px; box-shadow: var(--tw-shadow-md); padding: 0.4rem; z-index: 70; display: flex; flex-direction: column; gap: 1px; }
.tw-acct__menu a, .tw-acct__out button { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: start; padding: 0.6rem 0.75rem; border-radius: 10px; font-family: var(--tw-font-body); font-weight: 600; font-size: 0.88rem; color: var(--tw-text); background: none; border: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.tw-acct__menu a:hover, .tw-acct__out button:hover { background: var(--tw-surface-mute); color: var(--brand-primary); }
.tw-acct__out { margin-top: 0.3rem; padding-top: 0.35rem; border-top: 1px solid var(--tw-border-light); }
.tw-acct__out button { color: #ef4444; }
.tw-acct__out button:hover { background: #fef2f2; color: #dc2626; }
/* Combined-mode branch switcher (navbar) — location pill + dropdown. */
.tw-branch { position: relative; }
.tw-branch__btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--tw-font-brand); font-weight: 600; font-size: 0.85rem; color: var(--brand-primary); background: var(--tw-primary-tint); border: 1px solid var(--tw-primary-border); border-radius: 12px; padding: 0.5rem 0.85rem; cursor: pointer; transition: background 0.15s ease; max-width: 220px; }
.tw-branch__btn:hover { background: var(--tw-primary-tint-strong); }
.tw-branch__cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-branch__chev { flex-shrink: 0; transition: transform 0.2s ease; }
.tw-branch__chev.is-open { transform: rotate(180deg); }
.tw-branch__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 252px; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 14px; box-shadow: var(--tw-shadow-md); padding: 0.4rem; z-index: 70; }
.tw-branch__menu.is-busy { opacity: 0.55; pointer-events: none; }
.tw-branch__hd { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tw-text-muted); padding: 0.4rem 0.6rem 0.5rem; }
.tw-branch__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: start; padding: 0.55rem 0.6rem; border-radius: 10px; background: none; border: 0; cursor: pointer; transition: background 0.15s ease; }
.tw-branch__item:hover:not(:disabled) { background: var(--tw-surface-mute); }
.tw-branch__item.is-active { background: var(--tw-primary-tint); cursor: default; }
.tw-branch__logo { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.tw-branch__logo--ph { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.9rem; background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-branch__m { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tw-branch__m b { font-size: 0.86rem; font-weight: 700; color: var(--tw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-branch__m span { font-size: 0.75rem; color: var(--tw-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-branch__tick { flex-shrink: 0; color: var(--brand-primary); }
.tw-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--tw-surface-dim); border: 0; border-radius: 11px; color: var(--tw-text); cursor: pointer; flex: none; }

main { padding-top: calc(var(--tw-nav-h) + 3px); }
.tw-wrap { max-width: var(--tw-maxw); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.tw-sec { max-width: var(--tw-maxw); margin: 0 auto 2rem; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: var(--tw-r-xl); box-shadow: var(--tw-shadow-card); padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 2rem); }
.tw-sec__title { font-family: var(--tw-font-brand); font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--brand-primary); letter-spacing: -0.5px; }
.tw-sec__sub { color: var(--tw-text-secondary); margin-top: 0.35rem; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.tw-hero { position: relative; overflow: hidden; min-height: clamp(440px, 52vw, 520px); display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; background: linear-gradient(135deg, var(--brand-accent, var(--brand-primary)) 0%, color-mix(in srgb, var(--brand-primary) 87%, transparent) 50%, color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 73%, transparent) 100%); }
.tw-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.tw-hero__content { position: relative; z-index: 2; padding: 3rem clamp(1.5rem, 4vw, 4rem); max-width: 740px; color: #fff; }
.tw-hero__badges { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tw-hero__badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700; color: #fff; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 0.35rem 0.7rem; }
.tw-hero__badge .s { color: #ffd66b; }
.tw-hero h1 { font-family: var(--tw-font-brand); font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; letter-spacing: -1px; color: #fff; text-wrap: balance; }
.tw-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); color: var(--brand-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: background 0.2s ease, transform 0.2s ease; }
.tw-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.tw-hero__arrow--prev { inset-inline-start: 12px; }
.tw-hero__arrow--next { inset-inline-end: 12px; }
.tw-hero__dots { position: absolute; bottom: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.tw-hero__dots button { width: 7px; height: 7px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; transition: all 0.3s ease; }
.tw-hero__dots button[aria-current="true"] { width: 22px; background: #fff; }
.tw-hero__desc { margin-top: 1rem; font-size: 1.05rem; font-weight: 500; line-height: 1.7; color: rgba(255,255,255,0.88); max-width: 500px; }
.tw-hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tw-hero__cta a { font-family: var(--tw-font-brand); font-weight: 700; font-size: 0.95rem; border-radius: 14px; padding: 0.85rem 1.6rem; transition: transform 0.2s ease; }
.tw-hero__cta a:hover { transform: translateY(-2px); }
.tw-cta-primary { background: #fff; color: var(--brand-primary); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.tw-cta-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px); }
.tw-cta-pkg { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; border: 1.5px solid color-mix(in srgb, var(--brand-secondary, #fff) 60%, transparent); background: color-mix(in srgb, var(--brand-secondary, #fff) 20%, transparent); backdrop-filter: blur(8px); }
.tw-cta-pkg:hover { background: color-mix(in srgb, var(--brand-secondary, #fff) 32%, transparent); border-color: var(--brand-secondary, #fff); }
.tw-cta-pkg svg { flex-shrink: 0; }
.tw-hero__pillars { display: flex; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.2); }
.tw-pillar b { display: block; font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.4rem; color: #fff; }
.tw-pillar span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.75); }
.tw-hero__media { position: absolute; inset-block: 0; inset-inline-end: 0; width: 48%; }
.tw-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center 36%; opacity: 0; transition: opacity 0.8s ease; }
.tw-hero__slide.is-active { opacity: 1; }
.tw-hero__media::after { content: ""; position: absolute; inset: 0; }

/* ── INFO CARD ────────────────────────────────────────────────────────── */
.tw-info { position: relative; z-index: 3; max-width: var(--tw-maxw); margin: -2.5rem auto 2.5rem; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: var(--tw-r-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.06); display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; }
.tw-info__col { padding: clamp(1.5rem, 3vw, 2.25rem); }
.tw-info__col + .tw-info__col { border-inline-start: 1px solid var(--tw-border); }
.tw-metrics { display: flex; gap: 2rem; margin-bottom: 1.5rem; }
.tw-metric { text-align: center; min-width: 78px; }
.tw-metric b { display: block; font-family: var(--tw-font-brand); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -1px; color: var(--brand-primary); }
.tw-metric span { display: block; margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tw-text-secondary); }
.tw-info__label { display: flex; align-items: center; gap: 0.55rem; font-family: var(--tw-font-brand); font-weight: 700; font-size: 1rem; color: var(--tw-text); margin-bottom: 0.65rem; }
.tw-info__label .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tw-primary-tint); color: var(--brand-primary); }
.tw-info__addr { color: var(--tw-text-secondary); font-size: 0.95rem; }
.tw-info__contacts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.tw-info__contacts a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--tw-surface-mute); color: var(--tw-text-secondary); transition: all 0.2s ease; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; }
.tw-info__contacts a:hover { background: var(--brand-primary); color: #fff; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tw-chips .c { font-size: 0.82rem; font-weight: 600; color: var(--brand-primary); background: var(--tw-primary-tint); border: 1px solid var(--tw-primary-border); border-radius: 10px; padding: 0.35rem 0.75rem; }
.tw-pay { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.25rem; }
.tw-pay div { display: flex; align-items: center; gap: 0.5rem; color: var(--tw-text-secondary); font-size: 0.9rem; }
.tw-pay .chk { color: var(--tw-success); }
.tw-hours { margin-top: 0.25rem; }
.tw-hours-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--tw-border-light); font-size: 0.9rem; }
.tw-hours-row:last-child { border-bottom: 0; }
.tw-hours-row .d { color: var(--tw-text); font-weight: 600; text-transform: capitalize; }
.tw-hours-row .h { color: var(--tw-text-secondary); }
.tw-hours-row .cl { color: var(--tw-text-muted); }
.tw-info__blocks { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── SERVICES ─────────────────────────────────────────────────────────── */
.tw-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0; }
.tw-count { font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--brand-primary); border-radius: 999px; padding: 0.3rem 0.8rem; }
.tw-search { position: relative; max-width: 320px; flex: 1; min-width: 200px; }
.tw-search input { width: 100%; font: inherit; font-size: 0.92rem; color: var(--tw-text); padding: 0.6rem 1rem 0.6rem 2.3rem; border: 1px solid var(--tw-border); border-radius: 12px; background: var(--tw-surface-mute); }
.tw-search input:focus { outline: none; border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 3px var(--tw-primary-tint); }
.tw-search svg { position: absolute; inset-inline-start: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--tw-text-muted); }
.tw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin: 0 0 1.75rem; transition: opacity 0.15s ease; }
.tw-filters.tw-is-busy { opacity: 0.6; }
.tw-filters .tw-search { flex: 1 1 240px; max-width: none; min-width: 200px; }
.tw-search input { height: 46px; }
/* Custom filter dropdown (accessible listbox) — replaces native <select>. */
.tw-dd { position: relative; display: inline-flex; }
.tw-select { display: inline-flex; align-items: center; gap: 0.45rem; height: 46px; padding: 0 0.85rem; background: var(--tw-surface-mute); border: 1px solid var(--tw-border); border-radius: 12px; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.tw-dd__trigger { font: inherit; color: var(--tw-text); text-align: start; -webkit-tap-highlight-color: transparent; }
.tw-dd__trigger:hover { border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--tw-border)); }
.tw-dd__trigger:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--tw-primary-tint); }
.tw-dd__trigger.is-open { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--tw-primary-tint); }
.tw-select.is-set { border-color: var(--brand-primary); background: var(--tw-primary-tint); }
.tw-dd__ico { color: var(--tw-text-muted); flex-shrink: 0; }
.tw-select.is-set .tw-dd__ico { color: var(--brand-primary); }
.tw-select__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tw-text-muted); white-space: nowrap; }
.tw-select.is-set .tw-select__label { color: var(--brand-primary); }
.tw-dd__value { font-size: 0.9rem; font-weight: 600; color: var(--tw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.tw-dd__caret { color: var(--tw-text-muted); flex-shrink: 0; margin-inline-start: auto; transition: transform 0.2s ease; }
.tw-dd__trigger.is-open .tw-dd__caret { transform: rotate(180deg); }
body.tw-dd-lock { overflow: hidden; }

/* Panel — anchored popover on desktop. */
.tw-dd__panel { position: absolute; z-index: 60; top: calc(100% + 6px); inset-inline-start: 0; min-width: 232px; max-width: 300px; max-height: 340px; overflow-y: auto; margin: 0; padding: 0.4rem; list-style: none; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(var(--brand-primary-rgb), 0.32), 0 4px 12px rgba(31, 43, 77, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top; transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s; }
.tw-dd__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.tw-dd__panel:focus { outline: none; }
html[dir="rtl"] .tw-dd__panel { inset-inline-start: auto; inset-inline-end: 0; }

.tw-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 44px; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500; color: var(--tw-text); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.tw-dd__opt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-dd__opt.is-active { background: var(--tw-surface-mute); }
.tw-dd__opt.is-selected { color: var(--brand-primary); font-weight: 600; }
.tw-dd__opt.is-selected.is-active { background: var(--tw-primary-tint); }
.tw-dd__check { color: var(--brand-primary); opacity: 0; flex-shrink: 0; transition: opacity 0.12s ease; }
.tw-dd__opt.is-selected .tw-dd__check { opacity: 1; }

/* Scrim + sheet header render only in the mobile bottom-sheet. */
.tw-dd__scrim { display: none; }
.tw-dd__sheet-head { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tw-dd__panel, .tw-dd__caret, .tw-dd__scrim { transition-duration: 0.06s; }
  .tw-dd__panel { transform: none; }
}
.tw-clear-filters { display: inline-flex; align-items: center; gap: 0.35rem; height: 46px; padding: 0 0.9rem; font-family: var(--tw-font-brand); font-weight: 600; font-size: 0.85rem; color: var(--tw-danger); background: transparent; border: 0; border-radius: 12px; cursor: pointer; transition: background 0.2s ease; }
.tw-clear-filters:hover { background: color-mix(in srgb, var(--tw-danger) 9%, transparent); }
.tw-cats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.tw-chip { font-weight: 600; font-size: 0.86rem; color: var(--tw-text); background: var(--tw-surface-mute); border: 1px solid var(--tw-border); border-radius: 12px; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s ease; }
.tw-chip:hover { background: var(--tw-primary-tint); }
.tw-chip.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 700; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.tw-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.tw-service { background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tw-service:hover { transform: translateY(-6px); box-shadow: var(--tw-shadow-hover); border-color: var(--tw-primary-border); }
.tw-service__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; background-color: var(--tw-surface-dim); overflow: hidden; }
/* Native lazy image element fills the card (mimics background cover); badges/heart, which
   follow it in the DOM, stack above. The neutral card bg shows until it loads. */
.tw-service__img-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-service__img--ph { display: grid; place-items: center; color: #fff; font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.6rem; background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-service__cat { position: absolute; top: 0.75rem; inset-inline-start: 0.75rem; background: rgba(0,0,0,0.62); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.6rem; border-radius: 8px; }
.tw-service__off { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; background: var(--tw-danger); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.22rem 0.55rem; border-radius: 8px; }
.tw-service__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.tw-service__name { font-family: var(--tw-font-brand); font-weight: 700; font-size: 0.98rem; color: var(--tw-text); }
.tw-service__desc { color: var(--tw-text-muted); font-size: 0.8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-service__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tw-service__meta span { font-size: 0.72rem; color: var(--tw-text-secondary); background: var(--tw-surface-dim); border-radius: 8px; padding: 0.2rem 0.5rem; }
.tw-service__foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--tw-border-light); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tw-price { font-family: var(--tw-font-brand); font-weight: 800; color: var(--tw-text); font-size: 1.35rem; line-height: 1; }
.tw-price small { color: var(--tw-text-muted); font-weight: 500; font-size: 0.68rem; }
.tw-price del { color: var(--tw-text-muted); font-weight: 500; font-size: 0.78rem; margin-inline-end: 0.35rem; }
.tw-book { font-family: var(--tw-font-brand); font-weight: 700; font-size: 0.85rem; color: #fff; border: 0; border-radius: 12px; padding: 0.6rem 1.1rem; cursor: pointer; white-space: nowrap; background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 28%, transparent); transition: transform 0.2s ease; }
.tw-book:hover { transform: translateY(-2px); }
.tw-empty { color: var(--tw-text-secondary); padding: 2rem 0; text-align: center; }
.tw-services.tw-is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }
.tw-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.tw-pager button { font-family: var(--tw-font-brand); font-weight: 600; font-size: 0.88rem; color: var(--tw-text); background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 12px; padding: 0.55rem 1.1rem; cursor: pointer; transition: all 0.2s ease; }
.tw-pager button:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--tw-primary-tint); }
.tw-pager button:disabled { opacity: 0.4; cursor: default; }
.tw-pager span { color: var(--tw-text-secondary); font-size: 0.9rem; font-weight: 600; }

/* ── ABOUT ────────────────────────────────────────────────────────────── */
.tw-about { color: var(--tw-text-secondary); font-size: 1rem; line-height: 1.85; white-space: pre-line; margin-top: 1rem; }

/* ── REVIEWS ──────────────────────────────────────────────────────────── */
/* Reviews header — title + count pill + "Review us on Google" (Next.js parity). */
.tw-rev-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0.35rem 0 1.5rem; }
.tw-rev-head .tw-sec__title { margin: 0; }
.tw-rev-count { display: inline-flex; align-items: center; font-family: var(--tw-font-body); font-weight: 700; font-size: 0.78rem; color: var(--brand-primary); background: var(--tw-primary-tint); border-radius: 8px; padding: 0.28rem 0.7rem; }
.tw-rev-gbtn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--tw-font-body); font-weight: 700; font-size: 0.78rem; color: var(--brand-primary); background: transparent; border: 1.5px solid var(--brand-primary); border-radius: 10px; padding: 0.34rem 0.8rem; transition: background 0.18s ease; }
.tw-rev-gbtn:hover { background: color-mix(in srgb, var(--brand-primary) 7%, transparent); }
.tw-rev-gbtn svg { flex-shrink: 0; }
/* Review stars: a fixed 5-star row (filled + faint empty) that never wraps. */
.tw-stars { display: inline-flex; gap: 1px; color: var(--tw-star); font-size: 0.82rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.tw-stars span.is-off { color: color-mix(in srgb, var(--tw-star) 24%, var(--tw-border)); }
/* Masonry review wall (CSS columns): mixed comment / rating-only cards pack tightly
   with no ragged gaps or stretched-empty cards. 5→1 columns responsively. */
.tw-reviews { column-count: 5; column-gap: 1rem; }
@media (max-width: 1200px) { .tw-reviews { column-count: 4; } }
@media (max-width: 992px)  { .tw-reviews { column-count: 3; } }
@media (max-width: 700px)  { .tw-reviews { column-count: 2; } }
@media (max-width: 480px)  { .tw-reviews { column-count: 1; } }
.tw-review { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 1rem; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 16px; padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.65rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tw-review:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--tw-primary-tint); border-color: var(--tw-primary-border); }
/* Avatar beside a stacked column of name → stars → date, so nothing competes for the
   same row and names never wrap mid-line at narrow (5-column) widths. */
.tw-review__head { display: flex; align-items: flex-start; gap: 0.6rem; }
.tw-review__av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--tw-font-brand); font-size: 0.95rem; background: color-mix(in srgb, var(--brand-primary) 90%, #000); object-fit: cover; }
.tw-review__who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.22rem; }
.tw-review__name { font-weight: 600; color: var(--tw-text); font-size: 0.88rem; line-height: 1.3; overflow-wrap: anywhere; }
.tw-review__when { color: var(--tw-text-muted); font-size: 0.73rem; }
.tw-review__text { color: var(--tw-text-secondary); font-size: 0.84rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tw-more { display: block; margin: 1.75rem auto 0; font-family: var(--tw-font-brand); font-weight: 600; color: var(--brand-primary); background: var(--tw-primary-tint); border: 0; border-radius: 12px; padding: 0.7rem 1.4rem; cursor: pointer; }

/* ── FOOTER (dark) ────────────────────────────────────────────────────── */
.tw-footer { position: relative; margin-top: 3rem; background: linear-gradient(175deg, var(--brand-accent, #1f2b4d) 0%, #111827 100%); color: #fff; overflow: hidden; }
.tw-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary)), transparent); }
.tw-footer__grid { max-width: var(--tw-maxw); margin: 0 auto; padding: 3rem clamp(1rem, 4vw, 2rem) 1.5rem; display: grid; grid-template-columns: 1.4fr 0.7fr 0.9fr; gap: 2.5rem; }
.tw-footer__brandrow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.tw-footer__badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--tw-font-brand); font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); flex: none; }
.tw-footer__brandmeta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tw-footer__name { font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.15rem; color: #fff; line-height: 1.1; }
.tw-footer__sub { font-size: 0.72rem; color: rgba(255,255,255,0.72); }
.tw-footer__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 10px; font-size: 0.68rem; font-weight: 700; }
.tw-footer__status.is-open { color: #34d399; background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.18); }
.tw-footer__status.is-closed { color: #ef4444; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.18); }
.tw-footer__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
.tw-footer__status.is-open .tw-footer__dot { box-shadow: 0 0 6px rgba(52,211,153,0.5); animation: tw-footer-pulse 2s ease-in-out infinite; }
@keyframes tw-footer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .tw-footer__dot { animation: none !important; } }
.tw-footer__desc { color: rgba(255,255,255,0.72); font-size: 0.82rem; line-height: 1.7; margin-top: 1rem; max-width: 300px; }
.tw-footer__social { display: flex; gap: 0.5rem; margin-top: 1rem; }
.tw-footer__social a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); text-transform: capitalize; font-size: 0.68rem; font-weight: 700; transition: all 0.2s ease; }
.tw-footer__social a:hover { background: var(--brand-primary); color: #fff; transform: translateY(-2px); }
.tw-footer__col h4 { font-family: var(--tw-font-brand); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.9rem; color: rgba(255,255,255,0.5); }
.tw-footer__col a, .tw-footer__col p { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.65); font-size: 0.9rem; padding: 0.3rem 0; }
.tw-footer__col a:hover { color: #fff; }
.tw-footer__legal { max-width: var(--tw-maxw); margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); font-size: 0.8rem; padding: 1.2rem clamp(1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tw-footer__legal a { color: var(--brand-primary); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────── */
.tw-hero__loc { display: none; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.92); font-size: 0.92rem; margin-top: 0.6rem; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }

/* Laptop / split-screen band (901–1200px): compress the horizontal navbar so it
   stays on one line instead of wrapping, before the ≤900px hamburger takes over. */
@media (max-width: 1200px) and (min-width: 901px) {
  .tw-navbar { gap: 0.55rem; padding: 0 1.1rem; }
  .tw-nav { gap: 0.8rem; }
  .tw-nav a { font-size: 0.9rem; }
  .tw-nav a.is-active { padding: 0.4rem 0.85rem; }
  .tw-nav__actions { gap: 0.4rem; }
  .tw-branch__btn { max-width: 150px; padding: 0.5rem 0.6rem; }
}

@media (max-width: 900px) {
  /* Mobile navbar: bar shows only brand + burger; everything else lives in a
     clean slide-down drawer so the bar never crowds on small screens. */
  .tw-navbar { padding: 0 1rem; gap: 0.5rem; }
  .tw-burger { display: inline-flex; }

  .tw-nav-scrim { display: block; position: fixed; inset: 0; z-index: 48; background: rgba(15,23,42,0.30); backdrop-filter: blur(2px); }

  .tw-menu {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: calc(var(--tw-nav-h) + 6px); inset-inline: 8px; z-index: 49;
    background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 20px;
    box-shadow: 0 22px 48px -14px rgba(15,23,42,0.32);
    padding: 10px; max-height: calc(100dvh - var(--tw-nav-h) - 22px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.99);
    transition: opacity .22s ease, transform .24s cubic-bezier(.2,.85,.25,1), visibility .24s;
  }
  .tw-menu.is-open { opacity: 1; visibility: visible; transform: none; }

  .tw-nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .tw-nav a { padding: 0.85rem 1rem; border-radius: 12px; font-size: 1rem; font-weight: 600; color: var(--tw-text); }
  .tw-nav a::after { display: none; }
  .tw-nav a:hover, .tw-nav a.is-active { background: var(--tw-primary-tint); color: var(--brand-primary); }

  .tw-nav__actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--tw-border-light); }
  .tw-lang { justify-content: stretch; padding: 0.25rem; }
  .tw-lang a { flex: 1; text-align: center; padding: 0.5rem; }
  .tw-wallet-chip { justify-content: center; padding: 11px; font-size: 0.9rem; }
  .tw-btn-signin { justify-content: center; padding: 12px; font-size: 0.95rem; }
  /* Account menu expands INLINE inside the drawer on mobile (an absolute popover
     would be clipped by the drawer's overflow / overflow the viewport). */
  .tw-acct { width: 100%; }
  .tw-acct__btn { width: 100%; justify-content: center; }
  .tw-acct__menu { position: static; inset: auto; min-width: 0; width: 100%; margin-top: 6px; padding: 4px; box-shadow: none; border-color: var(--tw-border-light); }
  .tw-acct__menu a, .tw-acct__out button { padding: 0.8rem 0.85rem; font-size: 0.95rem; }
  /* Branch switcher = full-width button + inline menu in the drawer (same as account). */
  .tw-branch { width: 100%; }
  .tw-branch__btn { width: 100%; justify-content: center; max-width: none; padding: 12px; font-size: 0.92rem; }
  .tw-branch__menu { position: static; inset: auto; min-width: 0; width: 100%; margin-top: 6px; box-shadow: none; border-color: var(--tw-border-light); }
  /* Mobile hero = full-bleed image with a bottom scrim + bottom-anchored content. */
  .tw-hero { display: block; position: relative; min-height: 62vh; }
  .tw-hero__media { position: absolute; inset: 0; width: 100%; }
  .tw-hero__media::after { background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.50) 44%, rgba(0,0,0,0.84) 70%, rgba(0,0,0,0.96) 100%); }
  .tw-hero__content { position: relative; z-index: 2; min-height: 62vh; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 1.35rem 2.9rem; }
  .tw-hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.15rem); margin-bottom: 0.35rem; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
  /* Arrows overlap the bottom-anchored text on mobile; the tappable dots + 5s
     autoplay handle navigation, so hide them for a cleaner hero. */
  .tw-hero__arrow { display: none; }
  .tw-hero__desc, .tw-hero__pillars { display: none; }
  .tw-hero__loc { display: inline-flex; }
  /* Stack the hero CTAs full-width on mobile — three in a row cram and wrap. */
  .tw-hero__cta { margin-top: 1.1rem; flex-direction: column; }
  .tw-hero__cta a { width: 100%; text-align: center; justify-content: center; padding: 0.9rem 1.6rem; }
  .tw-info { grid-template-columns: 1fr; margin-top: 0.5rem; }
  .tw-info__col + .tw-info__col { border-inline-start: 0; border-top: 1px solid var(--tw-border); }
  .tw-metrics { justify-content: space-around; }
  .tw-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tw-cats::-webkit-scrollbar { display: none; }
  .tw-services { grid-template-columns: 1fr; }
  .tw-filterbar { flex-direction: column; align-items: stretch; }
  .tw-search { max-width: none; }
  .tw-filters .tw-search { flex: 1 1 100%; }
  .tw-filters .tw-dd { flex: 1 1 100%; min-width: 0; }
  .tw-dd__trigger { width: 100%; }
  .tw-dd__value { max-width: none; flex: 1; }
  .tw-clear-filters { flex: 1 1 100%; justify-content: center; }

  /* Filter dropdowns become slide-up bottom sheets on mobile. */
  .tw-dd__scrim { display: block; position: fixed; inset: 0; z-index: 300; background: rgba(17, 24, 39, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; }
  .tw-dd__scrim.is-open { opacity: 1; visibility: visible; }
  /* Floating chat/notification widgets (z 1490/1500) must sit BEHIND an open
     filter sheet, not over it — mirror the .wz-overlay/.tw-modal hide rule. */
  body:has(.tw-dd__scrim.is-open) .tw-chat,
  body:has(.tw-dd__scrim.is-open) .tw-notif,
  body:has(.tw-dd__scrim.is-open) .tw-cfloat { display: none !important; }
  .tw-dd__panel { position: fixed; z-index: 310; left: 0; right: 0; bottom: 0; top: auto; min-width: 0; max-width: none; max-height: 74vh; padding: 0.5rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -12px 40px rgba(17, 24, 39, 0.3); }
  .tw-dd__panel.is-open { transform: none; }
  /* Re-pin BOTH edges in RTL: the desktop rule's `inset-inline-start: auto`
     (higher specificity than the mobile base) otherwise leaks in and collapses
     the full-width bottom sheet to content width. */
  html[dir="rtl"] .tw-dd__panel { inset-inline-start: 0; inset-inline-end: 0; }
  .tw-dd__sheet-head { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0.4rem 0 0.85rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--tw-border); }
  .tw-dd__sheet-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--tw-border); margin-bottom: 0.75rem; }
  .tw-dd__sheet-title { font-family: var(--tw-font-brand); font-weight: 700; font-size: 1rem; color: var(--tw-text); }
  .tw-dd__sheet-close { position: absolute; top: 0.15rem; inset-inline-end: 0; display: inline-flex; padding: 0.4rem; color: var(--tw-text-muted); background: var(--tw-surface-mute); border: 0; border-radius: 999px; cursor: pointer; }
  .tw-dd__opt { min-height: 52px; font-size: 0.98rem; padding: 0.75rem 0.65rem; }
  .tw-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── RTL ──────────────────────────────────────────────────────────────── */
html[dir="rtl"] .tw-search input { padding: 0.6rem 2.3rem 0.6rem 1rem; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Booking wizard ===== */
/* Ported verbatim from public/tenant-themes/default/_wizard-mockup.html.
   Brand + surface tokens (--brand-*, --tw-*) are already defined above and
   injected per-center by theme::layouts.app. */

/* ─── Wizard shell ─── */
.wz-overlay{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:1.5rem; background:rgba(31,43,77,.55); backdrop-filter:blur(3px); }
/* Floating widgets must never sit above an open modal (wizard or account modal). */
body:has(.wz-overlay) .tw-chat, body:has(.wz-overlay) .tw-notif, body:has(.wz-overlay) .tw-cfloat,
body:has(.tw-modal) .tw-chat, body:has(.tw-modal) .tw-notif, body:has(.tw-modal) .tw-cfloat { display: none !important; }
/* Lock the background from scrolling while any modal is open. The modal keeps its
   own inner scroll (.wz-body / .tw-modal__body), so long content stays reachable. */
html:has(.wz-overlay), html:has(.tw-modal), html:has(.wz-confirm), html:has(.tw-buy-overlay),
body:has(.wz-overlay), body:has(.tw-modal), body:has(.wz-confirm), body:has(.tw-buy-overlay) { overflow: hidden; }
.wz-modal{ width:100%; max-width:720px; max-height:92vh; display:flex; flex-direction:column; background:var(--tw-surface); border-radius:26px; overflow:hidden; box-shadow:0 40px 90px -20px rgba(31,43,77,.5); }

.wz-head{ display:flex; align-items:center; gap:1rem; padding:1.05rem 1.4rem; border-bottom:1px solid var(--tw-border); }
.wz-head__logo{ width:46px; height:46px; border-radius:14px; object-fit:cover; flex-shrink:0; box-shadow:0 4px 12px rgba(var(--brand-primary-rgb),.28); }
.wz-head__meta{ min-width:0; }
.wz-head__svc{ font-family:var(--tw-font-brand); font-weight:800; font-size:1.02rem; color:var(--tw-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-head__sub{ font-size:.8rem; color:var(--tw-text-secondary); display:flex; align-items:center; gap:.45rem; margin-top:1px; }
.wz-head__badge{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--brand-secondary); background:color-mix(in srgb,var(--brand-secondary) 12%,transparent); padding:.15rem .5rem; border-radius:999px; }
.wz-head__price{ margin-inline-start:auto; text-align:end; flex-shrink:0; }
.wz-head__price b{ font-family:var(--tw-font-brand); font-weight:800; font-size:1.15rem; color:var(--brand-primary); }
.wz-head__price span{ display:block; font-size:.7rem; color:var(--tw-text-muted); }
.wz-close{ flex-shrink:0; display:inline-flex; padding:.5rem; color:var(--tw-text-secondary); background:var(--tw-surface-mute); border:0; border-radius:999px; cursor:pointer; }
.wz-close:hover{ background:#eef1f5; color:var(--tw-text); }

/* Stepper */
.wz-steps{ display:flex; align-items:center; gap:.35rem; padding:.9rem 1.4rem; border-bottom:1px solid var(--tw-border); overflow-x:auto; scrollbar-width:none; }
.wz-steps::-webkit-scrollbar{ display:none; }
.wz-step{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; cursor:default; }
.wz-step__dot{ width:26px; height:26px; border-radius:999px; display:grid; place-items:center; font-size:.78rem; font-weight:700; color:var(--tw-text-muted); background:var(--tw-surface-mute); border:1.5px solid var(--tw-border); transition:.2s; }
.wz-step__lbl{ font-size:.82rem; font-weight:600; color:var(--tw-text-muted); white-space:nowrap; }
.wz-step.is-active .wz-step__dot{ color:#fff; background:var(--brand-primary); border-color:var(--brand-primary); box-shadow:0 0 0 4px var(--tw-primary-tint); }
.wz-step.is-active .wz-step__lbl{ color:var(--tw-text); }
.wz-step.is-done{ cursor:pointer; }
.wz-step.is-done .wz-step__dot{ color:#fff; background:var(--brand-secondary); border-color:var(--brand-secondary); }
.wz-step.is-done .wz-step__lbl{ color:var(--tw-text-secondary); }
.wz-step__sep{ width:16px; height:1.5px; background:var(--tw-border); flex-shrink:0; }
.wz-mobilebar{ display:none; }

/* Body + footer */
.wz-body{ padding:1.5rem 1.6rem; overflow-y:auto; flex:1; }
.wz-h{ font-family:var(--tw-font-brand); font-weight:800; font-size:1.35rem; color:var(--tw-text); letter-spacing:-.4px; }
.wz-sub{ color:var(--tw-text-secondary); font-size:.9rem; margin-top:.25rem; margin-bottom:1.25rem; }
.wz-foot{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.6rem; border-top:1px solid var(--tw-border); background:var(--tw-surface); }
.wz-foot__spacer{ flex:1; }
.wz-btn{ font-family:var(--tw-font-brand); font-weight:700; font-size:.95rem; color:#fff; background:linear-gradient(120deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 55%,var(--brand-accent))); border:0; border-radius:14px; padding:.8rem 1.5rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 10px 24px -8px rgba(var(--brand-primary-rgb),.6); transition:transform .15s, box-shadow .15s; }
.wz-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -8px rgba(var(--brand-primary-rgb),.7); }
.wz-btn-ghost{ font-family:var(--tw-font-brand); font-weight:600; font-size:.92rem; color:var(--tw-text-secondary); background:transparent; border:1px solid var(--tw-border); border-radius:14px; padding:.75rem 1.25rem; cursor:pointer; }
.wz-btn-ghost:hover{ background:var(--tw-surface-mute); color:var(--tw-text); }

/* ─── Generic pieces ─── */
.wz-card{ background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:16px; padding:1rem 1.1rem; }
.wz-field{ margin-bottom:.9rem; }
.wz-label{ display:block; font-size:.78rem; font-weight:700; color:var(--tw-text-secondary); margin-bottom:.4rem; }
.wz-input{ width:100%; font:inherit; font-size:.95rem; color:var(--tw-text); padding:.7rem .9rem; border:1px solid var(--tw-border); border-radius:12px; background:var(--tw-surface-mute); }

/* ── Themed select (JS-upgraded native <select.wz-input>; see theme.js) ─────── */
.wz-cs{ position:relative; }
.wz-cs__native{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); border:0; pointer-events:none; }
.wz-cs__btn{ display:flex; align-items:center; gap:.55rem; width:100%; text-align:start; cursor:pointer; }
.wz-cs.is-open .wz-cs__btn{ border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--tw-primary-tint); }
.wz-cs__val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wz-cs__val.is-empty{ color:var(--tw-text-muted); }
.wz-cs__caret{ width:14px; height:14px; flex-shrink:0; color:var(--tw-text-secondary); transition:transform .18s ease; }
.wz-cs.is-open .wz-cs__caret{ transform:rotate(180deg); }
.wz-cs.is-disabled{ opacity:.55; }
.wz-cs.is-disabled .wz-cs__btn{ cursor:not-allowed; }
.wz-cs__panel{ position:fixed; z-index:5000; margin:0; padding:.35rem; list-style:none; background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:14px; box-shadow:var(--tw-shadow-md); max-height:264px; overflow-y:auto; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.wz-cs__panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.wz-cs__opt{ display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:10px; cursor:pointer; font-size:.9rem; color:var(--tw-text); }
.wz-cs__opt-l{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wz-cs__opt:hover{ background:var(--tw-primary-tint); }
.wz-cs__opt.is-selected{ color:var(--brand-primary); font-weight:600; }
.wz-cs__check{ width:16px; height:16px; flex-shrink:0; color:var(--brand-primary); opacity:0; }
.wz-cs__opt.is-selected .wz-cs__check{ opacity:1; }
.wz-cs__opt.is-disabled{ opacity:.5; cursor:default; }
.wz-cs__opt.is-disabled:hover{ background:none; }
.wz-cs__scrim{ display:none; }
@media(max-width:560px){
  .wz-cs__scrim{ display:block; position:fixed; inset:0; z-index:4999; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .wz-cs__scrim.is-open{ opacity:1; pointer-events:auto; }
  .wz-cs__panel{ position:fixed !important; inset:auto 0 0 0 !important; top:auto !important; left:0 !important; width:auto !important; max-width:100% !important; border-radius:20px 20px 0 0; max-height:72vh; transform:translateY(100%); padding:.5rem .5rem 1.4rem; box-shadow:0 -10px 40px rgba(0,0,0,.25); }
  .wz-cs__panel.is-open{ transform:none; }
  .wz-cs__opt{ padding:.9rem .85rem; font-size:.98rem; }
}
@media(prefers-reduced-motion:reduce){ .wz-cs__caret,.wz-cs__panel{ transition:none; } }
.wz-input:focus{ outline:none; border-color:var(--brand-primary); background:#fff; box-shadow:0 0 0 3px var(--tw-primary-tint); }
.wz-row{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-start; }
.wz-row > *{ flex:1; min-width:0; }

.wz-chip{ font-weight:600; font-size:.9rem; color:var(--tw-text); background:var(--tw-surface-mute); border:1.5px solid var(--tw-border); border-radius:12px; padding:.55rem 1rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:.15s; }
.wz-chip:hover{ border-color:color-mix(in srgb,var(--brand-primary) 40%,var(--tw-border)); }
.wz-chip.is-sel{ color:var(--brand-primary); border-color:var(--brand-primary); background:var(--tw-primary-tint); }

/* Pets */
.wz-saved{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
/* ─── Pets step: card grid + add card (redesign) ─── */
.wz-petgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.7rem; margin-top:.2rem; }
.wz-petcard{ position:relative; background:var(--tw-surface); border:1.5px solid var(--tw-border); border-radius:16px; margin:0; display:flex; flex-direction:column; transition:border-color .16s, box-shadow .16s, transform .16s; }
button.wz-petcard{ padding:.95rem 1rem; gap:.6rem; text-align:start; cursor:pointer; font-family:inherit; }
.wz-petcard:hover{ border-color:var(--tw-primary-border); box-shadow:0 8px 20px var(--tw-primary-tint); transform:translateY(-2px); }
.wz-petcard.is-sel{ border-color:var(--brand-primary); box-shadow:0 0 0 1px var(--brand-primary); }
.wz-petcard.needs-info{ border-color:#f0d6a4; background:linear-gradient(0deg,#fdf3e0,var(--tw-surface) 62%); }
.wz-petcard.needs-info:hover{ border-color:#c2760a; }
.wz-petcard__body{ display:flex; flex-direction:column; gap:.6rem; width:100%; padding:.95rem 1rem; background:transparent; border:0; border-radius:16px; text-align:start; cursor:pointer; font-family:inherit; }
.wz-petcard__top{ display:flex; align-items:center; gap:.65rem; }
.wz-petcard__av{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; font-weight:800; font-size:1rem; color:#fff; object-fit:cover; background:linear-gradient(145deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 55%,#fff)); }
.wz-petcard__av--new{ background:linear-gradient(145deg,#5aa0c9,#8fd0ea); }
.wz-petcard__id{ min-width:0; flex:1; }
.wz-petcard__name{ font-weight:800; font-size:.95rem; color:var(--tw-text); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wz-petcard__meta{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.74rem; color:var(--tw-text-muted); margin-top:2px; }
.wz-petcard__type,.wz-petcard__new{ font-size:.64rem; font-weight:800; color:var(--brand-primary); background:var(--tw-primary-tint); border-radius:6px; padding:2px 6px; text-transform:uppercase; letter-spacing:.02em; }
.wz-petcard__dot{ width:3px; height:3px; border-radius:50%; background:var(--tw-text-muted); }
.wz-petcard__check{ width:22px; height:22px; flex:none; border-radius:50%; border:1.6px solid var(--tw-border); display:grid; place-items:center; color:transparent; transition:.16s; }
.wz-petcard.is-sel .wz-petcard__check{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
.wz-petcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.74rem; color:var(--tw-text-muted); }
.wz-petcard__ok{ color:var(--brand-primary); font-weight:700; }
.wz-petcard__flag{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; color:#b96b06; background:#fdf3e0; border:1px solid #f0d6a4; border-radius:8px; padding:3px 8px; }
.wz-petcard > .wz-petcard__rm{ position:absolute; top:7px; inset-inline-end:7px; z-index:2; margin:0; width:26px; height:26px; padding:0; display:grid; place-items:center; background:color-mix(in srgb,var(--tw-surface) 88%,transparent); border:1px solid var(--tw-border); border-radius:8px; }
.wz-addcard{ border:1.5px dashed var(--tw-primary-border); background:var(--tw-primary-tint); border-radius:16px; padding:1rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; min-height:120px; color:var(--brand-primary); font-family:inherit; transition:.16s; }
.wz-addcard:hover{ border-color:var(--brand-primary); transform:translateY(-2px); }
.wz-addcard__plus{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tw-surface); border:1.5px solid var(--tw-primary-border); font-size:1.5rem; line-height:1; color:var(--brand-primary); }
.wz-addcard b{ font-size:.9rem; font-weight:800; }
.wz-addcard span{ font-size:.72rem; opacity:.85; }
/* required-but-empty field highlight in the editor */
.wz-field--miss .wz-label{ color:#c2410c; }
.wz-field--miss .wz-input{ border-color:#e07a5f; background:#fdf3f0; }
.wz-need{ display:inline-block; margin-inline-start:6px; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#c2410c; background:#fdf3f0; border:1px solid #f2c7bd; border-radius:6px; padding:2px 6px; vertical-align:middle; }
.wz-req{ color:#dc2626; font-weight:800; }
.wz-vaxsec{ margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--tw-border); }
.wz-vaxsec__hd{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.8rem; color:var(--tw-text); margin-bottom:.6rem; }
.wz-vaxsec__hd svg{ color:var(--brand-primary); }
/* Pet editor sheet (add new / complete missing). z-index below the vax modal (1400). */
.wz-peteditor{ position:fixed; inset:0; z-index:1350; display:flex; align-items:center; justify-content:center; padding:1rem; }
.wz-peteditor__scrim{ position:absolute; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); }
.wz-peteditor__panel{ position:relative; width:100%; max-width:600px; max-height:92vh; display:flex; flex-direction:column; background:var(--tw-surface); border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(11,18,32,.5); }
.wz-peteditor__hd{ display:flex; align-items:center; gap:.7rem; padding:1.05rem 1.2rem; border-bottom:1px solid var(--tw-border); }
.wz-peteditor__ic{ flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; line-height:0; background:var(--tw-primary-tint); color:var(--brand-primary); }
.wz-peteditor__ic svg{ display:block; }
.wz-peteditor__hd b{ flex:1; min-width:0; font-weight:800; font-size:1.02rem; color:var(--tw-text); }
.wz-peteditor__x{ flex:none; width:32px; height:32px; border-radius:9px; border:0; background:var(--tw-surface-mute); color:var(--tw-text-muted); cursor:pointer; display:grid; place-items:center; }
.wz-peteditor__x:hover{ background:var(--tw-border); }
.wz-peteditor__body{ flex:1; overflow-y:auto; padding:1.1rem 1.2rem; }
.wz-peteditor__foot{ display:flex; gap:.6rem; justify-content:flex-end; padding:1rem 1.2rem; border-top:1px solid var(--tw-border); background:var(--tw-surface-mute); }
.wz-peteditor__banner{ display:flex; gap:.6rem; align-items:flex-start; background:#fdf3e0; border:1px solid #f0d6a4; border-radius:12px; padding:.7rem .85rem; margin-bottom:1.1rem; color:#b96b06; }
.wz-peteditor__banner svg{ flex:none; margin-top:1px; }
.wz-peteditor__banner b{ display:block; font-size:.86rem; font-weight:800; color:#7a4a06; }
.wz-peteditor__banner span{ font-size:.8rem; }
@media (max-width:560px){ .wz-peteditor{ padding:0; align-items:flex-end; } .wz-peteditor__panel{ max-width:none; max-height:94vh; border-radius:20px 20px 0 0; } }
.wz-note{ display:flex; gap:.55rem; align-items:flex-start; font-size:.82rem; color:var(--tw-text-secondary); background:color-mix(in srgb,var(--brand-secondary) 8%,transparent); border:1px solid color-mix(in srgb,var(--brand-secondary) 22%,transparent); border-radius:12px; padding:.6rem .8rem; margin-top:.4rem; }
.wz-add{ width:100%; font-family:var(--tw-font-brand); font-weight:600; color:var(--brand-primary); background:var(--tw-primary-tint); border:1.5px dashed color-mix(in srgb,var(--brand-primary) 40%,transparent); border-radius:14px; padding:.8rem; cursor:pointer; }

/* Address */
.wz-addr{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--tw-border); border-radius:14px; padding:.9rem 1rem; cursor:pointer; margin-bottom:.7rem; }
.wz-addr.is-sel{ border-color:var(--brand-primary); background:var(--tw-primary-tint); }
.wz-addr__radio{ width:20px; height:20px; border-radius:999px; border:2px solid var(--tw-border); flex-shrink:0; display:grid; place-items:center; }
.wz-addr.is-sel .wz-addr__radio{ border-color:var(--brand-primary); }
.wz-addr.is-sel .wz-addr__radio::after{ content:''; width:10px; height:10px; border-radius:999px; background:var(--brand-primary); }
.wz-map{ height:150px; border-radius:14px; margin-top:.4rem; background:linear-gradient(135deg,#dfe7f0,#eef2f7); border:1px solid var(--tw-border); display:grid; place-items:center; color:var(--tw-text-muted); font-size:.85rem; position:relative; overflow:hidden; }
.wz-map svg{ color:var(--brand-primary); }
.wz-cover{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:#0f9d58; background:#e7f6ee; border-radius:999px; padding:.35rem .8rem; margin-top:.6rem; }

/* Segmented type toggle */
.wz-seg{ display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--tw-surface-mute); border:1px solid var(--tw-border); border-radius:12px; padding:3px; margin-bottom:1.2rem; }
.wz-seg::-webkit-scrollbar{ display:none; }
.wz-seg button{ font:inherit; font-weight:600; font-size:.82rem; color:var(--tw-text-secondary); background:transparent; border:0; border-radius:9px; padding:.45rem .85rem; cursor:pointer; flex-shrink:0; white-space:nowrap; }
.wz-seg button.is-sel{ color:var(--brand-primary); background:#fff; box-shadow:0 2px 6px rgba(31,43,77,.08); }

/* Calendar — faithful port of Next.js .calendar-wrapper / .calendar-day.
   Available days are PLAIN (no tint); only special days get colour + a tiny
   uppercase status label. Whole calendar sits in a soft #f8f9fc card. */
.wz-cal{ background:#f8f9fc; border:1px solid #f0f2f5; border-radius:20px; padding:24px; }
.wz-cal__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.wz-cal__top b{ font-family:var(--tw-font-brand); font-weight:700; font-size:18px; color:#1f2b4d; }
.wz-cal__nav{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid #e8ecf1; border-radius:8px; background:#fff; cursor:pointer; color:#6b7a8d; transition:.2s; }
.wz-cal__nav:hover:not(:disabled){ border-color:var(--brand-primary); color:var(--brand-primary); }
.wz-cal__nav:disabled{ opacity:.4; cursor:not-allowed; }
.wz-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.wz-cal__dow{ text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9ca5b4; padding:8px 0; }
.wz-day{ aspect-ratio:1; border-radius:10px; border:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#1f2b4d; cursor:pointer; position:relative; background:transparent; padding:0; transition:background .15s; }
.wz-day:hover:not(:disabled):not(.is-sel){ background:rgba(var(--brand-primary-rgb,26,58,127),.06); }
.wz-day.is-off{ color:#9ca5b4; opacity:.4; cursor:not-allowed; }
.wz-day__n{ line-height:1; }
.wz-day__status{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:7px; font-weight:700; letter-spacing:.02em; white-space:nowrap; line-height:1; text-transform:uppercase; }
.wz-day.is-sel{ background:var(--brand-primary); color:#fff; box-shadow:0 2px 8px rgba(var(--brand-primary-rgb,26,58,127),.3); }
.wz-day.is-sel .wz-day__status{ display:none; }
.wz-slots{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.wz-slot{ font-weight:600; font-size:.88rem; color:var(--tw-text); background:var(--tw-surface-mute); border:1.5px solid var(--tw-border); border-radius:10px; padding:.5rem .9rem; cursor:pointer; }
.wz-slot.is-sel{ color:#fff; background:var(--brand-primary); border-color:var(--brand-primary); }
.wz-visit{ display:flex; align-items:center; gap:.7rem; border:1px solid var(--tw-border); border-radius:12px; padding:.7rem .9rem; margin-bottom:.6rem; }
.wz-visit__i{ width:32px; height:32px; border-radius:9px; background:var(--tw-primary-tint); color:var(--brand-primary); display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.wz-visit .wz-chip{ margin-inline-start:auto; padding:.3rem .7rem; font-size:.78rem; }

/* Add-ons */
.wz-addon{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--tw-border); border-radius:14px; padding:.85rem 1rem; margin-bottom:.7rem; cursor:pointer; }
.wz-addon.is-sel{ border-color:var(--brand-primary); background:var(--tw-primary-tint); }
.wz-check{ width:22px; height:22px; border-radius:7px; border:2px solid var(--tw-border); flex-shrink:0; display:grid; place-items:center; color:#fff; }
.wz-addon.is-sel .wz-check{ background:var(--brand-primary); border-color:var(--brand-primary); }
.wz-addon__m{ flex:1; }
.wz-addon__m b{ font-weight:600; font-size:.92rem; }
.wz-addon__m span{ display:block; font-size:.78rem; color:var(--tw-text-secondary); }
.wz-addon__p{ font-family:var(--tw-font-brand); font-weight:700; color:var(--brand-primary); }

/* Per-pet add-ons accordion (multi-pet bookings) */
.wz-petad{ border:1.5px solid var(--tw-border); border-radius:14px; margin-bottom:.7rem; overflow:hidden; }
.wz-petad__hd{ width:100%; display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; min-height:52px; background:var(--tw-surface-mute); border:0; font:inherit; color:var(--tw-text); text-align:start; cursor:pointer; }
.wz-petad__name{ flex:1; font-weight:600; font-size:.95rem; }
.wz-petad__meta{ display:flex; align-items:center; gap:.55rem; }
.wz-petad__badge{ min-width:20px; height:20px; padding:0 .4rem; display:inline-grid; place-items:center; border-radius:999px; background:var(--brand-primary); color:#fff; font-size:.72rem; font-weight:700; font-family:var(--tw-font-brand); }
.wz-petad__chev{ color:var(--tw-text-secondary); transition:transform .18s ease; flex-shrink:0; }
.wz-petad__chev.is-open{ transform:rotate(180deg); }
.wz-petad__body{ padding:.8rem 1rem 1rem; }
.wz-petad__body .wz-addon:last-child{ margin-bottom:0; }

/* OTP */
.wz-otp{ display:flex; gap:.5rem; margin:.4rem 0 .2rem; }
.wz-otp input{ width:46px; height:54px; text-align:center; font-size:1.3rem; font-weight:700; border:1.5px solid var(--tw-border); border-radius:12px; background:var(--tw-surface-mute); color:var(--tw-text); }
.wz-otp input:focus{ outline:none; border-color:var(--brand-primary); background:#fff; box-shadow:0 0 0 3px var(--tw-primary-tint); }
.wz-phone{ display:flex; gap:.5rem; }
.wz-phone .wz-prefix{ display:inline-flex; align-items:center; padding:0 .8rem; font-weight:600; background:var(--tw-surface-mute); border:1px solid var(--tw-border); border-radius:12px; color:var(--tw-text-secondary); }
.wz-muted{ font-size:.82rem; color:var(--tw-text-secondary); }
.wz-link{ color:var(--brand-primary); font-weight:600; cursor:pointer; }

/* Summary */
.wz-sumrow{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.92rem; }
.wz-sumrow.total{ border-top:1px dashed var(--tw-border); margin-top:.4rem; padding-top:.8rem; font-family:var(--tw-font-brand); font-weight:800; font-size:1.15rem; }
.wz-sumrow .muted{ color:var(--tw-text-secondary); }
.wz-sumrow .disc{ color:#0f9d58; }
.wz-pay{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--tw-border); border-radius:14px; padding:.85rem 1rem; margin-bottom:.6rem; cursor:pointer; }
.wz-pay.is-sel{ border-color:var(--brand-primary); background:var(--tw-primary-tint); }
.wz-pay__i{ width:40px; height:28px; border-radius:6px; display:grid; place-items:center; font-size:.68rem; font-weight:800; color:#fff; }
.wz-pay__m{ flex:1; font-weight:600; font-size:.9rem; }
.wz-pay__m span{ display:block; font-size:.76rem; color:var(--tw-text-secondary); font-weight:400; }
.wz-coupon{ display:flex; gap:.5rem; }
.wz-agree{ display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; color:var(--tw-text-secondary); margin-top:.4rem; }

/* Success */
.wz-success{ text-align:center; padding:1.5rem 1rem 1rem; }
.wz-success__ring{ width:88px; height:88px; border-radius:999px; margin:0 auto 1.1rem; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#22c55e,#0f9d58); box-shadow:0 16px 34px -10px rgba(15,157,88,.6); }
.wz-success h2{ font-family:var(--tw-font-brand); font-weight:800; font-size:1.5rem; }
.wz-ref{ display:inline-block; font-family:var(--tw-font-brand); font-weight:700; color:var(--brand-primary); background:var(--tw-primary-tint); border-radius:999px; padding:.35rem 1rem; margin:.7rem 0 1rem; }

.grid2{ display:grid; grid-template-columns:1.3fr .9fr; gap:1.3rem; }
@media (max-width:760px){
  .wz-overlay{ padding:0; }
  .wz-modal{ max-width:none; max-height:100vh; height:100dvh; border-radius:0; }
  .wz-steps{ display:none; }
  .wz-mobilebar{ display:block; padding:.7rem 1.4rem; border-bottom:1px solid var(--tw-border); }
  .wz-mobilebar__t{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--tw-text-secondary); font-weight:600; margin-bottom:.45rem; }
  .wz-mobilebar__track{ height:5px; border-radius:999px; background:var(--tw-surface-mute); overflow:hidden; }
  .wz-mobilebar__fill{ width:100%; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary)); transform-origin:left; transform:scaleX(.16); transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .grid2{ grid-template-columns:1fr; }
  .wz-head__price{ display:none; }
}

/* Wizard — pets step extras */
.wz-err { color: var(--tw-danger); font-size: 0.78rem; margin-top: 0.3rem; display: block; }
/* Designed field-level validation: any field holding an error tints its control red. */
.wz-field:has(.wz-err) .wz-input,
.wz-field:has(.wz-err) select,
.wz-field:has(.wz-err) input,
.wz-field:has(.wz-err) textarea { border-color: var(--tw-danger, #ef4444) !important; }
.wz-field:has(.wz-err) .wz-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-danger, #ef4444) 18%, transparent); }
.wz-opt { color: var(--tw-text-muted); font-weight: 500; }
.wz-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.wz-petcard__rm { margin-inline-start: auto; display: inline-flex; padding: 0.3rem; color: var(--tw-text-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.wz-petcard__rm:hover { color: var(--tw-danger); background: color-mix(in srgb, var(--tw-danger) 9%, transparent); }

.wz-is-busy { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }

/* Wizard — login step */
.wz-otp-input { text-align: center; letter-spacing: 0.5em; font-size: 1.35rem; font-weight: 700; font-family: var(--tw-font-brand); }
button.wz-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-primary); cursor: pointer; }

.wz-cover--no { color: #b91c1c; background: #fee2e2; }

/* Customer account */
.tw-account { max-width: 760px; margin-top: 1.5rem; }

/* ==========================================================================
   Account hub — app shell (sticky sidebar + content). Classes prefixed .acc-*.
   Token-driven, so default + lagoon share this block; per-center brand applies.
   ========================================================================== */
.tw-account:has(.acc-shell){ max-width:1100px; }
.acc-shell{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.4rem; }
@media(min-width:900px){ .acc-shell{ grid-template-columns:272px 1fr; gap:1.6rem; align-items:start; } }
.acc-side{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
@media(min-width:900px){ .acc-side{ position:sticky; top:calc(var(--tw-nav-h, 64px) + 1rem); } }
.acc-pcard{ background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:18px; padding:1.15rem; box-shadow:var(--tw-shadow-md); }
.acc-pcard__top{ display:flex; align-items:center; gap:.85rem; }
.acc-pav{ position:relative; width:56px; height:56px; border-radius:17px; flex-shrink:0; display:grid; place-items:center; cursor:pointer; background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary,var(--brand-primary))); color:#fff; font-family:var(--tw-font-brand); font-weight:700; font-size:1.4rem; }
.acc-pav img{ width:100%; height:100%; object-fit:cover; border-radius:17px; }
.acc-pav__cam{ position:absolute; inset-inline-end:-2px; inset-block-end:-2px; width:21px; height:21px; border-radius:50%; background:var(--brand-primary); color:#fff; display:flex; align-items:center; justify-content:center; line-height:0; box-shadow:0 2px 5px rgba(0,0,0,.25); border:2px solid var(--tw-surface); }
.acc-pav__cam svg{ display:block; width:12px; height:12px; }
.acc-pav__spin{ width:11px; height:11px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:acc-spin .7s linear infinite; }
@keyframes acc-spin{ to{ transform:rotate(360deg); } }
.acc-pcard__name{ font-family:var(--tw-font-brand); font-size:1.1rem; font-weight:700; color:var(--tw-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-pcard__ph{ color:var(--tw-text-secondary); font-size:.82rem; margin-top:.1rem; }
.acc-mini{ display:flex; gap:.5rem; margin-top:1rem; }
.acc-mini > div{ flex:1; background:var(--tw-surface-mute); border-radius:10px; padding:.5rem; text-align:center; min-width:0; }
.acc-mini b{ display:block; font-family:var(--tw-font-brand); font-size:1rem; font-weight:700; color:var(--tw-text); overflow:hidden; text-overflow:ellipsis; }
.acc-mini span{ font-size:.64rem; color:var(--tw-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.acc-nav{ background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:18px; padding:.5rem; box-shadow:var(--tw-shadow-md); display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; }
.acc-nav::-webkit-scrollbar{ display:none; }
@media(min-width:900px){ .acc-nav{ flex-direction:column; gap:.15rem; padding:.55rem; } }
.acc-navi{ display:inline-flex; align-items:center; gap:.7rem; padding:.66rem .85rem; border-radius:12px; color:var(--tw-text-secondary); font-weight:600; font-size:.9rem; white-space:nowrap; background:none; border:0; cursor:pointer; transition:background .16s ease,color .16s ease; }
.acc-navi svg{ width:19px; height:19px; flex-shrink:0; }
.acc-navi__c{ margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--tw-surface-mute); color:var(--tw-text-secondary); font-size:.7rem; font-weight:700; display:inline-grid; place-items:center; }
.acc-navi:hover{ background:var(--tw-primary-tint); color:var(--tw-text); }
.acc-navi.is-on{ background:var(--brand-primary); color:#fff; }
.acc-navi.is-on .acc-navi__c{ background:rgba(255,255,255,.24); color:#fff; }
.acc-signout{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem; border-radius:12px; border:1px solid var(--tw-border); color:#dc2f45; font-weight:600; font-size:.86rem; background:var(--tw-surface); cursor:pointer; }
.acc-signout:hover{ background:rgba(220,47,69,.08); border-color:#dc2f45; }
.acc-main{ min-width:0; }
.acc-head{ margin-bottom:1.1rem; }
.acc-head h1{ font-family:var(--tw-font-brand); font-size:1.5rem; color:var(--tw-text); }
.acc-feat{ position:relative; overflow:hidden; border-radius:18px; padding:1.15rem; margin-bottom:1.2rem; color:#fff; cursor:pointer; background:linear-gradient(120deg,var(--brand-primary),var(--brand-secondary,var(--brand-primary)) 68%,var(--brand-accent,var(--brand-primary))); box-shadow:var(--tw-shadow-md); }
.acc-feat::after{ content:""; position:absolute; inset-inline-end:-40px; inset-block-end:-70px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.1); }
.acc-feat__k{ position:relative; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.acc-feat__row{ position:relative; display:flex; align-items:center; gap:1rem; margin-top:.6rem; }
.acc-feat__date{ width:58px; flex-shrink:0; text-align:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); border-radius:14px; overflow:hidden; }
.acc-feat__date .m{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem 0; background:rgba(255,255,255,.14); }
.acc-feat__date .d{ font-family:var(--tw-font-brand); font-size:1.5rem; font-weight:700; padding:.12rem 0; }
.acc-feat__t{ flex:1; min-width:0; }
.acc-feat__t b{ font-size:1.05rem; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-feat__t span{ display:block; opacity:.9; font-size:.84rem; margin-top:.1rem; }
.acc-feat__pill{ display:inline-block; margin-top:.4rem; background:rgba(255,255,255,.2); border-radius:999px; padding:.2rem .6rem; font-size:.72rem; font-weight:600; }
.acc-feat__cta{ margin-inline-start:auto; flex-shrink:0; background:#fff; color:var(--brand-primary); font-weight:700; font-size:.84rem; padding:.55rem 1rem; border-radius:11px; }
@media(max-width:520px){ .acc-feat__cta{ display:none; } }
.acc-chips{ display:flex; gap:.45rem; margin-bottom:1rem; flex-wrap:wrap; }
.acc-chip{ padding:.42rem .8rem; border-radius:999px; background:var(--tw-surface); border:1px solid var(--tw-border); font-size:.82rem; font-weight:600; color:var(--tw-text-secondary); display:inline-flex; gap:.4rem; align-items:center; cursor:pointer; transition:.15s; }
.acc-chip .n{ background:var(--tw-surface-mute); border-radius:999px; padding:0 .4rem; font-size:.68rem; }
.acc-chip:hover{ border-color:var(--brand-primary); }
.acc-chip.is-on{ background:var(--tw-primary-tint); border-color:var(--brand-primary); color:var(--brand-primary); }
.acc-chip.is-on .n{ background:var(--brand-primary); color:#fff; }
.acc-bk{ background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:16px; margin-bottom:.85rem; box-shadow:var(--tw-shadow-md); transition:transform .2s ease; }
.acc-bk:hover{ transform:translateY(-2px); }
.acc-bk__in{ display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; cursor:pointer; }
.acc-dtile{ width:52px; flex-shrink:0; text-align:center; border-radius:12px; overflow:hidden; border:1px solid var(--tw-border); background:var(--tw-surface-mute); }
.acc-dtile .m{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.18rem 0; background:var(--tw-primary-tint); color:var(--brand-primary); }
.acc-dtile .d{ font-family:var(--tw-font-brand); font-size:1.25rem; font-weight:700; padding:.12rem 0; color:var(--tw-text); }
.acc-bk__b{ flex:1; min-width:0; }
.acc-bk__title{ font-weight:700; font-size:.96rem; color:var(--tw-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-bk__meta{ color:var(--tw-text-secondary); font-size:.8rem; margin-top:.2rem; display:flex; flex-wrap:wrap; gap:.2rem .7rem; }
.acc-bk__r{ text-align:end; flex-shrink:0; }
.acc-bk__price{ font-family:var(--tw-font-brand); font-weight:700; color:var(--tw-text); font-size:1rem; margin-top:.35rem; }
.acc-badge{ display:inline-block; padding:.24rem .6rem; border-radius:999px; font-size:.71rem; font-weight:700; }
.acc-badge--ok{ background:rgba(15,157,88,.14); color:#0d7a45; }
.acc-badge--pend{ background:var(--tw-primary-tint); color:var(--brand-primary); }
.acc-badge--no{ background:var(--tw-surface-mute); color:var(--tw-text-secondary); }
.acc-actions{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1.1rem; border-top:1px solid var(--tw-border-light); }
.acc-act{ padding:.5rem .85rem; border-radius:10px; background:var(--tw-surface-mute); border:1px solid var(--tw-border); font-size:.82rem; font-weight:600; color:var(--tw-text); cursor:pointer; transition:.15s; }
.acc-act:hover{ border-color:var(--brand-primary); color:var(--brand-primary); }
.acc-act--ok{ background:#0f9d58; border-color:#0f9d58; color:#fff; }
.acc-act--danger{ color:#dc2f45; }
.acc-act--danger:hover{ background:rgba(220,47,69,.08); border-color:#dc2f45; color:#dc2f45; }
.acc-act--ghost{ margin-inline-start:auto; background:none; border-color:transparent; color:var(--tw-text-secondary); }
.acc-pager{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; color:var(--tw-text-secondary); font-size:.85rem; }
.acc-pager button{ padding:.5rem .9rem; border-radius:10px; border:1px solid var(--tw-border); background:var(--tw-surface); cursor:pointer; font-weight:600; color:var(--tw-text); }
.acc-pager button:disabled{ opacity:.4; cursor:default; }
.acc-empty{ text-align:center; padding:2.6rem 1rem; color:var(--tw-text-secondary); background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:16px; }
.acc-empty__ic{ font-size:2.4rem; margin-bottom:.5rem; }
.acc-empty b{ display:block; color:var(--tw-text); font-size:1.02rem; }
.acc-wallet{ border-radius:18px; padding:1.4rem; color:#fff; background:linear-gradient(130deg,#0f9d58,#0a7a4d 78%,#0f9d58); box-shadow:var(--tw-shadow-md); position:relative; overflow:hidden; }
.acc-wallet::after{ content:"🪙"; position:absolute; inset-inline-end:1rem; inset-block-start:1rem; font-size:1.9rem; opacity:.5; }
.acc-wallet__l{ font-size:.75rem; opacity:.9; text-transform:uppercase; letter-spacing:.06em; }
.acc-wallet__b{ font-family:var(--tw-font-brand); font-size:2.2rem; font-weight:700; margin-top:.15rem; }
.acc-sec-label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tw-text-muted); margin:1.3rem 0 .7rem; }
.acc-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--tw-surface); border:1px solid var(--tw-border); border-radius:13px; padding:.85rem 1rem; margin-bottom:.6rem; box-shadow:var(--tw-shadow-md); }
.acc-row b{ font-size:.9rem; color:var(--tw-text); }
@media(prefers-reduced-motion:reduce){ .acc-bk,.acc-navi,.acc-chip,.acc-feat,.acc-act{ transition:none; } .acc-bk:hover{ transform:none; } .acc-pav__spin{ animation:none; } }
@media(max-width:560px){ .acc-shell{ margin-top:1rem; gap:1rem; } .acc-head h1{ font-size:1.3rem; } .acc-bk__in{ gap:.7rem; padding:.85rem .9rem; } .acc-feat{ padding:1rem; } .acc-feat__row{ gap:.75rem; } .acc-mini span{ font-size:.6rem; } }

.tw-account__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tw-account__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
.tw-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: capitalize; }
.tw-badge--ok { color: #0f9d58; background: #e7f6ee; }
.tw-badge--no { color: #b91c1c; background: #fee2e2; }
.tw-badge--pend { color: #b45309; background: #fef3c7; }

/* ── Service-agreement acceptance (summary step) ───────────────────── */
.wz-agreements { margin-top: 1.1rem; }
.wz-agree-card { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; padding: 16px 16px 14px; margin-bottom: 12px; }
.wz-agree-card__hd { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; color: var(--brand-primary); }
.wz-agree-card__hd b { flex: 1; font-size: 14.5px; color: #0f1b3d; }
.wz-req { font-size: 11px; font-weight: 700; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; padding: 3px 9px; border-radius: 999px; }
.wz-view-agree { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .07); border: 1px solid rgba(var(--brand-primary-rgb), .18); border-radius: 10px; padding: 8px 13px; cursor: pointer; }
.wz-view-agree:hover { background: rgba(var(--brand-primary-rgb), .12); }
.wz-agree-doc { margin: 12px 0 4px; padding: 12px 14px; background: #f8fafc; border: 1px solid #eceef3; border-radius: 12px; max-height: 300px; overflow-y: auto; }
.wz-agree-doc h4 { font-size: 13.5px; font-weight: 700; color: #0f1b3d; margin: 10px 0 4px; }
.wz-agree-doc h4:first-child { margin-top: 0; }
.wz-agree-doc p { font-size: 13px; line-height: 1.6; color: #3a4254; margin: 0 0 8px; }
.wz-agree-methods { margin: 12px 0 4px; }
.wz-agree--doc { margin-top: 12px; }
.wz-agree.is-locked { opacity: .55; }
.wz-sig { margin-top: 12px; }
.wz-sig.is-locked { opacity: .5; pointer-events: none; }
.wz-sig__cv { width: 100%; height: 150px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.wz-sig__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wz-sig__done { font-size: 12.5px; font-weight: 700; color: #0f9d58; }
.wz-btn-sm { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--brand-primary); border: none; border-radius: 9px; padding: 7px 13px; cursor: pointer; margin-inline-start: 8px; }
.wz-btn-sm:hover { filter: brightness(.94); }

/* ── Booking address map ─────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.wz-map-wrap { position: relative; }
.wz-map__search-wrap { position: relative; margin-bottom: .55rem; }
.wz-map__search { padding-inline-start: 38px !important; }
.wz-map__pin-ic { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: #9aa3b2; z-index: 2; pointer-events: none; }
.wz-map-canvas { position: relative; }
.wz-map { width: 100%; height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #eef1f5; }
.wz-map__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: #6b7280; background: rgba(238, 241, 245, .72); pointer-events: none; border-radius: 12px; }
/* Google's Places autocomplete dropdown must sit above the wizard modal. */
.pac-container { z-index: 100000 !important; }

/* ── Account: tappable booking rows + detail/reschedule/cancel modals ─── */
.tw-account__row--tap { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tw-account__row--tap:hover { border-color: rgba(var(--brand-primary-rgb), .35); box-shadow: 0 4px 16px rgba(15, 27, 61, .06); }
.tw-account__chev { color: #b6becb; flex-shrink: 0; }
.tw-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .tw-modal { align-items: center; } }
.tw-modal__scrim { position: absolute; inset: 0; background: rgba(15, 27, 61, .5); backdrop-filter: blur(2px); }
.tw-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(15, 27, 61, .2); animation: tw-modal-in .22s cubic-bezier(.22, 1, .36, 1); }
@media (min-width: 640px) { .tw-modal__panel { border-radius: 18px; } }
@keyframes tw-modal-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.tw-modal__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; border-bottom: 1px solid #eef1f5; }
.tw-modal__x { border: none; background: #f1f4f8; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; color: #556; flex-shrink: 0; }
.tw-modal__x:hover { background: #e7ebf1; }
.tw-modal__body { padding: 1.1rem 1.3rem; overflow-y: auto; }
.tw-modal__ft { display: flex; gap: .7rem; justify-content: flex-end; padding: 1rem 1.3rem; border-top: 1px solid #eef1f5; }
.tw-modal__ft .wz-btn, .tw-modal__ft .wz-btn-ghost { border-radius: 999px; }
.wz-btn--danger { background: #dc2626 !important; }
.wz-btn--danger:hover { filter: brightness(.94); }
.wz-btn-ghost--danger { color: #dc2626; border-color: rgba(220, 38, 38, .3); }
.wz-slots.is-loading { opacity: .5; pointer-events: none; }

/* Address: Building/Villa toggle */
.wz-loctype button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }

/* ── Favourites (heart on cards) + account stats ─────────────────────── */
.tw-fav-heart { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .92); color: #b6becb; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 27, 61, .12); transition: transform .12s, color .12s; z-index: 2; }
.tw-fav-heart:hover { transform: scale(1.1); color: #ef5a7a; }
.tw-fav-heart.is-on { color: #ef4d6e; }
[dir="rtl"] .tw-fav-heart { right: auto; left: 10px; }
.tw-fav__img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.tw-fav__x { border: none; background: transparent; color: #ef4d6e; cursor: pointer; padding: 4px; display: inline-flex; }
.tw-fav__x:hover { color: #b91c1c; }
.tw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1.2rem; max-width: 560px; }
.tw-stat { background: #fff; border: 1px solid #eef1f5; border-radius: 14px; padding: .9rem; text-align: center; }
.tw-stat__n { display: block; font-size: 1.5rem; font-weight: 800; color: var(--brand-primary); }
.tw-stat__l { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8893a5; margin-top: .1rem; }

/* ── Cancel refund UX ────────────────────────────────────────────────── */
.tw-refund { border: 1px solid #d1fae5; background: #f0fdf4; border-radius: 14px; padding: 14px 16px; }
.tw-refund__head { font-size: 1.05rem; font-weight: 800; color: #15803d; }
.tw-refund__sub { font-size: .85rem; color: #4b5563; margin-top: .3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tw-refund__badge { font-size: .72rem; font-weight: 800; color: #166534; background: #dcfce7; border-radius: 999px; padding: 2px 9px; }
.tw-refund__fee { margin-top: .6rem; font-size: .82rem; color: #854d0e; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 10px; padding: 8px 11px; }
.tw-refund__why { margin-top: .5rem; font-size: .76rem; color: #6b7280; line-height: 1.5; }
.tw-refund--info { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; font-size: .9rem; font-weight: 600; }
.tw-refund--none { border-color: #fecaca; background: #fef2f2; color: #991b1b; font-size: .88rem; }
.tw-detail__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .82rem; color: #6b7280; margin: .2rem 0 .9rem; }
.tw-detail__meta b { color: #3a4254; font-weight: 700; }

/* ── Recurring "repeat on" pattern builder ───────────────────────────── */
.wz-recur-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .07); border: 1px solid rgba(var(--brand-primary-rgb), .18); border-radius: 10px; padding: 8px 13px; cursor: pointer; margin: .1rem 0 1rem; }
.wz-recur-toggle.is-on { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.wz-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wz-wd { aspect-ratio: 1 / 1; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; font-weight: 700; font-size: .85rem; color: #6b7280; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.wz-wd:hover { border-color: rgba(var(--brand-primary-rgb), .4); }
.wz-wd.is-sel { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.wz-recur { margin-bottom: 1rem; }

/* ── Avatar upload + pets + icon buttons ─────────────────────────────── */
.tw-avatar { position: relative; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .85), var(--brand-primary)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.tw-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tw-avatar--lg { width: 90px; height: 90px; font-size: 2rem; border-radius: 20px; }
.tw-avatar--lg img { border-radius: 20px; }
.tw-avatar__cam { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15, 27, 61, .2); border: 1.5px solid #fff; }
[dir="rtl"] .tw-avatar__cam { right: auto; left: -2px; }
.tw-avatar__spin { width: 12px; height: 12px; border: 2px solid rgba(var(--brand-primary-rgb), .3); border-top-color: var(--brand-primary); border-radius: 50%; animation: tw-spin .7s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
.tw-pet { display: flex; align-items: center; gap: .9rem; }
.tw-pet__av { width: 52px; height: 52px; border-radius: 14px; background: #f1f4f8; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; overflow: hidden; }
.tw-pet__av img { width: 100%; height: 100%; object-fit: cover; }
.tw-pet__actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.wz-icon-btn { border: 1px solid #e5e7eb; background: #fff; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; cursor: pointer; }
.wz-icon-btn:hover { border-color: rgba(var(--brand-primary-rgb), .4); color: var(--brand-primary); }
.wz-icon-btn--danger:hover { border-color: #fecaca; color: #dc2626; }

/* ── Wallet card + upload button ─────────────────────────────────────── */
.wz-wallet { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent, #1f2b4d)); color: #fff; border-radius: 18px; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .3rem; }
.wz-wallet__l { font-size: .82rem; font-weight: 600; opacity: .85; }
.wz-wallet__n { font-size: 2rem; font-weight: 800; }
.wz-upload { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .07); border: 1px dashed rgba(var(--brand-primary-rgb), .35); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.wz-upload:hover { background: rgba(var(--brand-primary-rgb), .12); }

/* ── Booking detail modal (rich) + wallet chip + print ───────────────── */
.tw-detail__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.tw-detail__card { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; }
.tw-detail__k { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8893a5; }
.tw-detail__card b { font-size: .92rem; color: #0f1b3d; }
.tw-detail__sec { border-top: 1px solid #eef1f5; padding-top: .9rem; margin-top: .9rem; }
.tw-detail__sec-hd { font-size: .8rem; font-weight: 800; color: var(--brand-primary); margin-bottom: .5rem; }
.tw-wallet-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: #15803d; background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.tw-wallet-chip:hover { background: #dcfce7; }
@media print {
    body * { visibility: hidden; }
    .tw-modal__scrim { display: none !important; }
    #tw-detail-print, #tw-detail-print * { visibility: visible; }
    .tw-modal { position: absolute; inset: 0; display: block; }
    .tw-modal__panel { max-height: none; box-shadow: none; border-radius: 0; }
    .tw-modal__hd button, .tw-modal__ft { display: none !important; }
}

/* ── Calendar day availability states + legend ───────────────────────── */
/* Available (open) days are plain — no tint, dark number. Only special states
   get colour + a status label. Mirrors Next.js .avail-* classes exactly. */
.wz-day--limited .wz-day__status { color: #f59e0b; }
.wz-day--closed { color: #dc2626; opacity: .55; cursor: not-allowed; }
.wz-day--closed .wz-day__status { color: #dc2626; }
.wz-day--blocked { color: #f59e0b; opacity: .6; cursor: not-allowed; }
.wz-day--blocked .wz-day__status { color: #d97706; }
.wz-day--booked { color: #ef4444; opacity: .55; cursor: not-allowed; }
.wz-day--booked .wz-day__status { color: #ef4444; }
.wz-day--late, .wz-day--far, .wz-day--unavailable { color: #9ca3af; opacity: .5; cursor: not-allowed; }
.wz-day--late .wz-day__status, .wz-day--far .wz-day__status, .wz-day--unavailable .wz-day__status { color: #9ca3af; }
.wz-cal__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 8px 4px; font-size: .72rem; color: #6b7280; }
.wz-cal__legend span { display: inline-flex; align-items: center; gap: 5px; }
.wz-legdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.wz-legdot--limited { background: #f59e0b; }
.wz-legdot--closed { background: #dc2626; }
.wz-legdot--blocked { background: #f59e0b; }
.wz-legdot--booked { background: #ef4444; }
.wz-legdot--late, .wz-legdot--far, .wz-legdot--unavailable { background: #9ca3af; }
/* Recurring preview + presets */
.wz-recur-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.wz-chip-btn { font-size: .78rem; font-weight: 600; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .07); border: 1px solid rgba(var(--brand-primary-rgb), .18); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.wz-chip-btn:hover { background: rgba(var(--brand-primary-rgb), .13); }
.wz-recur-preview { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .2rem; }
.wz-recur-preview span { font-size: .74rem; font-weight: 600; color: #3a4254; background: #eef2f7; border-radius: 8px; padding: 3px 8px; }

/* ── Star rating ─────────────────────────────────────────────────────── */
.wz-stars { display: flex; gap: .3rem; }
.wz-star { font-size: 2rem; line-height: 1; color: #d1d5db; background: none; border: none; cursor: pointer; padding: 0 2px; transition: color .12s, transform .12s; }
.wz-star:hover { transform: scale(1.12); }
.wz-star.is-on { color: #f59e0b; }

/* ── Bookings sub-filter + per-card quick actions ────────────────────── */
.wz-seg--sub button { padding: .4rem .7rem; }
.wz-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: .3rem; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; border-radius: 999px; background: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary); }
.wz-seg--sub button.is-sel .wz-count { background: rgba(var(--brand-primary-rgb), .18); }
.tw-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid #eef1f5; }
.tw-quick__btn { font-size: .78rem; font-weight: 600; color: #3a4254; background: #f1f4f8; border: 1px solid #e5e7eb; border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.tw-quick__btn:hover { border-color: rgba(var(--brand-primary-rgb), .4); color: var(--brand-primary); }
.tw-quick__btn--ok { color: #fff; background: #0f9d58; border-color: #0f9d58; }
.tw-quick__btn--ok:hover { filter: brightness(.95); color: #fff; }
.tw-quick__btn--danger { color: #dc2626; border-color: #fecaca; }
.tw-quick__btn--danger:hover { background: #fef2f2; color: #dc2626; }

/* ── Home-page packages section (card grid) ──────────────────────────── */
.tw-packages { text-align: center; }
.tw-packages__sub { max-width: 640px; margin: .3rem auto 1.8rem; color: var(--tw-text-secondary); }
.tw-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.1rem; text-align: start; }
.tw-pkg-card { background: #fff; border: 1px solid var(--tw-border); border-radius: 18px; padding: 1.3rem; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(15, 27, 61, .05); transition: transform .15s, box-shadow .15s; }
.tw-pkg-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15, 27, 61, .1); }
.tw-pkg-card__name { font-weight: 800; font-size: 1.05rem; color: var(--tw-text); }
.tw-pkg-card__meta { font-size: .82rem; color: var(--tw-text-secondary); margin-top: .2rem; }
.tw-pkg-card__price { font-size: 1.6rem; font-weight: 800; color: var(--brand-primary); margin: .7rem 0 .1rem; }
.tw-pkg-card__visits { font-size: .78rem; color: var(--tw-text-muted); margin-bottom: 1rem; }
.tw-pkg-card__actions { display: flex; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.tw-pkg-card__actions .tw-book { flex: 1 1 auto; text-align: center; white-space: nowrap; }
/* Package the customer already owns — green "You own this" treatment (Next.js parity). */
.tw-pkg-card.is-owned { border-color: #34d399; box-shadow: 0 12px 30px -16px rgba(16,163,74,0.5); }
.tw-pkg-owned { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding: .5rem .65rem; border-radius: 11px; background: #ecfdf5; border: 1px solid #a7f3d0; font-size: .74rem; font-weight: 700; color: #15803d; line-height: 1.25; }
.tw-pkg-owned + .tw-pkg-card__actions { margin-top: .7rem; }
.tw-pkg-owned__ic { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #16a34a; }

/* Service the customer already has a package for — green badge + halo (Next.js parity). */
.tw-service.is-owned { border-color: #34d399; box-shadow: 0 10px 30px -14px rgba(16,163,74,0.45); }
.tw-svc-owned { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 11px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.tw-svc-owned__ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #16a34a; box-shadow: 0 4px 10px rgba(16,163,74,0.35); }
.tw-svc-owned__m { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tw-svc-owned__m b { font-size: .8rem; font-weight: 800; color: #15803d; }
.tw-svc-owned__m span { font-size: .7rem; font-weight: 600; color: #16a34a; }
.tw-book--ghost { background: transparent !important; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary) !important; }

/* ══════════════════════════════════════════════════════════════
   BUY-PACKAGE MODAL — parity with Next.js TenantBuyPackageModal
   ══════════════════════════════════════════════════════════════ */
.tw-buy-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); animation: twBuyFade .18s ease; }
@keyframes twBuyFade { from { opacity: 0 } to { opacity: 1 } }
.tw-buy { width: 100%; max-width: 396px; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(15,23,42,0.55); animation: twBuyPop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes twBuyPop { from { opacity: 0; transform: translateY(20px) scale(.96) } to { opacity: 1; transform: none } }
.tw-buy__head { position: relative; overflow: hidden; padding: 20px 22px 22px; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-buy__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.tw-buy__blob--a { top: -40px; right: -30px; width: 130px; height: 130px; background: rgba(255,255,255,0.12); }
.tw-buy__blob--b { bottom: -46px; left: -24px; width: 96px; height: 96px; background: rgba(255,255,255,0.08); }
.tw-buy__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; background: rgba(255,255,255,0.16); transition: background .15s; }
.tw-buy__x:hover { background: rgba(255,255,255,0.28); }
.tw-buy__headin { position: relative; z-index: 1; padding-right: 2rem; }
.tw-buy__pill { display: inline-flex; align-items: center; gap: .25rem; background: rgba(255,255,255,0.2); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; font-family: var(--tw-font-brand); font-size: .7rem; font-weight: 800; letter-spacing: .3px; color: #fff; }
.tw-buy__name { margin: 0; font-family: var(--tw-font-brand); font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.tw-buy__svc { margin: 2px 0 0; font-size: .78rem; opacity: .92; }
.tw-buy__body { padding: 20px 22px 22px; }
.tw-buy__total { display: flex; justify-content: space-between; align-items: center; border-radius: 14px; padding: 13px 16px; background: var(--tw-primary-tint); border: 1px solid var(--tw-primary-border); }
.tw-buy__total-l { font-size: .8rem; font-weight: 600; color: #5b6675; }
.tw-buy__total-v { font-family: var(--tw-font-brand); font-size: 1.35rem; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.5px; }
.tw-buy__label { margin: 18px 0 10px; font-family: var(--tw-font-brand); font-size: .68rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #9ca5b4; }
.tw-buy__methods { display: grid; gap: 10px; }
.tw-buy__method { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 12px 14px; border-radius: 14px; cursor: pointer; background: #fff; border: 2px solid #e8ecf1; transition: border-color .15s, background .15s; }
.tw-buy__method.is-sel { border-color: var(--brand-primary); background: var(--tw-primary-tint); }
.tw-buy__mico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: #f1f4f8; color: #8a94a6; transition: background .15s, color .15s; }
.tw-buy__method.is-sel .tw-buy__mico { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); color: #fff; }
.tw-buy__mtxt { flex: 1; min-width: 0; }
.tw-buy__mtitle { display: block; font-family: var(--tw-font-brand); font-weight: 700; font-size: .875rem; color: var(--brand-accent, #1f2b4d); }
.tw-buy__msub { display: block; font-size: .72rem; color: #8a94a6; }
.tw-buy__radio { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; border: 2px solid #cbd5e1; transition: border-color .15s, background .15s; }
.tw-buy__method.is-sel .tw-buy__radio { border-color: var(--brand-primary); background: var(--brand-primary); }
.tw-buy__gws { display: flex; gap: 10px; }
.tw-buy__gw { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 70px; padding: 0 6px; border-radius: 14px; cursor: pointer; background: #fff; border: 2px solid #e8ecf1; transition: border-color .15s, background .15s; }
.tw-buy__gw.is-sel { border-color: var(--brand-primary); background: var(--tw-primary-tint); }
.tw-buy__gwico { width: 34px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: var(--tw-primary-tint-strong); color: var(--brand-primary); }
.tw-buy__gwlabel { font-family: var(--tw-font-brand); font-size: .72rem; font-weight: 700; color: #5b6675; }
.tw-buy__gw.is-sel .tw-buy__gwlabel { color: var(--brand-primary); }
.tw-buy__err { margin: 12px 0 0; color: #b91c1c; font-size: .78rem; }
.tw-buy__cta { margin-top: 18px; width: 100%; border: 0; border-radius: 14px; padding: 13px; cursor: pointer; color: #fff; font-family: var(--tw-font-brand); font-weight: 700; font-size: .95rem; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand-primary) 80%, transparent); transition: box-shadow .2s, transform .15s; }
.tw-buy__cta:hover:not(:disabled) { box-shadow: 0 12px 28px -8px var(--brand-primary); transform: translateY(-1px); }
.tw-buy__cta:active { transform: none; }
.tw-buy__cta:disabled { opacity: .6; cursor: default; }
.tw-buy__secure { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 12px 0 0; font-size: .7rem; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   BOARDING — calendar range select + nights chip + rich room cards
   ══════════════════════════════════════════════════════════════ */
/* Range highlight — mirrors Next.js .in-range / .range-start / .range-end */
.wz-day--r-in { background: rgba(var(--brand-primary-rgb,26,58,127),.08); border-radius: 0; color: #1f2b4d; }
.wz-day--r-start, .wz-day--r-end, .wz-day--r-single { background: var(--brand-primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb,26,58,127),.3); }
.wz-day--r-start { border-radius: 10px 0 0 10px; }
.wz-day--r-end { border-radius: 0 10px 10px 0; }
.wz-day--r-start .wz-day__status, .wz-day--r-end .wz-day__status, .wz-day--r-single .wz-day__status, .wz-day--r-in .wz-day__status { display: none; }

.wz-nights { display: flex; align-items: center; gap: .55rem; margin-top: .75rem; padding: 11px 16px; border-radius: 10px; background: var(--tw-primary-tint); border: 1px solid var(--tw-primary-border); color: var(--brand-primary); }
.wz-nights__n { font-family: var(--tw-font-brand); font-weight: 800; font-size: .95rem; }
.wz-nights__r { font-size: .82rem; color: var(--tw-text-mute, #6b7280); font-weight: 500; }

.wz-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: .6rem; }
@media (max-width: 560px) { .wz-rooms { grid-template-columns: 1fr; } }
.wz-room { position: relative; display: flex; flex-direction: column; text-align: start; width: 100%; padding: 0; overflow: hidden; border-radius: 16px; border: 2px solid var(--tw-border, #e8ecf1); background: var(--tw-surface, #fff); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wz-room:hover { border-color: var(--tw-primary-border); box-shadow: var(--tw-shadow-md); transform: translateY(-2px); }
.wz-room.is-sel { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--tw-primary-tint); }
.wz-room__img { position: relative; height: 128px; background: var(--tw-surface-mute, #f1f4f8); display: grid; place-items: center; color: #9aa6b6; overflow: hidden; }
.wz-room__img img { width: 100%; height: 100%; object-fit: cover; }
.wz-room__b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.wz-room__name { font-family: var(--tw-font-brand); font-weight: 700; font-size: .95rem; color: var(--tw-text); }
.wz-room__meta { font-size: .78rem; color: var(--tw-text-mute, #6b7a8d); }
.wz-room__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.wz-room__tag { font-size: .68rem; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--tw-surface-mute, #f1f4f8); color: #64748b; }
.wz-room__tag--rate { background: var(--tw-primary-tint-strong); color: var(--brand-primary); }
.wz-room__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wz-room__price b { font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.1rem; color: var(--brand-primary); }
.wz-room__per { font-size: .76rem; color: var(--tw-text-mute, #6b7a8d); }
.wz-room__total { width: 100%; font-size: .76rem; color: var(--tw-text-mute, #6b7a8d); margin-top: 2px; }
.wz-room__check { position: absolute; top: 10px; inset-inline-end: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--brand-primary); box-shadow: 0 2px 6px rgba(0,0,0,.15); opacity: 0; transition: opacity .15s; }
.wz-room.is-sel .wz-room__check { opacity: 1; background: var(--brand-primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   DAYCARE — session cards (icon + price) + running total
   ══════════════════════════════════════════════════════════════ */
.wz-dc-sessions { display: grid; gap: 10px; margin-top: .5rem; }
.wz-dc-sess { display: flex; align-items: center; gap: 11px; width: 100%; text-align: start; padding: 11px 14px; border-radius: 14px; cursor: pointer; background: var(--tw-surface, #fff); border: 2px solid var(--tw-border, #e8ecf1); transition: border-color .15s, background .15s, transform .12s; }
.wz-dc-sess:hover:not(:disabled) { border-color: var(--tw-primary-border); transform: translateY(-1px); }
.wz-dc-sess.is-added { border-color: var(--brand-primary); background: var(--tw-primary-tint); cursor: default; }
.wz-dc-sess__i { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--tw-surface-mute, #f1f4f8); color: #8a94a6; }
.wz-dc-sess.is-added .wz-dc-sess__i { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); color: #fff; }
.wz-dc-sess__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wz-dc-sess__t b { font-family: var(--tw-font-brand); font-weight: 700; font-size: .9rem; color: var(--tw-text); }
.wz-dc-sess__t span { font-size: .78rem; color: var(--brand-primary); font-weight: 600; }
.wz-dc-sess__add { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; line-height: 1; background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-dc-sess.is-added .wz-dc-sess__add { background: var(--brand-primary); color: #fff; font-size: .8rem; }
.wz-dc-total { display: flex; align-items: center; justify-content: space-between; margin: .2rem 0 .3rem; padding: 11px 15px; border-radius: 12px; background: var(--tw-primary-tint); border: 1px solid var(--tw-primary-border); }
.wz-dc-total span { font-size: .82rem; font-weight: 600; color: var(--tw-text-mute, #5b6675); }
.wz-dc-total b { font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.05rem; color: var(--brand-primary); }
.wz-visit__p { flex-shrink: 0; font-family: var(--tw-font-brand); font-weight: 700; font-size: .85rem; color: var(--brand-primary); }

/* Boarding — per-pet room assignment header + disabled room */
.wz-room-pet { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .6rem; }
.wz-room-pet__i { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-room-pet b { font-family: var(--tw-font-brand); font-weight: 700; font-size: .92rem; color: var(--tw-text); }
.wz-room-pet__ok { margin-inline-start: auto; font-size: .78rem; font-weight: 600; color: #0f9d58; white-space: nowrap; }
.wz-room.is-disabled { opacity: .5; cursor: not-allowed; }
.wz-room.is-disabled:hover { transform: none; border-color: var(--tw-border, #e8ecf1); box-shadow: none; }

/* ══════════════════════════════════════════════════════════════
   PER-PET SCHEDULING — pet tabs, editable visit rows, copy-to-all
   ══════════════════════════════════════════════════════════════ */
.wz-petsel { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:.2rem 0 1rem; }
.wz-petsel__b { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:12px; border:2px solid var(--tw-border,#e8ecf1); background:var(--tw-surface,#fff); cursor:pointer; font:600 13px/1 var(--tw-font-brand); color:var(--tw-text-mute,#6b7a8d); transition:border-color .15s, background .15s; }
.wz-petsel__b:hover { border-color:var(--tw-primary-border); }
.wz-petsel__b.is-on { border-color:var(--brand-primary); background:var(--tw-primary-tint); color:var(--tw-text); }
.wz-petsel__i { width:22px; height:22px; border-radius:7px; flex:none; display:grid; place-items:center; background:#f1f4f8; color:#94a3b8; }
.wz-petsel__b.is-on .wz-petsel__i { background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary,var(--brand-primary))); color:#fff; }
.wz-petsel__b em { font-style:normal; font-size:11px; font-weight:600; color:#94a3b8; }
.wz-petsel__b.is-on em { color:var(--brand-primary); }

/* editable visit row */
.wz-visit--edit { gap:.6rem; flex-wrap:wrap; }
.wz-visit__day { font:600 .85rem var(--tw-font-brand); color:var(--tw-text); min-width:74px; }
.wz-visit__p { margin-inline-start:auto; font:700 .82rem var(--tw-font-brand); color:var(--brand-primary); white-space:nowrap; }
.wz-visit--edit .wz-petcard__rm { margin-inline-start:0; }
.wz-visit__sess { font:600 .78rem system-ui; color:var(--tw-text-mute,#6b7a8d); }

/* small AM/PM/Full segmented control */
.wz-seg2 { display:inline-flex; border:1px solid var(--tw-border,#e8ecf1); border-radius:9px; overflow:hidden; }
.wz-seg2 button { border:0; border-inline-end:1px solid var(--tw-border,#e8ecf1); background:#fff; padding:5px 10px; font:700 11px var(--tw-font-brand); color:var(--tw-text-mute,#6b7a8d); cursor:pointer; }
.wz-seg2 button:last-child { border-inline-end:0; }
.wz-seg2 button.is-on { background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary,var(--brand-primary))); color:#fff; }

/* editable time chip + slot popover */
.wz-visit__time { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border:1px solid var(--tw-primary-border); border-radius:9px; background:var(--tw-primary-tint); color:var(--brand-primary); font:700 11.5px var(--tw-font-brand); cursor:pointer; }
.wz-visit__time.is-open { background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); }
.wz-visit-slots { display:flex; flex-wrap:wrap; gap:6px; margin:-.2rem 0 .7rem 42px; }
.wz-visit-slots button { border:1px solid var(--tw-border,#e8ecf1); background:#fff; border-radius:8px; padding:5px 10px; font:600 11.5px system-ui; color:var(--tw-text); cursor:pointer; }
.wz-visit-slots button:hover { border-color:var(--brand-primary); }
.wz-visit-slots button.is-on { border-color:var(--brand-primary); background:var(--tw-primary-tint); color:var(--brand-primary); }

.wz-copyall { display:inline-flex; align-items:center; gap:7px; margin:0 0 1rem; padding:8px 13px; border-radius:10px; border:1px dashed var(--tw-primary-border); background:transparent; color:var(--brand-primary); font:600 12.5px var(--tw-font-brand); cursor:pointer; transition:background .15s; }
.wz-copyall:hover:not(:disabled) { background:var(--tw-primary-tint); }
.wz-copyall:disabled { opacity:.55; cursor:default; }


/* ══════════════════════════════════════════════════════════════
   TIME-SLOT GRID — Morning/Afternoon/Evening tabs + chip grid
   (parity with Next.js TimeSlotGrid). Click a chip → adds/sets directly.
   ══════════════════════════════════════════════════════════════ */
.wz-tsg__tabs { display:flex; gap:6px; background:#f6f7fb; border:1px solid #e9edf4; border-radius:13px; padding:4px; margin:9px 0 12px; }
.wz-tsg__tab { flex:1; appearance:none; border:0; background:transparent; cursor:pointer; border-radius:10px; padding:8px 6px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-family:var(--tw-font-brand); font-weight:700; font-size:12.5px; color:#64748b; transition:all .14s ease; }
.wz-tsg__tab small { font-family:var(--tw-font-body,inherit); font-weight:600; font-size:10px; color:#94a3b8; }
.wz-tsg__tab.is-on { background:#fff; color:var(--brand-primary); box-shadow:0 2px 8px rgba(var(--brand-primary-rgb,26,58,127),.14); }
.wz-tsg__tab.is-on small { color:rgba(var(--brand-primary-rgb,26,58,127),.7); }
.wz-tsg__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; max-height:196px; overflow-y:auto; padding:2px 2px 4px; }
@media (max-width:520px){ .wz-tsg__grid { grid-template-columns:repeat(3,1fr); } }
.wz-tsg__slot { appearance:none; border:1.5px solid #e9edf4; background:#fff; border-radius:11px; padding:10px 4px; cursor:pointer; font-family:var(--tw-font-brand); font-weight:700; font-size:12.5px; color:#1f2b4d; min-height:44px; text-align:center; font-variant-numeric:tabular-nums; transition:all .13s ease; }
.wz-tsg__slot:hover { border-color:var(--brand-primary); }
.wz-tsg__slot.is-on { border-color:var(--brand-primary); background:var(--brand-primary); color:#fff; box-shadow:0 4px 12px -4px rgba(var(--brand-primary-rgb,26,58,127),.55); }
.wz-tsg__empty { font-size:11.5px; color:#94a3b8; text-align:center; padding:18px 0; }
.wz-visit-edit { margin:-.2rem 0 .7rem 42px; }
@media (max-width:520px){ .wz-visit-edit { margin-left:0; } }

/* Calendar: dates that already have a visit for the active pet (multi-visit flows) */
.wz-day.has-visit:not(.is-sel) { background:rgba(var(--brand-primary-rgb,26,58,127),.14); box-shadow:inset 0 0 0 2px var(--brand-primary); color:var(--brand-primary); font-weight:800; }

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS — global success / warning / error pop-ups
   ══════════════════════════════════════════════════════════════ */
.wz-toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 410px); pointer-events: none; }
.wz-toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 15px; border-radius: 16px; background: #fff; box-shadow: 0 22px 50px -14px rgba(15,23,42,.42), 0 4px 12px rgba(15,23,42,.08); border: 1px solid #eef1f5; overflow: hidden; pointer-events: auto; font-family: var(--tw-font-brand); }
.wz-toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--toast-accent, #16a34a); }
.wz-toast__ic { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--toast-accent, #16a34a); box-shadow: 0 5px 14px -3px var(--toast-soft, rgba(22,163,74,.55)); }
.wz-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wz-toast__title { font-weight: 800; font-size: .82rem; color: var(--toast-ink, #15803d); line-height: 1.3; }
.wz-toast__msg { font-weight: 600; font-size: .88rem; color: #1f2b4d; line-height: 1.4; }
.wz-toast__x { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; color: #9ca5b4; display: grid; place-items: center; padding: 2px; margin: -2px -5px 0 0; }
.wz-toast__x:hover { color: #6b7a8d; }
.wz-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent, #16a34a); opacity: .5; transform-origin: left; animation: wzToastBar linear forwards; }
@keyframes wzToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.wz-toast--success { --toast-accent: #16a34a; --toast-soft: rgba(22,163,74,.5); --toast-ink: #15803d; }
.wz-toast--error   { --toast-accent: #ef4444; --toast-soft: rgba(239,68,68,.5);  --toast-ink: #b91c1c; }
.wz-toast--warning { --toast-accent: #f59e0b; --toast-soft: rgba(245,158,11,.5); --toast-ink: #b45309; }
.wz-toast-enter, .wz-toast-leave { transition: opacity .3s ease, transform .3s cubic-bezier(.2,.9,.2,1); }
.wz-toast-hidden { opacity: 0; transform: translateY(-16px) scale(.94); }
.wz-toast-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wz-toast__bar { animation: none; display: none; } }
@media (max-width: 520px) { .wz-toasts { top: 10px; } }

/* ══════════════════════════════════════════════════════════════
   OFFERS — summary picker button + applied chip + offers modal + landing
   ══════════════════════════════════════════════════════════════ */
.wz-offers-btn { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border-radius:12px; border:1.5px dashed var(--tw-primary-border); background:var(--tw-primary-tint); color:var(--brand-primary); font:700 .9rem var(--tw-font-brand); cursor:pointer; transition:background .15s; }
.wz-offers-btn:hover { background:var(--tw-primary-tint-strong); }
/* Free-text coupon input + apply button. */
.wz-coupon { display:flex; gap:.5rem; margin-bottom:.7rem; }
.wz-coupon__in { flex:1 1 auto; }
.wz-coupon__apply { flex:0 0 auto; padding:0 1.15rem; border:0; border-radius:12px; background:var(--brand-primary); color:#fff; font:700 .9rem var(--tw-font-brand); cursor:pointer; transition:filter .15s, opacity .15s; }
.wz-coupon__apply:hover { filter:brightness(1.06); }
.wz-coupon__apply:disabled { opacity:.6; cursor:default; }
.wz-offers-btn__i { font-size:1.05rem; }
.wz-offer-applied { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; border:1px solid #bbf7d0; background:#f0fdf4; }
.wz-offer-applied__tick { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; background:#0f9d58; color:#fff; }
.wz-offer-applied__m { flex:1; min-width:0; display:flex; flex-direction:column; }
.wz-offer-applied__m b { font-family:var(--tw-font-brand); font-size:.9rem; color:#15803d; }
.wz-offer-applied__m span { font-size:.78rem; color:#16a34a; font-weight:600; }
.wz-offer-applied__no { color:#b45309 !important; }
.wz-offer-applied__x { flex-shrink:0; border:0; background:transparent; color:#6b7a8d; cursor:pointer; font-size:1rem; padding:4px; }

/* Wallet-credit toggle-switch card (replaces the plain checkbox). The whole card is
   tappable; it turns green with the switch on when the credit is applied, and stays
   visible so the customer can toggle it off even when it fully covers the bill.
   NB: distinct class from the account-page `.wz-wallet` gradient balance card. */
.wz-wcredit { display:flex; align-items:center; gap:11px; width:100%; text-align:start; margin:.2rem 0 1rem; padding:12px 14px; border:1.5px solid var(--tw-border); border-radius:14px; background:var(--tw-surface); cursor:pointer; font-family:inherit; transition:border-color .18s ease, background .18s ease; }
.wz-wcredit:hover { border-color:var(--tw-primary-border); }
.wz-wcredit.is-on { border-color:#86efac; background:#f0fdf4; }
.wz-wcredit__ic { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--tw-primary-tint); color:var(--brand-primary); }
.wz-wcredit.is-on .wz-wcredit__ic { background:#dcfce7; color:#0f9d58; }
.wz-wcredit__m { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wz-wcredit__m b { font-family:var(--tw-font-brand); font-weight:700; font-size:.9rem; color:var(--tw-text); }
.wz-wcredit__m span { font-size:.76rem; color:var(--tw-text-muted); }
.wz-wcredit.is-on .wz-wcredit__m span { color:#16a34a; font-weight:600; }
.wz-wcredit__sw { flex:none; width:42px; height:24px; border-radius:999px; background:var(--tw-border); position:relative; transition:background .2s ease; }
.wz-wcredit.is-on .wz-wcredit__sw { background:#16a34a; }
.wz-wcredit__knob { position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; }
.wz-wcredit.is-on .wz-wcredit__knob { transform:translateX(18px); }
[dir="rtl"] .wz-wcredit.is-on .wz-wcredit__knob { transform:translateX(-18px); }
/* Non-interactive wallet states: frozen ("on hold") or blocked by a rule (min / coupon)
   — balance stays visible, greyed + dashed, no switch. */
.wz-wcredit--muted { cursor:default; border-style:dashed; background:color-mix(in srgb, var(--tw-border) 12%, var(--tw-surface)); }
.wz-wcredit--muted:hover { border-color:var(--tw-border); }
.wz-wcredit--muted .wz-wcredit__ic { background:rgba(100,116,139,.14); color:#64748b; }
.wz-wcredit--muted .wz-wcredit__m b { color:#475569; }
.wz-wcredit--muted .wz-wcredit__m span { color:#64748b; }

/* New-customer welcome banner + optional-field hint on the sign-in / register step. */
.wz-newacct { display:flex; align-items:flex-start; gap:10px; margin:0 0 1.1rem; padding:12px 14px; border-radius:12px; background:var(--tw-primary-tint); border:1px solid var(--tw-primary-border); }
.wz-newacct__ic { font-size:1.2rem; line-height:1.35; flex:none; }
.wz-newacct p { margin:0; font-size:.85rem; line-height:1.45; color:var(--tw-text); font-weight:500; }
.wz-hint { display:flex; align-items:flex-start; gap:5px; margin:.45rem 0 0; font-size:.78rem; line-height:1.4; color:var(--tw-text-muted); }

/* Provider site notifications (branding notification_messages) — top-right dismissible stack. */
.wz-sitenotif{ position:fixed; top:80px; inset-inline-end:16px; z-index:1500; display:flex; flex-direction:column; gap:12px; width:min(380px, calc(100vw - 32px)); pointer-events:none; }
.wz-sitenotif__card{ pointer-events:auto; display:flex; align-items:flex-start; gap:11px; border:1px solid; border-radius:13px; padding:12px 14px; box-shadow:0 10px 28px rgba(15,23,42,.16); background:#fff; }
.wz-sitenotif__card--info{ border-color:#bfdbfe; background:#eff6ff; }
.wz-sitenotif__card--success{ border-color:#bbf7d0; background:#f0fdf4; }
.wz-sitenotif__card--warning{ border-color:#fde68a; background:#fffbeb; }
.wz-sitenotif__card--error{ border-color:#fecaca; background:#fef2f2; }
.wz-sitenotif__ic{ flex:none; margin-top:1px; }
.wz-sitenotif__card--info .wz-sitenotif__ic{ color:#2563eb; }
.wz-sitenotif__card--success .wz-sitenotif__ic{ color:#16a34a; }
.wz-sitenotif__card--warning .wz-sitenotif__ic{ color:#c2760a; }
.wz-sitenotif__card--error .wz-sitenotif__ic{ color:#dc2626; }
.wz-sitenotif__b{ flex:1; min-width:0; }
.wz-sitenotif__b b{ display:block; font-family:var(--tw-font-brand); font-weight:700; font-size:.86rem; color:#1f2b4d; margin-bottom:2px; }
.wz-sitenotif__b p{ margin:0; font-size:.82rem; line-height:1.45; color:#3b475c; overflow-wrap:anywhere; }
.wz-sitenotif__x{ flex:none; border:0; background:transparent; color:#6b7a8d; cursor:pointer; padding:3px; border-radius:6px; margin:-2px -3px 0 0; }
.wz-sitenotif__x:hover{ background:rgba(0,0,0,.05); }
.wz-sn-enter{ transition:opacity .25s ease, transform .25s ease; }
.wz-sn-leave{ transition:opacity .2s ease, transform .2s ease; }
.wz-sn-hidden{ opacity:0; transform:translateX(14px); }
.wz-sn-shown{ opacity:1; transform:translateX(0); }
body:has(.wz-overlay) .wz-sitenotif, body:has(.tw-modal) .wz-sitenotif, body:has(.wz-peteditor) .wz-sitenotif{ display:none; }
@media (max-width:560px){ .wz-sitenotif{ top:70px; inset-inline:16px auto; width:calc(100vw - 32px); } }

.wz-offers-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--tw-border); }
.wz-offers-head b { font-family:var(--tw-font-brand); font-weight:800; font-size:1.1rem; color:var(--tw-text); }
.wz-offers-body { padding:16px 18px 20px; display:flex; flex-direction:column; gap:12px; max-height:64vh; overflow-y:auto; }
/* flex-shrink:0 — the body is a column flex container with a max-height, so without it every
   card squeezed to a sliver to fit instead of overflowing, and the list never scrolled. */
.wz-offer { display:block; flex-shrink:0; width:100%; text-align:start; padding:0; overflow:hidden; border-radius:16px; border:1px solid var(--tw-border); background:var(--tw-surface); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.wz-offer:hover:not(.is-locked) { border-color:var(--brand-primary); box-shadow:var(--tw-shadow-md); transform:translateY(-2px); }
.wz-offer.is-locked { opacity:.6; cursor:not-allowed; }
.wz-offer__banner { height:120px; display:grid; place-items:center; background:linear-gradient(135deg, var(--tw-primary-tint), var(--tw-primary-tint-strong)); background-size:cover; background-position:center; color:var(--brand-primary); font:800 1.6rem var(--tw-font-brand); text-transform:uppercase; letter-spacing:1px; }
.wz-offer__row { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.wz-offer__l { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wz-offer__l b { font-family:var(--tw-font-brand); font-weight:700; font-size:.95rem; color:var(--tw-text); }
.wz-offer__save { font-size:.8rem; font-weight:600; color:var(--brand-primary); }
.wz-offer__min { font-size:.78rem; color:var(--tw-text-mute,#6b7a8d); }
.wz-offer__badge { flex-shrink:0; font:800 .78rem var(--tw-font-brand); color:#fff; background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary,var(--brand-primary))); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.wz-offers-more { flex-shrink:0; width:100%; padding:11px 14px; border-radius:12px; border:1px dashed var(--tw-border); background:transparent; color:var(--tw-text-secondary,var(--tw-text)); font:700 .85rem var(--tw-font-brand); cursor:pointer; transition:border-color .15s, color .15s; }
.wz-offers-more:hover:not(:disabled) { border-color:var(--brand-primary); color:var(--brand-primary); }
.wz-offers-more:disabled { opacity:.55; cursor:default; }

/* Landing offers section */
/* The offers section is centre-aligned (title + sub), so its filter row follows. */
.lg-offer-filters { justify-content:center; }
.tw-offers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.tw-offer-card { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--tw-border); background:var(--tw-surface); box-shadow:var(--tw-shadow-card); cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; text-align:start; padding:0; width:100%; }
.tw-offer-card:hover:not(.is-claimed) { transform:translateY(-3px); box-shadow:var(--tw-shadow-hover); border-color:var(--brand-primary); }
.tw-offer-card__banner { position:relative; min-height:130px; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand-secondary,var(--brand-primary)), var(--brand-primary)); background-size:cover; background-position:center; color:#fff; font:800 1.7rem var(--tw-font-brand); text-transform:uppercase; letter-spacing:.5px; }
.tw-offer-card__pill { position:absolute; top:12px; inset-inline-start:12px; font:800 .7rem var(--tw-font-brand); color:var(--brand-primary); background:#fff; padding:4px 10px; border-radius:999px; }
.tw-offer-card__claimed { position:absolute; top:12px; inset-inline-end:12px; font:700 .72rem var(--tw-font-brand); color:#0f9d58; background:#fff; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.tw-offer-card__body { padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.tw-offer-card__code { display:inline-block; font-family:var(--tw-font-mono,monospace); font-weight:700; font-size:.92rem; color:var(--tw-text); background:var(--tw-surface-mute); border:1px dashed var(--tw-border); border-radius:8px; padding:4px 10px; align-self:flex-start; }
.tw-offer-card__note { font-size:.82rem; font-weight:600; color:var(--brand-primary); }
.tw-offer-card.is-claimed { border-color:#bbf7d0; }
.tw-offer-card.is-claimed .tw-offer-card__banner { background:linear-gradient(135deg,#d97706,#f59e0b); }
.tw-svc-offer { display:inline-flex; align-items:center; gap:4px; margin-top:6px; font:700 .72rem var(--tw-font-brand); color:#c2410c; background:#fff7ed; border:1px solid #fed7aa; border-radius:999px; padding:3px 9px; }

/* ══════════════════════════════════════════════════════════════
   FLOATING CHAT + COUPON FLOAT (bottom-right stack)
   ══════════════════════════════════════════════════════════════ */
.tw-chat { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tw-chat__btn { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent); transition: transform .18s ease, box-shadow .18s ease; }
.tw-chat__btn:hover { transform: translateY(-2px) scale(1.04); }
.tw-chat__btn.is-open { background: var(--tw-text); }
.tw-chat__badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font: 700 11px var(--tw-font-brand); display: grid; place-items: center; border: 2px solid #fff; }
.tw-chat__panel { width: min(90vw, 372px); height: min(72vh, 540px); background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 20px; box-shadow: 0 28px 60px -18px rgba(15,23,42,.4); display: flex; flex-direction: column; overflow: hidden; animation: twChatIn .24s cubic-bezier(.2,.85,.25,1); }
@keyframes twChatIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.tw-chat__hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-chat__hd-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.tw-chat__hd-t { flex: 1; min-width: 0; line-height: 1.25; }
.tw-chat__hd-t b { font-family: var(--tw-font-brand); font-size: .95rem; display: block; }
.tw-chat__hd-t span { font-size: .74rem; opacity: .9; }
.tw-chat__x { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: grid; place-items: center; }
.tw-chat__x:hover { background: rgba(255,255,255,.28); }
.tw-chat__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--tw-surface-dim, #f8fafc); }
.tw-msg { max-width: 78%; align-self: flex-start; }
.tw-msg.is-mine { align-self: flex-end; }
.tw-msg__b { padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--tw-surface); border: 1px solid var(--tw-border); color: var(--tw-text); font-size: .88rem; line-height: 1.4; word-wrap: break-word; }
.tw-msg.is-mine .tw-msg__b { border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); border-color: transparent; color: #fff; }
.tw-msg__t { display: block; font-size: .66rem; color: var(--tw-text-mute, #9ca5b4); margin-top: 3px; padding: 0 4px; }
.tw-msg.is-mine .tw-msg__t { text-align: end; }
.tw-chat__empty { margin: auto; text-align: center; color: var(--tw-text-mute, #9ca5b4); }
.tw-chat__empty-i { font-size: 2rem; display: block; margin-bottom: 6px; }
.tw-chat__gate { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 12px; color: var(--tw-text-secondary); }
.tw-chat__foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--tw-border); background: var(--tw-surface); }
.tw-chat__input { flex: 1; min-width: 0; border: 1px solid var(--tw-border); border-radius: 12px; padding: 10px 13px; font-size: .88rem; font-family: inherit; background: var(--tw-surface-mute); color: var(--tw-text); }
.tw-chat__input:focus { outline: none; border-color: var(--brand-primary); background: var(--tw-surface); }
.tw-chat__send { flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.tw-chat__send:disabled { opacity: .5; cursor: default; }

/* Coupon float — sits above the chat button */
/* Stacks above BOTH corner floats — chat (bottom 20) and the notification bell
   (bottom 88); 90px used to collide with the bell that was added later. */
.tw-cfloat { position: fixed; bottom: 156px; inset-inline-end: 20px; z-index: 1499; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.tw-cfloat__btn { position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 10px 26px -8px rgba(217,119,6,.6); transition: transform .16s ease; }
.tw-cfloat__btn:hover { transform: translateY(-2px) scale(1.05); }
.tw-cfloat__count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font: 700 10px var(--tw-font-brand); display: grid; place-items: center; border: 2px solid #fff; }
.tw-cfloat__card { width: min(88vw, 300px); background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 16px; box-shadow: 0 20px 46px -14px rgba(15,23,42,.34); padding: 14px; animation: twChatIn .2s ease; }
.tw-cfloat__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tw-cfloat__hd-t { font: 700 .82rem var(--tw-font-brand); color: #0f9d58; }
.tw-cfloat__x { border: 0; background: transparent; color: #9ca5b4; cursor: pointer; padding: 2px; display: grid; place-items: center; }
.tw-cfloat__row { display: flex; align-items: center; gap: 8px; }
.tw-cfloat__code { font-family: var(--tw-font-mono, monospace); font-weight: 700; font-size: .86rem; color: var(--tw-text); background: var(--tw-surface-mute); border: 1px dashed var(--tw-border); border-radius: 7px; padding: 3px 9px; }
.tw-cfloat__badge { margin-inline-start: auto; font: 800 .72rem var(--tw-font-brand); color: #fff; background: linear-gradient(135deg,#d97706,#f59e0b); padding: 4px 10px; border-radius: 999px; }
.tw-cfloat__note { font-size: .78rem; color: var(--tw-text-secondary); margin: 8px 0 12px; line-height: 1.4; }
.tw-cfloat__remove { width: 100%; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: 10px; padding: 9px; font: 700 .82rem var(--tw-font-brand); cursor: pointer; transition: background .15s; }
.tw-cfloat__remove:hover:not(:disabled) { background: #fee2e2; }
@media (max-width: 520px) { .tw-chat__btn { width: 52px; height: 52px; } .tw-cfloat { bottom: 82px; } }
.tw-chat__loading { display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.tw-chat__loading.flex, .tw-chat__body [wire\:loading].tw-chat__loading { display: flex; }
.tw-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--tw-border); border-top-color: var(--brand-primary); animation: twSpin .7s linear infinite; }
@keyframes twSpin { to { transform: rotate(360deg); } }
/* Chat typing indicator + send spinner */
.tw-typing .tw-msg__b { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.tw-typing .tw-msg__b span { width: 6px; height: 6px; border-radius: 50%; background: #9ca5b4; animation: twType 1.2s infinite ease-in-out; }
.tw-typing .tw-msg__b span:nth-child(2) { animation-delay: .18s; }
.tw-typing .tw-msg__b span:nth-child(3) { animation-delay: .36s; }
@keyframes twType { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tw-spin--sm { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
/* Chat button attention pulse when there are unread replies */
.tw-chat__btn.has-unread { animation: twChatPulse 1.8s ease-in-out infinite; }
@keyframes twChatPulse { 0%, 100% { box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand-primary) 45%, transparent); } 50% { box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent), 0 0 0 10px color-mix(in srgb, var(--brand-primary) 0%, transparent); } }

/* ── Account · My Packages (parity with Next.js TenantMyPackages) ───────── */
.tw-pkgs { display: flex; flex-direction: column; gap: .9rem; margin-top: .6rem; }
.tw-pkg { position: relative; background: #fff; border: 1px solid #eef1f6; border-radius: 20px; padding: 1.05rem 1.15rem 1.1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 16px 34px -26px rgba(11,18,32,.32); transition: box-shadow .18s ease; }
.tw-pkg::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--pkg-ac, var(--brand-primary)); }
.tw-pkg:hover { box-shadow: 0 1px 2px rgba(11,18,32,.05), 0 22px 40px -24px rgba(11,18,32,.4); }
.tw-pkg.is-dim { opacity: .78; }
.tw-pkg__hd { display: flex; align-items: flex-start; gap: .7rem; }
.tw-pkg__ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.tw-pkg__ti { min-width: 0; flex: 1; }
.tw-pkg__ti b { display: block; font-weight: 800; font-size: 1rem; color: #1f2b4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-pkg__ti span { display: block; font-size: .74rem; color: #9ca5b4; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-pkg__badge { flex-shrink: 0; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tw-pkg__prog { margin-top: .95rem; }
.tw-pkg__prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: #7a8699; margin-bottom: .4rem; }
.tw-pkg__prog-top b { font-weight: 800; }
.tw-pkg__bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.tw-pkg__bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.tw-pkg__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.tw-pkg__chip { font-size: .72rem; color: #55617a; background: #f6f8fb; border: 1px solid #eef1f6; border-radius: 999px; padding: .3rem .6rem; }
.tw-pkg__acts { display: flex; gap: .5rem; margin-top: .95rem; flex-wrap: wrap; }
.tw-pkg__pay { flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--brand-primary); color: #fff; border: none; border-radius: 12px; padding: .7rem 1rem; font-weight: 700; font-size: .86rem; cursor: pointer; transition: filter .15s ease; }
.tw-pkg__pay:hover { filter: brightness(.94); }
.tw-pkg__pay:disabled { opacity: .6; cursor: default; }
.tw-pkg__cancel { background: #fff; color: #b91c1c; border: 1px solid #fecaca; border-radius: 12px; padding: .7rem 1rem; font-weight: 700; font-size: .86rem; cursor: pointer; transition: background .15s ease; }
.tw-pkg__cancel:hover { background: #fef2f2; }
.tw-pkg__book { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-primary); color: #fff; border-radius: 12px; padding: .68rem 1.2rem; font-weight: 700; font-size: .86rem; text-decoration: none; }
.tw-pkg__book:hover { filter: brightness(.95); }
.tw-pkg-empty { text-align: center; border: 1px dashed #d8dee9; border-radius: 20px; padding: 2.4rem 1.5rem; background: linear-gradient(180deg, #fff, #fafbfd); margin-top: .6rem; }
.tw-pkg-empty__i { font-size: 2rem; display: block; margin-bottom: .5rem; }
.tw-pkg-empty b { display: block; font-weight: 800; color: #1f2b4d; margin-bottom: .25rem; }
.tw-pkg-empty p { margin: 0; color: #9ca5b4; font-size: .86rem; }

/* ── Booking · Vaccination records + Add-vaccines modal (Next.js parity) ── */
.wz-vax { border: 1px solid #eef1f6; border-radius: 14px; padding: .8rem .9rem; background: #fbfcfe; }
.wz-vax__title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; color: #55617a; margin-bottom: .55rem; }
.wz-vax__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wz-vax__chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; padding: .3rem .55rem; border-radius: 999px; border: 1px solid; }
.wz-vax__chip.is-ok { color: #15803d; background: #ecfdf5; border-color: #a7f3d0; }
.wz-vax__chip.is-miss { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.wz-vax__chip b { font-weight: 700; font-size: .68rem; color: #ef4444; }
.wz-vax__warn { display: flex; align-items: flex-start; gap: .6rem; margin-top: .7rem; padding: .7rem .8rem; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.wz-vax__warn-b { flex: 1; min-width: 0; }
.wz-vax__warn-b b { display: block; font-size: .84rem; }
.wz-vax__warn-b p { margin: .15rem 0 0; font-size: .78rem; color: #9f4444; }
.wz-vax__add { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-primary); color: #fff; border: none; border-radius: 10px; padding: .5rem .8rem; font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.wz-vax__add:hover { filter: brightness(.95); }
.wz-vaxmodal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wz-vaxmodal__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.wz-vaxmodal__panel { position: relative; width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11,18,32,.5); }
.wz-vaxmodal__hd { display: flex; align-items: center; gap: .7rem; padding: 1.05rem 1.2rem; border-bottom: 1px solid #eef1f6; }
.wz-vaxmodal__ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-vaxmodal__t { flex: 1; min-width: 0; }
.wz-vaxmodal__t b { display: block; font-weight: 800; color: #1f2b4d; }
.wz-vaxmodal__t span { display: block; font-size: .78rem; color: #9ca5b4; }
.wz-vaxmodal__x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: none; background: #f1f5f9; color: #55617a; cursor: pointer; display: grid; place-items: center; }
.wz-vaxmodal__x:hover { background: #e2e8f0; }
.wz-vaxmodal__body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.wz-vaxcard { border: 1px solid #eef1f6; border-radius: 14px; padding: .85rem .9rem; background: #fbfcfe; }
.wz-vaxcard__name { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .9rem; color: #1f2b4d; margin-bottom: .6rem; }
.wz-vaxcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wz-vaxcard__file { padding: .45rem; font-size: .8rem; }
.wz-vaxmodal__foot { display: flex; gap: .6rem; justify-content: flex-end; padding: 1rem 1.2rem; border-top: 1px solid #eef1f6; }
.wz-req { color:#ef4444; font-weight:800; background:none; border:0; padding:0; font-size:inherit; border-radius:0; }
/* Designed file upload (replaces native "Choose File") */
.wz-upload { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1.5px dashed var(--tw-border, #d8dee9); border-radius: 12px; background: #fbfcfe; cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease; }
.wz-upload:hover { border-color: var(--brand-primary); background: var(--tw-primary-tint, #f5f3ff); }
.wz-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wz-upload__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--tw-primary-tint, #eef2ff); color: var(--brand-primary); }
.wz-upload__txt { flex: 1; min-width: 0; font-size: .84rem; font-weight: 600; color: #6b7a8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-upload__txt.has-file { color: #1f2b4d; }
.wz-upload__badge { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--brand-primary); }
/* Booking step transition loader */
.wz-modal { position: relative; }
.wz-modal__loading { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: color-mix(in srgb, var(--tw-surface, #fff) 82%, transparent); backdrop-filter: blur(3px); color: var(--brand-primary); font-weight: 600; font-size: .9rem; }
.wz-modal__loading .wz-spin { width: 38px; height: 38px; border-width: 3px; }

/* ── Customer notification bell (booking-status updates) ─────────────────── */
.tw-notif { position: fixed; bottom: 88px; inset-inline-end: 20px; z-index: 1490; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tw-notif__btn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--tw-border, #e8ecf1); background: #fff; color: var(--brand-primary); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(11,18,32,.28); transition: transform .15s ease; }
.tw-notif__btn:hover { transform: translateY(-2px); }
.tw-notif__btn.has-unread { animation: twChatPulse 1.8s ease-in-out infinite; }
.tw-notif__badge { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--tw-danger, #ef4444); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.tw-notif__panel { width: min(340px, calc(100vw - 40px)); max-height: 60vh; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tw-border, #e8ecf1); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -16px rgba(11,18,32,.4); }
.tw-notif__hd { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: var(--brand-primary); color: #fff; }
.tw-notif__hd b { font-weight: 800; }
.tw-notif__x { border: 0; background: rgba(255,255,255,.2); color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.tw-notif__x:hover { background: rgba(255,255,255,.32); }
.tw-notif__body { flex: 1; overflow-y: auto; padding: .5rem; }
.tw-notif__item { width: 100%; text-align: start; background: none; border: 0; cursor: pointer; font: inherit; display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .65rem; border-radius: 12px; transition: background .15s ease; }
.tw-notif__item:hover { background: #f6f8fb; }
.tw-notif__dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: .5rem; background: #16a34a; }
.tw-notif__item.is-cancelled .tw-notif__dot, .tw-notif__item.is-no_show .tw-notif__dot { background: #ef4444; }
.tw-notif__item.is-in_progress .tw-notif__dot, .tw-notif__item.is-action_needed .tw-notif__dot { background: #d97706; }
.tw-notif__item.is-pending_center_confirmation .tw-notif__dot { background: #9ca5b4; }
.tw-notif__item.is-unread { background: var(--tw-primary-tint); }
.tw-notif__item.is-unread:hover { background: var(--tw-primary-tint-strong); }
.tw-notif__item.is-unread .tw-notif__dot { box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb, 26, 58, 127), 0.16); }
.tw-notif__item.is-unread .tw-notif__row b { font-weight: 800; }
.tw-notif__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.tw-notif__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tw-notif__row b { font-weight: 700; font-size: .86rem; color: #1f2b4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-notif__t { flex-shrink: 0; font-size: .72rem; color: #9ca5b4; }
.tw-notif__msg { font-size: .8rem; color: #55617a; line-height: 1.35; }
.tw-notif__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.tw-notif__chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; color: #55617a; background: #f1f4f9; border-radius: 999px; padding: .13rem .5rem; white-space: nowrap; }
.tw-notif__chip--ref { color: #9ca5b4; background: transparent; padding-inline: .15rem; }
.tw-notif__go { flex-shrink: 0; align-self: center; color: #c4ccd8; }
.tw-notif__item:hover .tw-notif__go { color: var(--brand-primary); }
.tw-notif__empty { text-align: center; padding: 2rem 1rem; color: #9ca5b4; }
.tw-notif__empty-i { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
.tw-notif__empty p { margin: 0; font-size: .84rem; }

/* ── Booking detail · payment breakdown ─────────────────────────────────── */
.tw-detail__pay { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.tw-detail__pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: .86rem; color: #55617a; }
.tw-detail__pay-row .disc { color: #16a34a; }
.tw-detail__pay-row--total { margin-top: .35rem; padding-top: .55rem; border-top: 1px dashed var(--tw-border, #e8ecf1); font-weight: 800; color: #1f2b4d; font-size: .95rem; }
.tw-detail__pay-row--paid { color: #15803d; font-weight: 600; }
.tw-detail__pay-row--due { color: #b45309; font-weight: 700; }

/* ── Booking summary · cancellation policy (display-only) ────────────────── */
.wz-cancel { margin-top: 1rem; border: 1px solid var(--tw-border, #e8ecf1); border-radius: 14px; padding: .9rem 1rem; background: #fbfcfe; }
.wz-cancel__hd { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .86rem; color: #1f2b4d; margin-bottom: .5rem; }
.wz-cancel__hd svg { color: var(--brand-primary); flex-shrink: 0; }
.wz-cancel__gist { margin: 0; font-size: .86rem; font-weight: 600; color: #334155; line-height: 1.5; }
.wz-cancel__fee { margin: .4rem 0 0; font-size: .78rem; color: #6b7a8d; }
.wz-cancel__toggle { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; border: 0; background: none; padding: 0; color: var(--brand-primary); font-weight: 700; font-size: .8rem; cursor: pointer; }
.wz-cancel__ladder { margin-top: .7rem; display: flex; flex-direction: column; gap: .5rem; padding-top: .6rem; border-top: 1px dashed var(--tw-border, #e8ecf1); }
.wz-cancel__band { display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: .82rem; }
.wz-cancel__win { display: inline-flex; align-items: center; gap: .45rem; color: #55617a; }
.wz-cancel__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wz-cancel__out { font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .wz-vaxcard__grid { grid-template-columns: 1fr; }
  .wz-vax__warn { flex-wrap: wrap; }
  .wz-vax__warn-b { flex: 1 1 100%; }
  .wz-vax__add { width: 100%; justify-content: center; margin-top: .2rem; }
  .wz-paycard { position: static; }
}

/* ── Booking · Summary price card ───────────────────────────────────────── */
.wz-paycard { position: sticky; top: 0; background: #fff; border: 1px solid var(--tw-border, #e8ecf1); border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: var(--tw-shadow-md, 0 8px 32px rgba(0,0,0,.06)); }
.wz-paycard__lines { display: flex; flex-direction: column; gap: .5rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--tw-border, #e8ecf1); }
.wz-paycard__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .85rem; gap: .6rem; }
.wz-paycard__total > span:first-child { font-weight: 700; color: var(--tw-text, #1f2b4d); font-size: 1rem; }
.wz-paycard__amt { font-weight: 800; font-size: 1.5rem; color: var(--brand-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-paycard__covered { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; padding: .6rem .75rem; border-radius: 11px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #15803d; font-weight: 700; font-size: .82rem; }
.wz-paycard__agree { margin-top: .9rem; }

/* ── Unified confirmation modal ─────────────────────────────────────────── */
[x-cloak] { display: none !important; }
/* Branded "session expired" dialog (replaces Livewire's native page-expired confirm). */
.wz-expired { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1.5rem; background: rgba(15,23,42,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: wzExpiredIn 0.2s ease; }
.wz-expired[hidden] { display: none; }
.wz-expired__card { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 2rem 1.75rem 1.75rem; text-align: center; box-shadow: 0 24px 64px -12px rgba(15,23,42,0.45); }
.wz-expired__ic { width: 60px; height: 60px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; color: var(--brand-primary); background: var(--tw-primary-tint); }
.wz-expired__title { margin: 0 0 0.5rem; font-family: var(--tw-font-brand); font-size: 1.25rem; font-weight: 800; color: var(--tw-text); }
.wz-expired__msg { margin: 0 0 1.5rem; font-size: 0.92rem; color: var(--tw-text-secondary); line-height: 1.55; }
.wz-expired__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border: 0; border-radius: 12px; padding: 0.85rem; font-family: var(--tw-font-brand); font-weight: 700; font-size: 0.95rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--brand-secondary, var(--brand-primary)), var(--brand-primary)); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 32%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wz-expired__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 38%, transparent); }
@keyframes wzExpiredIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wz-expired { animation: none; } }
.wz-confirm { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wz-confirm__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.wz-confirm__box { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 1.6rem 1.5rem 1.3rem; text-align: center; box-shadow: 0 30px 60px -20px rgba(11,18,32,.5); }
.wz-confirm__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .9rem; background: var(--tw-primary-tint, #eef2ff); color: var(--brand-primary); }
.wz-confirm__ico.is-danger { background: #fef2f2; color: #ef4444; }
.wz-confirm__msg { margin: 0 0 1.3rem; font-size: .95rem; font-weight: 600; color: #1f2b4d; line-height: 1.5; }
.wz-confirm__acts { display: flex; gap: .6rem; }
.wz-confirm__cancel, .wz-confirm__ok { flex: 1; padding: .7rem 1rem; border-radius: 12px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.wz-confirm__cancel { background: #f1f5f9; color: #55617a; border: 1px solid #e2e8f0; }
.wz-confirm__cancel:hover { background: #e2e8f0; }
.wz-confirm__ok { background: var(--brand-primary); color: #fff; border: none; }
.wz-confirm__ok.is-danger { background: #ef4444; }
.wz-confirm__ok:hover { filter: brightness(.95); }

/* ── Chat float · Chat / WhatsApp tabs ──────────────────────────────────── */
.tw-chat__tabs { display: flex; gap: .3rem; padding: .5rem .6rem 0; background: var(--brand-primary); }
.tw-chat__tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem; border: none; border-radius: 11px 11px 0 0; background: transparent; color: rgba(255,255,255,.78); font-weight: 700; font-size: .82rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tw-chat__tab.is-active { background: #fff; color: var(--brand-primary); }
.tw-chat__wa { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1rem; background: #f6f8fb; }
.tw-chat__wa-center { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.tw-chat__wa-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: #fff; font-weight: 800; }
.tw-chat__wa-center b { color: #1f2b4d; font-weight: 800; }
.tw-chat__wa-card { margin: auto; text-align: center; background: #fff; border-radius: 16px; padding: 1.6rem 1.3rem; box-shadow: 0 10px 30px -12px rgba(11,18,32,.25); max-width: 300px; }
.tw-chat__wa-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #25D366; color: #fff; margin-bottom: .8rem; }
.tw-chat__wa-card b { display: block; color: #1f2b4d; font-weight: 800; font-size: 1.05rem; margin-bottom: .3rem; }
.tw-chat__wa-card p { margin: 0 0 1.1rem; color: #6b7a8d; font-size: .84rem; line-height: 1.5; }
.tw-chat__wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .8rem 1rem; border-radius: 12px; background: #25D366; color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; }
.tw-chat__wa-btn:hover { background: #1ebe5b; }

/* ==========================================================================
   LAGOON theme — Montserrat type + design tokens (Figma "Yalla" template).
   Appended so these win the cascade over the ported default :root above.
   Landing-section rules (.lg-*) are added per build task.
   ========================================================================== */
:root {
  --tw-font-brand: 'Montserrat', system-ui, sans-serif;
  --tw-font-body: 'Montserrat', system-ui, sans-serif;
  /* Lagoon accents are brand-driven — derived from the tenant's branding, not the
     Figma's fixed lime/teal. Primary = the brand colour; the "accent" role reuses it. */
  --lg-accent: var(--brand-primary);
  --lg-accent-rgb: var(--brand-primary-rgb);
  --lg-text: #292d32;
  --lg-grey: #4f4f4f;
  --lg-border: #c6d0e5;
  --lg-star: #ffb400;
  --lg-shadow: 0 0 20px #1a3a7f0f;
}
html[dir="rtl"] body, html[lang="ar"] body { font-family: 'Tajawal', 'Montserrat', system-ui, sans-serif; }

/* ==========================================================================
   LAGOON — navbar + footer (Task 2). Figma "White-Label" header/footer.
   ========================================================================== */
.tw-accent-line { display: none; }             /* Lagoon nav sits flush at the top */
main { padding-top: var(--tw-nav-h); }

/* ---- Navbar ---- */
.lg-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--tw-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px clamp(1rem, 8vw, 120px); background: #fff; box-shadow: 0 6px 1.5px rgba(0,0,0,0.06); }
.lg-nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.lg-nav__logo { height: 46px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.lg-nav__badge { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font: 800 1.15rem var(--tw-font-brand); }
.lg-nav__brandname { font: 800 1.05rem var(--tw-font-brand); color: var(--lg-text); white-space: nowrap; }

.lg-nav__menu { display: contents; }
.lg-nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 36px); background: #f4f6fa; border-radius: 59px; padding: 10px 22px; }
.lg-nav__links a { font: 500 clamp(15px, 1.1vw, 18px) var(--tw-font-body); color: var(--lg-grey); text-decoration: none; white-space: nowrap; padding: 5px 2px; border-radius: 26px; transition: color .18s ease, background .18s ease; }
.lg-nav__links a:hover { color: var(--brand-primary); }
.lg-nav__links a.is-active { background: var(--brand-primary); color: #fff; padding: 5px 14px; }

.lg-nav__actions { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; }
.lg-lang { display: inline-flex; align-items: center; gap: 0.1rem; background: #f4f6fa; border-radius: 999px; padding: 0.2rem; }
.lg-lang a { font-size: 0.82rem; font-weight: 600; color: var(--lg-grey); padding: 0.3rem 0.55rem; border-radius: 999px; text-decoration: none; transition: all .15s ease; }
.lg-lang a[aria-current="page"] { background: var(--brand-primary); color: #fff; }

.lg-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--brand-primary); color: #fff; font: 700 16px var(--tw-font-brand); padding: 11px 20px; border-radius: 42px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.lg-btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }

.lg-wallet-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(var(--lg-accent-rgb), 0.12); color: var(--lg-accent); font-weight: 700; font-size: 0.85rem; padding: 0.45rem 0.7rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }

.lg-acct { position: relative; }
.lg-acct__btn { display: inline-flex; align-items: center; gap: 0.45rem; background: #f4f6fa; border: 0; border-radius: 999px; padding: 0.35rem 0.85rem 0.35rem 0.35rem; cursor: pointer; font: 600 0.95rem var(--tw-font-body); color: var(--lg-text); }
.lg-acct__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font: 700 0.9rem var(--tw-font-brand); flex-shrink: 0; }
.lg-acct__name { white-space: nowrap; }
.lg-acct__chev { transition: transform 0.2s ease; }
.lg-acct__chev.is-open { transform: rotate(180deg); }
.lg-acct__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 210px; background: #fff; border: 1px solid var(--lg-border); border-radius: 14px; box-shadow: var(--lg-shadow), 0 12px 30px rgba(31,43,77,0.1); padding: 0.4rem; z-index: 70; display: flex; flex-direction: column; gap: 1px; }
.lg-acct__menu a, .lg-acct__out button { display: block; width: 100%; text-align: start; padding: 0.55rem 0.7rem; border-radius: 10px; font: 600 0.88rem var(--tw-font-body); color: var(--lg-text); background: none; border: 0; cursor: pointer; text-decoration: none; }
.lg-acct__menu a:hover, .lg-acct__out button:hover { background: #f4f6fa; color: var(--brand-primary); }
.lg-acct__out { margin-top: 0.3rem; padding-top: 0.35rem; border-top: 1px solid var(--lg-border); }

.lg-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: #f4f6fa; border: 0; border-radius: 12px; color: var(--lg-text); cursor: pointer; flex: none; }
.lg-nav-scrim { display: none; }

/* Mobile navbar matches the Figma phone screen: just logo + a compact right cluster
   (branch + lang + Login/account). No hamburger, no nav pill — the landing is
   single-page so navigation is by scroll. The wallet chip drops out on phones; the
   branch switcher does NOT — the Figma's tenant is single-branch, but a multi-branch
   tenant would otherwise have no way to change branch on a phone at all. */
@media (max-width: 820px) {
  .lg-nav { padding: 8px 1rem; height: 62px; }
  .lg-burger, .lg-nav-scrim, .lg-nav__links { display: none; }
  .lg-nav__menu { display: contents; }
  .lg-nav__logo { height: 36px; }
  .lg-nav__brandname { font-size: 0.95rem; }
  .lg-nav__actions { gap: 0.4rem; }
  .lg-wallet-chip, .lg-acct__name { display: none; }
  .lg-lang { padding: 0.15rem; }
  .lg-lang a { padding: 0.26rem 0.45rem; font-size: 0.76rem; }
  .lg-btn-primary { padding: 9px 15px; font-size: 14px; }
  .lg-acct__btn { padding: 0.3rem; gap: 0; }
}

/* ---- Footer ---- */
.lg-footer { background: var(--brand-primary); color: #fff; }
.lg-footer__inner { max-width: 1240px; margin: 0 auto; padding: 46px clamp(1.2rem, 8vw, 120px) 30px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; align-items: start; }
.lg-footer__brand { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.lg-footer__logo { height: 84px; width: auto; max-width: 200px; object-fit: contain; filter: brightness(0) invert(1); }
.lg-footer__badge { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,0.16); display: grid; place-items: center; font: 800 1.6rem var(--tw-font-brand); color: #fff; }
.lg-footer__social { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.lg-footer__social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.14); transition: background .15s ease; }
.lg-footer__social a:hover { background: rgba(255,255,255,0.28); }
.lg-footer__social svg { width: 15px; height: 15px; }
.lg-footer__nav h4, .lg-footer__contact h4 { font: 700 18px var(--tw-font-brand); margin: 0 0 1.1rem; color: #fff; }
.lg-footer__navgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.lg-footer__navgrid a { color: rgba(255,255,255,0.92); text-decoration: none; font: 300 16px var(--tw-font-body); }
.lg-footer__navgrid a:hover { color: #fff; text-decoration: underline; }
.lg-footer__contact { display: flex; flex-direction: column; }
.lg-footer__pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; text-decoration: none; max-width: 100%; }
.lg-footer__picon { width: 35px; height: 35px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--brand-primary); display: grid; place-items: center; flex-shrink: 0; }
.lg-footer__picon svg { width: 15px; height: 15px; }
.lg-footer__pilltext { background: rgba(255,255,255,0.92); color: var(--brand-primary); border-radius: 26px; padding: 8px 14px; font: 400 16px var(--tw-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-footer__bottom { background: color-mix(in srgb, var(--brand-primary) 72%, #000); color: #fff; text-align: center; padding: 7px 1rem; font: 600 13px var(--tw-font-body); }
.lg-footer__bottom a { color: #fff; text-decoration: underline; font-weight: 700; }

@media (max-width: 860px) {
  .lg-footer__inner { grid-template-columns: 1fr; gap: 2rem; padding: 34px 1.4rem 26px; }
}

/* ==========================================================================
   LAGOON — landing sections (hero, stats, services accordion, about, reviews).
   Brand-driven; fixed neutrals/star per Lagoon tokens.
   ========================================================================== */
.lg-landing { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.1rem, 6vw, 90px); }

/* ---- Hero ---- */
.lg-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.6rem) 0 1.5rem; }
.lg-hero__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lg-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(var(--brand-primary-rgb), 0.10); color: var(--brand-primary); font: 600 13px var(--tw-font-body); padding: 0.4rem 0.8rem; border-radius: 999px; }
.lg-badge .i { font-weight: 800; }
.lg-badge--star { background: rgba(255, 180, 0, 0.15); color: #d99400; }
.lg-badge--open { background: rgba(22, 163, 74, 0.13); color: #16a34a; }
.lg-badge--closed { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.lg-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lg-hero__title { font: 800 clamp(2.1rem, 5vw, 3.4rem) var(--tw-font-brand); color: var(--lg-text); line-height: 1.06; margin: 0 0 1rem; }
.lg-hero__desc { font: 400 1.05rem var(--tw-font-body); color: var(--lg-grey); line-height: 1.65; margin: 0 0 1.6rem; max-width: 48ch; }
.lg-hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.lg-btn-lg { padding: 14px 28px; font-size: 17px; }
.lg-btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1.5px solid var(--lg-border); color: var(--lg-text); font: 600 16px var(--tw-font-brand); padding: 12px 22px; border-radius: 42px; text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.lg-btn-ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.lg-hero__media { position: relative; aspect-ratio: 1 / 0.8; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 54px -22px rgba(31,43,77,0.34); background: #f4f6fa; }
.lg-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s ease; }
.lg-hero__slide.is-active { opacity: 1; }
.lg-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 0; color: var(--lg-text); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.lg-hero__arrow--prev { inset-inline-start: 12px; } .lg-hero__arrow--next { inset-inline-end: 12px; }

/* ---- Stats strip ---- */
.lg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.4rem; padding: 1.4rem clamp(1rem, 3vw, 1.8rem); margin: 0.5rem 0 1rem; background: #fff; border: 1px solid var(--lg-border); border-radius: 20px; box-shadow: var(--lg-shadow); }
.lg-stat { display: flex; align-items: center; gap: 0.85rem; }
.lg-stat__ic { width: 50px; height: 50px; border-radius: 15px; background: rgba(var(--brand-primary-rgb), 0.10); color: var(--brand-primary); display: grid; place-items: center; flex-shrink: 0; }
.lg-stat b { display: block; font: 800 1.35rem var(--tw-font-brand); color: var(--lg-text); line-height: 1.1; }
.lg-stat span { font: 500 0.88rem var(--tw-font-body); color: var(--lg-grey); }

/* ---- Section shell ---- */
.lg-sec { padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
.lg-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.lg-sec__title { font: 800 clamp(1.5rem, 3vw, 2rem) var(--tw-font-brand); color: var(--lg-text); margin: 0; }
.lg-sec__sub { font: 400 0.95rem var(--tw-font-body); color: var(--lg-grey); margin: 0.35rem 0 0; }
.lg-sec__more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-primary); font: 600 0.95rem var(--tw-font-brand); text-decoration: none; white-space: nowrap; }
.lg-sec__more:hover { text-decoration: underline; }

/* ---- Services filters ---- */
.lg-svc-filters { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.4rem; align-items: center; }
.lg-search { flex: 1 1 260px; display: flex; align-items: center; gap: 0.5rem; background: #f4f6fa; border: 1px solid var(--lg-border); border-radius: 14px; padding: 0.7rem 1rem; color: var(--lg-grey); }
.lg-search input { border: 0; background: transparent; outline: none; flex: 1; font: 400 0.95rem var(--tw-font-body); color: var(--lg-text); min-width: 0; }
.lg-clear { display: inline-flex; align-items: center; gap: 0.35rem; background: #fff; border: 1px solid var(--lg-border); border-radius: 12px; padding: 0.6rem 0.9rem; cursor: pointer; font: 600 0.88rem var(--tw-font-body); color: var(--lg-grey); }
.lg-is-busy, .lg-is-loading { opacity: 0.55; transition: opacity 0.2s ease; }

/* ---- Accordion ---- */
.lg-acc { display: flex; flex-direction: column; gap: 1rem; }
.lg-acc__item { background: #fff; border: 1px solid var(--lg-border); border-radius: 18px; overflow: hidden; box-shadow: var(--lg-shadow); }
.lg-acc__head { width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.4rem; background: none; border: 0; cursor: pointer; font: inherit; text-align: start; }
.lg-acc__ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--brand-primary-rgb), 0.10); color: var(--brand-primary); display: grid; place-items: center; flex-shrink: 0; }
.lg-acc__name { font: 700 1.05rem var(--tw-font-brand); color: var(--lg-text); flex: 1; }
.lg-acc__count { background: #f4f6fa; color: var(--lg-grey); font: 600 0.8rem var(--tw-font-body); padding: 0.2rem 0.6rem; border-radius: 999px; }
.lg-acc__chev { color: var(--lg-grey); transition: transform 0.25s ease; flex-shrink: 0; }
.lg-acc__chev.is-open { transform: rotate(180deg); }
.lg-acc__panel { padding: 0 1.4rem 1.4rem; }
.lg-acc-enter { transition: opacity 0.25s ease, transform 0.25s ease; }
.lg-acc-hidden { opacity: 0; transform: translateY(-6px); }
.lg-acc-shown { opacity: 1; transform: none; }

/* ---- Service cards ---- */
.lg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 1.1rem; }
.lg-card { border: 1px solid var(--lg-border); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.lg-card:hover { box-shadow: 0 16px 32px -16px rgba(31,43,77,0.28); transform: translateY(-2px); }
.lg-card__img { position: relative; aspect-ratio: 16 / 10; background: #f4f6fa; overflow: hidden; }
.lg-card__img-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-card__img.is-ph { display: grid; place-items: center; color: #fff; font: 800 1.6rem var(--tw-font-brand); background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))); }
.lg-card__off { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--brand-primary); color: #fff; font: 700 0.72rem var(--tw-font-body); padding: 0.25rem 0.5rem; border-radius: 8px; }
.lg-fav { position: absolute; top: 8px; inset-inline-end: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 0; padding: 0; color: #8a94a6; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(16,24,40,0.16); transition: transform .18s cubic-bezier(.22,1,.36,1), color .18s ease, background .18s ease, box-shadow .18s ease; }
.lg-fav svg { width: 17px; height: 17px; display: block; transition: transform .18s cubic-bezier(.22,1,.36,1), fill .15s ease; }
.lg-fav:hover { color: #ef4444; background: #fff; box-shadow: 0 4px 12px rgba(16,24,40,0.20); }
.lg-fav:active svg { transform: scale(0.88); }
.lg-fav.is-on { color: #ef4444; }
.lg-fav.is-on svg { fill: currentColor; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .lg-fav, .lg-fav svg { transition: color .15s ease, fill .15s ease; } .lg-fav:active svg, .lg-fav.is-on svg { transform: none; } }
.lg-card__body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.lg-card__name { font: 700 1rem var(--tw-font-brand); color: var(--lg-text); line-height: 1.25; }
.lg-card__sub { font: 400 0.82rem var(--tw-font-body); color: var(--lg-grey); }
.lg-card__offer, .lg-card__owned { font: 600 0.78rem var(--tw-font-body); color: var(--brand-primary); }
.lg-card__foot { margin-top: auto; padding-top: 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lg-price { font: 400 0.85rem var(--tw-font-body); color: var(--lg-grey); }
.lg-price b { font: 800 1.15rem var(--tw-font-brand); color: var(--lg-text); }
.lg-price del { color: #b0b8c4; margin-inline-end: 0.3rem; }
.lg-book { background: var(--brand-primary); color: #fff; border: 0; border-radius: 999px; font: 700 0.85rem var(--tw-font-brand); padding: 0.55rem 1.05rem; cursor: pointer; white-space: nowrap; transition: filter 0.15s ease; }
.lg-book:hover { filter: brightness(1.07); }
.lg-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.lg-pager button { background: #fff; border: 1px solid var(--lg-border); border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; font: 600 0.9rem var(--tw-font-body); color: var(--lg-text); }
.lg-pager button:disabled { opacity: 0.5; cursor: default; }
.lg-empty { text-align: center; color: var(--lg-grey); padding: 2rem; }

/* ---- About + info card ---- */
.lg-about { max-width: 900px; }
.lg-about__text { font: 400 1.02rem var(--tw-font-body); color: var(--lg-grey); line-height: 1.7; margin: 0; }
.lg-about__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lg-about__more { background: none; border: 0; color: var(--brand-primary); font: 600 0.95rem var(--tw-font-brand); cursor: pointer; padding: 0.5rem 0 0; }
.lg-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1.8rem; background: #fff; border: 1px solid var(--lg-border); border-radius: 20px; padding: 1.6rem 1.8rem; box-shadow: var(--lg-shadow); }
.lg-info__label { display: flex; align-items: center; gap: 0.5rem; font: 700 1rem var(--tw-font-brand); color: var(--lg-text); margin-bottom: 0.9rem; }
.lg-info__addr { color: var(--lg-grey); text-decoration: none; font: 400 0.95rem var(--tw-font-body); line-height: 1.5; }
.lg-info__addr:hover { color: var(--brand-primary); }
.lg-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font: 400 0.9rem var(--tw-font-body); color: var(--lg-grey); }
.lg-hours__row .d { font-weight: 500; color: var(--lg-text); }
.lg-hours__row .cl { color: #b0b8c4; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lg-chip { background: rgba(var(--brand-primary-rgb), 0.08); color: var(--brand-primary); font: 600 0.85rem var(--tw-font-body); padding: 0.4rem 0.8rem; border-radius: 999px; }

/* ---- Reviews ---- */
.lg-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.lg-review { background: #fff; border: 1px solid var(--lg-border); border-radius: 16px; padding: 1.2rem; box-shadow: var(--lg-shadow); }
.lg-review__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.lg-review__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font: 700 1.1rem var(--tw-font-brand); flex-shrink: 0; }
.lg-review__who { display: flex; flex-direction: column; min-width: 0; }
.lg-review__name { font: 700 0.95rem var(--tw-font-brand); color: var(--lg-text); }
.lg-review__when { font: 400 0.78rem var(--tw-font-body); color: var(--lg-grey); }
.lg-stars { color: var(--lg-star); font-size: 0.95rem; letter-spacing: 1px; margin-bottom: 0.5rem; }
.lg-stars .is-off { color: #dde3ec; }
.lg-review__text { font: 400 0.9rem var(--tw-font-body); color: var(--lg-grey); line-height: 1.6; margin: 0; }
.lg-more { display: block; margin: 1.5rem auto 0; background: #fff; border: 1.5px solid var(--lg-border); color: var(--lg-text); font: 600 0.95rem var(--tw-font-brand); padding: 0.7rem 1.6rem; border-radius: 999px; cursor: pointer; }

/* Phone layout — matches the Figma mobile frame, not a squished desktop. */
@media (max-width: 820px) {
  .lg-landing { padding: 0 1rem; }
  /* Hero: image on top, big title, full-width CTAs */
  .lg-hero { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.1rem; }
  .lg-hero__media { order: -1; aspect-ratio: 16/10; border-radius: 18px; }
  .lg-hero__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .lg-hero__desc { font-size: 0.95rem; margin-bottom: 1.1rem; }
  .lg-hero__cta .lg-btn-primary { flex: 1 1 100%; justify-content: center; }
  .lg-hero__cta .lg-btn-ghost { flex: 1; justify-content: center; }
  /* Stats: 3 across, icon on top, centred */
  .lg-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1.1rem 0.7rem; }
  .lg-stat { flex-direction: column; text-align: center; gap: 0.45rem; }
  .lg-stat__ic { width: 46px; height: 46px; }
  .lg-stat b { font-size: 1.05rem; }
  .lg-stat span { font-size: 0.72rem; }
  .lg-sec { padding: 1.6rem 0; }
  .lg-sec__head { align-items: flex-start; }
  /* Services: horizontal cards (thumbnail left) */
  .lg-cards { grid-template-columns: 1fr; gap: 0.8rem; }
  .lg-card { flex-direction: row; align-items: stretch; }
  .lg-card__img { width: 108px; flex-shrink: 0; aspect-ratio: auto; }
  .lg-card__body { padding: 0.7rem 0.85rem; }
  .lg-card__foot { padding-top: 0.5rem; }
  .lg-acc__head { padding: 0.9rem 1rem; }
  .lg-acc__panel { padding: 0 1rem 1rem; }
  /* Info: single column */
  .lg-info { grid-template-columns: 1fr; gap: 1.3rem; padding: 1.3rem; }
  /* Reviews: 2-up compact (comment hidden, like the Figma phone) */
  .lg-reviews { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .lg-review { padding: 0.8rem; }
  .lg-review__text { display: none; }
  .lg-review__av { width: 36px; height: 36px; font-size: 0.9rem; }
  .lg-review__name { font-size: 0.82rem; }
  .lg-review__when { font-size: 0.7rem; }
}
@media (max-width: 400px) {
  .lg-stat span { font-size: 0.68rem; }
  .lg-reviews { grid-template-columns: 1fr; }
  .lg-review__text { display: block; }
}

/* ==========================================================================
   LAGOON polish pass — tighten to the Figma (overrides earlier rules).
   ========================================================================== */
/* Hero: image full-bleeds to the right edge; text on a soft brand gradient. */
.lg-hero { position: relative; grid-template-columns: 1.05fr 0.95fr; min-height: 400px; margin-bottom: 1.4rem; border-radius: 22px; overflow: hidden; padding: 0; gap: 0;
  background: linear-gradient(115deg, rgba(var(--brand-primary-rgb), 0.09), rgba(var(--brand-primary-rgb), 0.02) 55%, #ffffff); }
.lg-hero__text { padding: clamp(1.7rem, 3vw, 2.8rem); position: relative; z-index: 1; }
.lg-hero__media { position: absolute; inset-block: 0; inset-inline-end: 0; width: 48%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #eef1f5; }
.lg-hero__badges { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.lg-badge { background: transparent; padding: 0; border-radius: 0; font: 500 13px var(--tw-font-body); color: var(--lg-grey); }
.lg-badge--star { color: var(--lg-star); font-weight: 700; }
.lg-badge__mut { color: var(--brand-primary); font-weight: 500; text-decoration: underline; }
.lg-badge--open { color: #16a34a; } .lg-badge--closed { color: #dc2626; }

/* Stats: open row (no card), solid brand-circle icons. */
.lg-stats { background: transparent; border: 0; box-shadow: none; padding: 0.4rem 0 1.8rem; }
.lg-stat__ic { border-radius: 50%; background: var(--brand-primary); color: #fff; }

/* Footer logo: the invert filter turned it into a white box — show it as-is. */
.lg-footer__logo { filter: none; }
.lg-footer__badge { background: #fff; color: var(--brand-primary); }

/* Accordion: rounded-pill rows, brand-circle header icon, no count chip. */
.lg-acc__item { border-radius: 22px; }
.lg-acc__ic { border-radius: 50%; background: var(--brand-primary); color: #fff; }
.lg-acc__count { display: none; }
.lg-acc__head { padding: 1rem 1.4rem; }

/* Reviews: compact cards, more per row. */
.lg-reviews { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 0.85rem; }
.lg-review { padding: 0.9rem 1rem; border-radius: 14px; }
.lg-review__text { font-size: 0.83rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* One consistent, symmetric page gutter for navbar + content + footer so their
   left/right edges line up (measured: were 115 / 179 / 93 px — now unified). */
:root { --lg-max: 1280px; --lg-gutter: clamp(1rem, 3vw, 40px); }
.lg-landing { max-width: var(--lg-max); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-footer__inner { max-width: var(--lg-max); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-nav { padding-inline: calc(max(0px, (100% - var(--lg-max)) / 2) + var(--lg-gutter)); }

/* Playwright loop — round A: reviews compact (Figma cards are avatar+name+stars+
   time, no body text), tighter grid. */
.lg-reviews { grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 0.7rem; }
.lg-review { padding: 0.85rem 0.9rem; border-radius: 12px; }
.lg-review__text { display: none; }
.lg-review__head { margin-bottom: 0.45rem; }
.lg-review__av { width: 38px; height: 38px; font-size: 0.95rem; }
.lg-stars { margin-bottom: 0; font-size: 0.85rem; }

/* Playwright loop — round B: on desktop the accordion cards are a single
   horizontal scroll row per category (Figma), next card peeking. Mobile keeps
   its stacked horizontal cards (rules in the ≤820px block win there). */
@media (min-width: 821px) {
  .lg-cards { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1rem; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .lg-card { flex: 0 0 236px; scroll-snap-align: start; }
  .lg-cards::-webkit-scrollbar { height: 8px; }
  .lg-cards::-webkit-scrollbar-track { background: transparent; }
  .lg-cards::-webkit-scrollbar-thumb { background: var(--lg-border); border-radius: 999px; }
}

/* Playwright loop — round C: the hero is FULL-BLEED (no left/right margins) —
   it breaks out of the content container to span the whole viewport, while its
   text stays padded to line up with the content gutter below. */
main { overflow-x: clip; }
.lg-hero { width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2); margin-top: 0; margin-bottom: 1.6rem; border-radius: 0; }
.lg-hero__text { padding-block: clamp(1.8rem, 3.2vw, 3rem);
  padding-inline-start: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter));
  padding-inline-end: clamp(1.2rem, 3vw, 2.4rem); }

/* Figma phone hero: a small rounded image floats to the top-right, the title sits
   to its left, description + rating flow below, and Book Now is full-width under it.
   (The media is first in the DOM now, so the float works and the text wraps.) */
@media (max-width: 820px) {
  .lg-hero { display: block; padding: 1.3rem clamp(1rem, 5vw, 1.35rem) 1.5rem; }
  .lg-hero__media { float: inline-end; position: relative; inset: auto; width: 42%; max-width: 156px; aspect-ratio: 1; margin: 0.2rem 0 0.6rem 0; margin-inline-start: 0.9rem; border-radius: 16px; }
  .lg-hero__text { padding: 0; }
  .lg-hero__title { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .lg-hero__desc { font-size: 0.92rem; margin-bottom: 1.1rem; }
  .lg-hero__cta { clear: both; }
  .lg-hero__cta .lg-btn-primary { width: 100%; justify-content: center; }
  .lg-hero__arrow { display: none; }
  .lg-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.6rem; }
}

/* Card meta chips ([⏱ 60 mins] [🐾 1 Pet]) — Figma, desktop + mobile. */
.lg-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lg-card__chip { display: inline-flex; align-items: center; gap: 4px; background: #f4f6fa; color: var(--lg-grey); font: 500 0.72rem var(--tw-font-body); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.lg-card__chip svg { flex-shrink: 0; }

/* Mobile services = flat vertical list of horizontal cards (Figma phone): no
   category header, all cards shown, small square image + chips + price/Book Now. */
@media (max-width: 820px) {
  .lg-acc { gap: 0; }
  .lg-acc__item { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .lg-acc__head { display: none; }
  .lg-acc__panel { padding: 0; display: block !important; }
  .lg-cards { display: flex; flex-direction: column; gap: 0.7rem; }
  .lg-card { flex-direction: row; align-items: stretch; padding: 8px; gap: 12px; border-radius: 12px; box-shadow: var(--lg-shadow); }
  .lg-card__img { width: 84px; flex: 0 0 84px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
  .lg-card__body { padding: 0; gap: 0.3rem; justify-content: center; }
  .lg-card__foot { padding-top: 0.45rem; }
  .lg-book { padding: 0.5rem 0.95rem; font-size: 0.8rem; }
  .lg-reviews { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .lg-review { padding: 0.75rem; }
}

/* Mobile filters: search full-width, the two dropdowns share a row (Figma phone). */
@media (max-width: 820px) {
  .lg-search { flex: 1 1 100%; }
  .lg-svc-filters .tw-dd { flex: 1 1 40%; min-width: 0; }
  .lg-svc-filters .tw-dd__trigger { width: 100%; }
}

/* Services carousel — circular arrows scroll the horizontal card row (desktop). */
.lg-carousel { position: relative; }
.lg-carousel__nav { position: absolute; top: 45%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--lg-border); color: var(--brand-primary); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(31,43,77,0.35); transition: background .15s ease, color .15s ease; }
.lg-carousel__nav:hover { background: var(--brand-primary); color: #fff; }
.lg-carousel__nav--prev { inset-inline-start: -6px; }
.lg-carousel__nav--next { inset-inline-end: -6px; }
@media (min-width: 821px) {
  .lg-card__foot { border-top: 1px solid var(--lg-border); padding-top: 0.75rem; margin-top: 0.35rem; }
  .lg-price b { font-size: 1.35rem; }
}
@media (max-width: 820px) { .lg-carousel__nav { display: none; } }

/* ===== Service card — exact Figma structure/metrics =====
   Desktop: vertical — image, title, sub, 2-line desc, chips, divider, price+Book Now.
   Mobile:  horizontal — [73px image][ title/sub/chips | price over Book Now ]. */
.lg-card__body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 1rem; gap: 0.5rem; }
.lg-card__main { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.lg-card__name { font: 500 16px var(--tw-font-body); color: #212428; line-height: 1.4; }
.lg-card__sub { font: 400 14px var(--tw-font-body); color: var(--lg-grey); line-height: 1.25; }
.lg-card__desc { font: 400 12px var(--tw-font-body); color: #212428; line-height: 1.35; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-card__meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.lg-card__chip { display: inline-flex; align-items: center; gap: 4px; background: #f4f6fa; color: var(--lg-grey); font: 400 12px var(--tw-font-body); padding: 4px 6px; border-radius: 42px; white-space: nowrap; }
.lg-price { display: flex; align-items: flex-end; gap: 2px; font: 400 12px var(--tw-font-body); color: #212428; }
.lg-price b { font: 500 22px var(--tw-font-body); color: #212428; line-height: 1.05; }
.lg-price small { font-size: 12px; color: #212428; }
.lg-book { background: var(--brand-primary); color: #fff; border: 0; border-radius: 42px; font: 700 12px var(--tw-font-brand); padding: 0 16px; height: 28px; cursor: pointer; white-space: nowrap; }

@media (min-width: 821px) {
  .lg-card__foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--lg-border); padding-top: 0.75rem; margin-top: auto; }
  .lg-price b { font-size: 26px; }
  .lg-book { height: 34px; font-size: 13px; padding: 0 18px; }
}

@media (max-width: 820px) {
  .lg-card { padding: 8px; gap: 13px; border-radius: 12px; align-items: center; }
  .lg-card__img { width: 73px; flex: 0 0 73px; aspect-ratio: 1; border-radius: 6px; }
  .lg-card__body { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 10px; padding: 0; }
  .lg-card__main { justify-content: center; }
  .lg-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lg-card__desc { display: none; }
  /* The compact row shrinks the thumbnail to 73px, which cannot hold both the % badge
     (pinned inline-start) and the favourite (pinned inline-end) — measured at 390px they
     overlap by 32px and the heart hides the discount outright. The badge goes: the row
     already prints the struck-through original price beside the new one, so nothing is
     lost, and the heart stays reachable at a full 32px tap target. */
  .lg-card__off { display: none; }
  .lg-card__foot { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; flex: 0 0 30%; min-width: 96px; max-width: 118px; border: 0; padding: 0; margin: 0; }
  .lg-book { width: 100%; }
}

/* Mobile: the Figma seats the service cards on a full-bleed #f4f6fa band. */
@media (max-width: 820px) {
  #services-section { background: #f4f6fa; width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2); padding-inline: clamp(1rem, 5vw, 1.35rem); padding-block: 1.75rem; }
  #services-section .lg-card { border-color: transparent; }
}

/* ═══════════ Services section — exact Figma desktop frame ═══════════
   Grey rounded accordion panels holding white cards whose image is INSET
   (card padding), no divider above the price row. Layout rules are scoped
   to ≥821px; the ≤820px block after them re-asserts the phone card. */
.lg-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.lg-sec__title { font: 700 1.6rem/1.2 var(--tw-font-brand); color: var(--brand-primary); margin: 0; }
.lg-sec__more { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 0.95rem var(--tw-font-body); color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.lg-sec__more:hover { opacity: 0.8; }

.lg-acc { display: flex; flex-direction: column; gap: 16px; }
.lg-acc__item { background: #f4f6fa; border: 0; border-radius: 20px; overflow: hidden; }
.lg-acc__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: transparent; border: 0; cursor: pointer; text-align: start; }
.lg-acc__ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: #fff; }
.lg-acc__name { flex: 1; min-width: 0; font: 700 1.05rem var(--tw-font-brand); color: var(--brand-primary); }
.lg-acc__chev { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--brand-primary); transition: transform 0.22s ease; }
.lg-acc__chev.is-open { transform: rotate(180deg); }
.lg-acc__panel { padding: 0 16px 16px; }

.lg-card { border: 0; box-shadow: none; }
.lg-card__chip { background: #f4f6fa; color: var(--lg-grey); }

@media (min-width: 821px) {
  .lg-svc-filters { display: flex; align-items: center; gap: 14px; margin-bottom: 1.3rem; }
  .lg-search { flex: 1 1 auto; height: 40px; border-radius: 8px; }
  .lg-svc-filters .tw-dd { flex: 0 0 178px; }
  .lg-svc-filters .tw-dd__btn { height: 40px; border-radius: 8px; }

  .lg-cards { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .lg-cards::-webkit-scrollbar { display: none; }

  /* Card: 186px wide, 8px padding, image inset + rounded (NOT flush to the edge). */
  .lg-card { flex: 0 0 186px; scroll-snap-align: start; background: #fff; border-radius: 12px; padding: 8px; overflow: visible; }
  .lg-card__img { width: 100%; aspect-ratio: 170 / 115; border-radius: 8px; overflow: hidden; }
  .lg-card__body { padding: 10px 4px 4px; gap: 0; }
  .lg-card__name { font: 600 0.875rem/1.3 var(--tw-font-body); color: #212428; }
  .lg-card__sub { font: 400 0.78rem var(--tw-font-body); color: var(--lg-grey); margin-top: 2px; }
  .lg-card__desc { font: 400 0.72rem/1.35 var(--tw-font-body); color: var(--lg-grey); margin-top: 7px; }
  .lg-card__meta { gap: 8px; margin-top: 9px; }
  .lg-card__chip { font-size: 0.7rem; padding: 3px 7px; }

  /* No divider — the Figma price row sits flush under the chips. */
  .lg-card__foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
    border-top: 0; padding-top: 11px; margin-top: auto; }
  .lg-price b { font-size: 1.5rem; font-weight: 700; line-height: 1; }
  .lg-price small { font-size: 0.68rem; color: var(--lg-grey); }
  .lg-book { flex: 0 0 auto; height: 30px; padding: 0 18px; font-size: 0.75rem; border-radius: 999px; }

  /* The clipped 5th card is the Figma's scroll affordance; arrows fade in on hover. */
  .lg-carousel__nav { opacity: 0; transition: opacity 0.18s ease; box-shadow: 0 2px 10px #1a3a7f1f; }
  .lg-carousel:hover .lg-carousel__nav { opacity: 1; }
}

@media (max-width: 820px) {
  .lg-sec__title { font-size: 1.3rem; }
  .lg-acc__item { background: transparent; border-radius: 0; }
  .lg-acc__panel { padding: 0; }
}

@media (min-width: 821px) {
  /* Track runs flush to the panel's trailing edge so the next card clips there,
     exactly as the Figma does — that cut-off card IS the scroll affordance. */
  .lg-acc__panel { padding-block: 0 16px; padding-inline: 16px 0; }
  .lg-cards { padding-inline-end: 16px; }
}

/* ═══════════ Hero + stats strip — exact Figma desktop frame ═══════════
   Grey (#f4f6fa) left panel, photo flush to the right edge (no radius, no gap).
   Badges: rating + location are plain inline text split by a bullet; only the
   open-state and closing-time are bordered pills. Stats sit on white below. */
.lg-hero { background: #f4f6fa; }

.lg-hero__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font: 400 0.8rem var(--tw-font-body); }
.lg-rate { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.lg-rate svg { color: #292d32; flex: none; }
.lg-sep { color: #b7c1d4; }
.lg-loc { display: inline-flex; align-items: center; gap: 4px; color: #292d32; }
.lg-loc svg { color: #292d32; flex: none; }
.lg-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 1px solid var(--lg-border); border-radius: 999px; background: #fff; font: 500 0.75rem var(--tw-font-body); color: var(--lg-text); white-space: nowrap; }
.lg-pill--open { color: #16b877; border-color: #bfe8d6; }
.lg-pill--open .dot { width: 6px; height: 6px; border-radius: 50%; background: #16b877; }
.lg-pill--closed { color: #e2574c; border-color: #f3cfcc; }
.lg-pill--closed .dot { width: 6px; height: 6px; border-radius: 50%; background: #e2574c; }

.lg-hero__title { color: var(--brand-primary); font-family: var(--tw-font-brand); font-weight: 700; }
.lg-hero__desc { color: var(--lg-grey); }
.lg-hero__cta .lg-btn-primary { border-radius: 8px; font: 700 0.85rem var(--tw-font-brand); padding: 0.62rem 1.15rem; }

.lg-stats { background: #fff; }
.lg-stat { display: flex; align-items: center; gap: 14px; }
.lg-stat__ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; }
.lg-stat b { display: block; font: 700 1.6rem/1.15 var(--tw-font-brand); color: #292d32; }
.lg-stat span { display: block; font: 400 0.9rem var(--tw-font-body); color: var(--lg-grey); }

@media (min-width: 821px) {
  .lg-hero { position: relative; display: block; min-height: 360px; padding: 0; }
  /* Photo owns the right 51.5% edge-to-edge — no rounding, no inset. */
  .lg-hero__media { position: absolute; inset-block: 0; inset-inline-end: 0; width: 51.5%; border-radius: 0; float: none; margin: 0; max-width: none; aspect-ratio: auto; }
  .lg-hero__text { position: relative; z-index: 1; width: 48.5%; display: flex; flex-direction: column; justify-content: center;
    min-height: 360px; padding-block: 3rem; padding-inline-end: 2rem;
    padding-inline-start: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter) + 2.5rem); }
  .lg-hero__title { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0.6rem 0 0.85rem; }
  .lg-hero__desc { font-size: 0.95rem; line-height: 1.9; max-width: 27rem; margin: 0 0 1.6rem; }
  .lg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 1.75rem; }
}

@media (max-width: 820px) {
  .lg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; padding-block: 1.25rem; }
  .lg-stat__ic { flex: 0 0 38px; width: 38px; height: 38px; }
  .lg-stat b { font-size: 1.25rem; }
  .lg-stat span { font-size: 0.8rem; }
  .lg-hero__badges { gap: 7px; font-size: 0.72rem; }
  .lg-pill { height: 23px; padding: 0 9px; font-size: 0.68rem; }
}

/* ═══ Hero/stats corrections measured against the Figma frame ═══
   1. Hero text was inset 40px past the container, so it did not line up with the
      nav logo or the section titles. It aligns to the container now.
   2. Badge row wrapped to 3 lines; it is one line, with the address ellipsising.
   3. Stats were a floating rounded card — the Figma is a full-bleed white band. */
@media (min-width: 821px) {
  .lg-hero__text { padding-inline-start: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter)); }
  .lg-hero__title { font-size: clamp(2rem, 3.7vw, 3.25rem); }
  .lg-hero__badges { flex-wrap: nowrap; }
  .lg-loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-rate, .lg-sep, .lg-pill { flex: none; }

  /* Photo carousel arrows are not in the Figma — surface them only on hover. */
  .lg-hero__arrow { opacity: 0; transition: opacity 0.18s ease; }
  .lg-hero__media:hover .lg-hero__arrow { opacity: 1; }
}

.lg-stats {
  width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2); margin-block: 0;
  background: #fff; border: 0; border-radius: 0; box-shadow: none;
  padding-inline: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter));
}
.lg-stat span { font-size: 0.94rem; }

/* The icon badge is a <span>, so the `.lg-stat span` label rule (class+type)
   out-specifies `.lg-stat__ic` (class) and was forcing it to display:block and
   grey. Scope the label to the text column and re-assert the badge as span.*. */
.lg-stat > div > span { display: block; font: 400 0.94rem var(--tw-font-body); color: var(--lg-grey); }
span.lg-stat__ic {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--brand-primary); color: #fff;
}
span.lg-stat__ic svg { color: #fff; }

/* Hero sat 1.6rem above the stats band; the Figma butts them together. */
.lg-hero { margin-bottom: 0; }

@media (min-width: 821px) {
  /* 52px pushed longer tenant names onto a second line; the Figma title is one. */
  .lg-hero__title { font-size: clamp(2rem, 3.1vw, 2.75rem); }
}
@media (max-width: 820px) {
  span.lg-stat__ic { flex: 0 0 38px; width: 38px; height: 38px; }
  .lg-stat > div > span { font-size: 0.8rem; }
}

/* Filter row — the Figma triggers read just "All Services ⌄" on white with a
   hairline border; drop the icon + uppercase CATEGORY/PET prefix. */
.lg-svc-filters .tw-dd__ico,
.lg-svc-filters .tw-select__label { display: none; }
.lg-svc-filters .tw-select {
  background: #fff; border: 1px solid var(--lg-border); border-radius: 8px; box-shadow: none;
  justify-content: space-between; gap: 8px; padding-inline: 12px;
}
.lg-svc-filters .tw-dd__value { font: 400 0.875rem var(--tw-font-body); color: var(--lg-text); text-transform: none; letter-spacing: 0; }
.lg-svc-filters .tw-dd__caret { color: var(--lg-text); }
.lg-search { background: #fff; border: 1px solid var(--lg-border); border-radius: 8px; box-shadow: none; }
.lg-search input::placeholder { color: #9aa5b8; }

/* ═══ Container: the Figma gutter is proportional (~7.8% of the viewport), not a
   1280px cap. At 1907px the cap left 353px of dead margin each side. ═══ */
:root { --lg-max: 1920px; --lg-gutter: clamp(1rem, 7.8vw, 150px); }

@media (min-width: 821px) {
  .lg-hero__title { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .lg-hero__desc { font-size: 1rem; max-width: 34rem; }
  .lg-stat b { font-size: 1.75rem; }
  .lg-stat > div > span { font-size: 1rem; }
  .lg-sec__title { font-size: 1.75rem; }
}

/* The nav's `0 6px 1.5px` shadow cast a hard grey band across the top of the hero
   photo, which read as a curved corner. The Figma nav sits flush on the hero. */
.lg-nav { box-shadow: 0 1px 0 rgba(31, 43, 77, 0.06); }

/* The Figma curves the hero photo's inner (top-leading) corner where it meets the
   text panel; the other three edges stay flush to the hero bleed. Logical property
   so it mirrors to the top-right in RTL. */
@media (min-width: 821px) {
  .lg-hero__media { border-start-start-radius: 28px; overflow: hidden; }
}

/* Hero is a fixed box, not text-driven — otherwise a tenant with a 2-line name and
   a long blurb (Purr and Bark: 471px) gets a taller hero than a short one (Miss
   Meow: 360px). Pin to 470px and clamp the copy so it can never overflow. */
@media (min-width: 821px) {
  .lg-hero { height: 470px; min-height: 470px; }
  .lg-hero__text { height: 470px; min-height: 470px; }
  .lg-hero__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lg-hero__desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ═══ Service cards — Figma sizing + the exaggerated top-leading corner ═══
   The theme's signature is a hard-curved top-leading corner (same motif as the
   hero photo); the other corners stay gently rounded. Track shows 3 full cards
   and clips the 4th at its midpoint. */
@media (min-width: 821px) {
  .lg-cards { gap: 18px; }
  /* 3.5 cards across the track: 3 full + the 4th cut in half. */
  .lg-card { flex: 0 0 calc((100% - 54px) / 3.5); }

  .lg-card { border-radius: 14px; border-start-start-radius: 26px; padding: 10px; }
  .lg-card__img { aspect-ratio: 200 / 130; border-radius: 10px; border-start-start-radius: 20px; }

  .lg-card__body { padding: 12px 6px 6px; }
  .lg-card__name { font-size: 1rem; }
  .lg-card__sub { font-size: 0.875rem; }
  .lg-card__desc { font-size: 0.8125rem; margin-top: 9px; }
  .lg-card__meta { gap: 10px; margin-top: 11px; }
  .lg-card__chip { font-size: 0.75rem; padding: 4px 9px; }
  .lg-card__foot { padding-top: 14px; }
  .lg-price b { font-size: 1.75rem; }
  .lg-price small { font-size: 0.75rem; }
  .lg-book { height: 36px; padding: 0 22px; font-size: 0.8125rem; }
}

/* Same curved motif on the phone card. */
@media (max-width: 820px) {
  .lg-card { border-start-start-radius: 18px; }
  .lg-card__img { border-start-start-radius: 14px; }
}

/* Cards grew ~2× but the type did not, so the photo took 57% of the card height
   where the Figma gives it ~46%. Widen the crop and lift the type to rebalance. */
@media (min-width: 821px) {
  .lg-card__img { aspect-ratio: 2 / 1; }
  .lg-card__name { font-size: 1.15rem; }
  .lg-card__sub { font-size: 0.95rem; }
  .lg-card__desc { font-size: 0.875rem; }
  .lg-card__chip { font-size: 0.8rem; padding: 5px 10px; }
  .lg-price b { font-size: 2rem; }
  .lg-price small { font-size: 0.8rem; }
  .lg-book { height: 40px; padding: 0 26px; font-size: 0.875rem; }
}

/* ═══ Filter row — Figma proportions ═══
   The Figma gives both dropdowns EQUAL width (~19% of the row) at the same height
   as the search; mine had a runaway search and two small, unequal triggers. */
@media (min-width: 821px) {
  .lg-svc-filters { gap: 16px; margin-bottom: 1.6rem; align-items: stretch; }
  .lg-search { flex: 1 1 auto; height: 52px; border-radius: 10px; padding-inline: 18px; gap: 10px; }
  .lg-search svg { width: 18px; height: 18px; color: #9aa5b8; }
  .lg-search input { font-size: 0.95rem; }

  .lg-svc-filters .tw-dd { flex: 0 0 19%; min-width: 200px; max-width: 330px; }
  .lg-svc-filters .tw-select { width: 100%; height: 52px; border-radius: 10px; padding-inline: 16px; }
  .lg-svc-filters .tw-dd__value { font-size: 0.95rem; }
  .lg-svc-filters .tw-dd__caret { width: 14px; height: 14px; }
}

/* ═══ Accordion head — scale with the enlarged cards ═══ */
@media (min-width: 821px) {
  .lg-acc { gap: 18px; }
  .lg-acc__item { border-radius: 16px; }
  .lg-acc__head { padding: 16px 18px; gap: 14px; }
  .lg-acc__ic { flex: 0 0 40px; width: 40px; height: 40px; }
  .lg-acc__ic svg { width: 20px; height: 20px; }
  .lg-acc__name { font-size: 1.2rem; }
  .lg-acc__chev { flex: 0 0 32px; width: 32px; height: 32px; }
  .lg-acc__panel { padding-block: 0 18px; padding-inline: 18px 0; }
  .lg-cards { padding-inline-end: 18px; }
}

/* The page ground was #fafbfc and the accordion panel #f4f6fa — six levels apart,
   so the panel read as invisible. The Figma page is white; the grey panel is what
   separates the category rows from it. */
body { background: #fff; }

/* ═══ About Us + info card — exact Figma ═══
   The About block sits on a full-bleed #f4f6fa band with a WHITE card floating on
   it. Icons are brand glyphs in tinted circles (never emoji), column titles are
   brand-coloured, the address is a link, and We-Serve chips are neutral grey. */
.lg-about-sec { background: #f4f6fa; width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2);
  padding-inline: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter)); }
.lg-about__text { color: var(--lg-grey); line-height: 1.9; }
.lg-about__more { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand-primary); font: 500 0.95rem var(--tw-font-body); text-decoration: underline; text-underline-offset: 3px; }

.lg-info { background: #fff; border: 0; box-shadow: none; border-radius: 16px; border-start-start-radius: 26px; }
.lg-info__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), 0.10); color: var(--brand-primary); font-size: 0; }
.lg-info__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lg-info__label { margin: 0; font: 700 1.05rem var(--tw-font-brand); color: var(--brand-primary); }
.lg-info__share { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--brand-primary); line-height: 0; }
.lg-info__share:hover { opacity: 0.7; }
.lg-info__addr { color: var(--lg-text); text-decoration: underline; text-underline-offset: 3px; font: 400 0.9rem/1.6 var(--tw-font-body); }
.lg-hours__row .d { color: var(--lg-text); font: 400 0.9rem var(--tw-font-body); }
.lg-hours__row .h { color: var(--lg-text); font: 400 0.9rem var(--tw-font-body); }
.lg-chip { background: #f4f6fa; color: var(--lg-text); border: 0;
  font: 400 0.85rem var(--tw-font-body); padding: 7px 14px; border-radius: 999px; }

@media (min-width: 821px) {
  .lg-info { display: grid; grid-template-columns: 1fr 1.35fr 1.15fr; gap: 2.5rem; padding: 2rem 2.25rem; }
  .lg-info__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .lg-info__head { width: 100%; }
  .lg-hours { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
  .lg-hours__row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; }
  .lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ═══ Customer Reviews — two auto-sliding marquee rows (Figma) ═══
   Each track holds its list twice, so translateX(-50%) loops seamlessly. Row two
   runs in reverse. Hover pauses; reduced-motion swaps to a manual scroll. */
.lg-reviews-sec { background: #f4f6fa; width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2);
  padding-inline: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter)); overflow: hidden; }
.lg-rv-marquee { display: flex; flex-direction: column; gap: 14px;
  width: var(--tw-vw); margin-inline: calc(50% - var(--tw-vw) / 2); }
.lg-rv-row { overflow: hidden; }
.lg-rv-track { display: flex; gap: 14px; width: max-content; animation: lg-marquee 60s linear infinite; }
.lg-rv-row--rev .lg-rv-track { animation-direction: reverse; }
.lg-rv-marquee:hover .lg-rv-track { animation-play-state: paused; }
@keyframes lg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.lg-rv { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 10px; border-start-start-radius: 16px; padding: 9px 14px 9px 9px; }
.lg-rv__av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; color: #fff; font: 700 0.7rem var(--tw-font-brand); }
.lg-rv__body { display: flex; flex-direction: column; gap: 3px; }
.lg-rv__meta { font: 500 0.78rem var(--tw-font-body); color: var(--lg-text); white-space: nowrap; }
.lg-rv__meta span { color: #b7c1d4; }
.lg-rv__stars { display: flex; gap: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lg-rv-track { animation: none; }
  .lg-rv-row { overflow-x: auto; }
}

/* ═══ Footer — exact Figma ═══
   Social buttons are circles (were rounded squares). Contact pills are a lighter
   tint of the brand with WHITE text (were light chips with brand-coloured text).
   Bottom bar carries the copyright on the leading edge and Powered-by on the far. */
.lg-footer__social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.lg-footer__social a:hover { background: rgba(255, 255, 255, 0.28); }

.lg-footer__pill { background: rgba(255, 255, 255, 0.16); border: 0; border-radius: 999px; }
.lg-footer__pilltext { color: #fff; }
.lg-footer__picon { background: rgba(255, 255, 255, 0.16); color: #fff; border-radius: 50%; }
.lg-footer__pill:hover { background: rgba(255, 255, 255, 0.26); }

.lg-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-inline: calc(max(0px, (var(--tw-vw) - var(--lg-max)) / 2) + var(--lg-gutter));
}
.lg-footer__copy { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 820px) {
  .lg-footer__bottom { justify-content: center; text-align: center; }
}

/* The pill stretched to fill its column, and its inner text span still had the old
   near-white chip background — white text on a 0.92-white ground is invisible.
   The tint belongs to the pill itself; the text span is transparent. */
.lg-footer__pill { width: fit-content; max-width: 100%; }
.lg-footer__pilltext { background: transparent; border-radius: 0; color: #fff; padding-inline: 0; }

/* Icon circle is its own shape beside the text pill (Figma), not jammed inside its
   rounded corner. Both share one centre line and one height. */
.lg-footer__crow { display: flex; align-items: center; gap: 10px; }
.lg-footer__crow .lg-footer__picon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #fff;
}
.lg-footer__crow .lg-footer__pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.16); width: fit-content; max-width: 100%;
}
.lg-footer__crow .lg-footer__pilltext { background: transparent; color: #fff; font: 500 0.9rem var(--tw-font-body); }

/* ═══ Footer detail pass — measured off the Figma ═══
   1. Logo is large (~170px) and its leading edge lines up with the social row.
   2. Social icons are PLAIN white glyphs — no circle grounds.
   3. Contact pills are EQUAL width (both stretch to the column) on a lighter fill,
      with the icon circle a shade darker than the footer ground. */
.lg-footer__logo { width: 170px; max-width: 100%; height: auto; max-height: 104px; object-fit: contain; object-position: left center; filter: none; }
.lg-footer__brand { align-items: flex-start; }

.lg-footer__social { display: flex; align-items: center; gap: 18px; }
.lg-footer__social a {
  width: auto; height: auto; border-radius: 0; background: none; color: #fff;
  display: inline-grid; place-items: center;
}
.lg-footer__social a:hover { background: none; opacity: 0.75; }
.lg-footer__social svg { width: 20px; height: 20px; }

.lg-footer__contact { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.lg-footer__crow { display: flex; align-items: center; gap: 10px; }
.lg-footer__crow .lg-footer__picon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.13); color: #fff;
}
.lg-footer__crow .lg-footer__pill {
  flex: 1 1 auto; width: auto; max-width: none; height: 34px; padding: 0 18px;
  background: rgba(255, 255, 255, 0.30);
}
.lg-footer__crow .lg-footer__pilltext { color: #fff; }

@media (max-width: 820px) {
  .lg-footer__logo { width: 130px; }
  .lg-footer__social { gap: 16px; }
}

/* Desktop: rating group + pills group still read as one line. */
.lg-hero__rating, .lg-hero__pills { display: inline-flex; align-items: center; gap: 9px; }

/* ═══════════ PHONE HERO — exact Figma phone frame ═══════════
   The hero is a WHITE CARD on a grey page, laid out as two columns (text | photo),
   NOT the float I had. Reading order differs from desktop: pills → title → desc →
   rating/location → full-width CTA. `display: contents` lets the badge groups be
   reordered as siblings of the title. */
@media (max-width: 820px) {
  body { background: #f4f6fa; }

  .lg-hero {
    display: flex; flex-direction: row; align-items: stretch; gap: 12px;
    width: auto; margin: 10px 10px 0; padding: 14px;
    background: #fff; border-radius: 16px 16px 0 0;
  }
  .lg-hero__media {
    order: 2; flex: 0 0 40%; position: relative; inset: auto; float: none;
    width: auto; max-width: none; height: auto; min-height: 190px; aspect-ratio: auto;
    margin: 0; border-radius: 12px; border-start-start-radius: 18px; overflow: hidden;
  }
  .lg-hero__text {
    order: 1; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    width: auto; height: auto; min-height: 0; padding: 0;
  }

  .lg-hero__badges { display: contents; }
  .lg-hero__pills  { order: 1; display: flex; flex-wrap: wrap; gap: 6px; }
  .lg-hero__title  { order: 2; font-size: 1.5rem; line-height: 1.2; margin: 10px 0 6px; }
  .lg-hero__desc   { order: 3; font-size: 0.875rem; line-height: 1.5; margin: 0 0 10px; -webkit-line-clamp: 3; }
  .lg-hero__rating { order: 4; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .lg-hero__cta    { order: 5; width: 100%; margin-top: auto; }
  .lg-hero__cta .lg-btn-primary {
    display: grid; place-items: center; width: 100%; height: 44px;
    border-radius: 999px; font-size: 0.95rem;
  }

  /* Stats close the same white card, in one scrollable row (Figma). */
  .lg-stats {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.25rem;
    width: auto; margin: 0 10px 14px; padding: 16px 14px;
    background: #fff; border-radius: 0 0 16px 16px;
    scrollbar-width: none;
  }
  .lg-stats::-webkit-scrollbar { display: none; }
  .lg-stat { flex: 0 0 auto; }
  .lg-stat b { font-size: 1.25rem; white-space: nowrap; }
  .lg-stat > div > span { font-size: 0.8rem; white-space: nowrap; }
}

/* The 7.8vw desktop gutter stacked on top of the card's own margin, insetting the
   phone hero 40px instead of ~14. Phone gets a flat gutter and the card no margin. */
@media (max-width: 820px) {
  :root { --lg-gutter: 14px; }
  .lg-hero { margin: 10px 0 0; }
  .lg-stats { margin: 0 0 18px; }
}

/* An unscoped `.lg-hero { min-height: 400px }` from the desktop rules was forcing
   80px of slack into the phone card, which margin-top:auto turned into a gap above
   the CTA. Phone card is content-height. */
@media (max-width: 820px) {
  .lg-hero { min-height: 0; height: auto; }
  .lg-hero__cta { margin-top: 4px; }
  .lg-hero__media { min-height: 0; }
}

/* Phone stats: icon beside the text (Figma), not stacked above it. */
@media (max-width: 820px) {
  .lg-stat { flex-direction: row; align-items: center; text-align: start; gap: 10px; }
  .lg-stat b { font-size: 1.05rem; }
  .lg-stat > div > span { font-size: 0.75rem; }
  span.lg-stat__ic { flex: 0 0 34px; width: 34px; height: 34px; }
  span.lg-stat__ic svg { width: 17px; height: 17px; }
}

/* Phone hero photo reads too narrow at 40% — widen it. */
@media (max-width: 820px) {
  .lg-hero__media { flex: 0 0 46%; }
}

/* Widening the photo left the pill row needing 171px in a 168px column — it wrapped
   by 3px. Tighter padding/gap keeps Open + Closes on one line, as the Figma has. */
@media (max-width: 820px) {
  .lg-hero__pills { gap: 5px; }
  .lg-pill { padding: 0 7px; white-space: nowrap; }
  .lg-pill--open { padding-inline: 7px 8px; }
}

/* ═══════════ PHONE SERVICES — vertical carousel (Figma) ═══════════
   The track scrolls vertically, snapping cards to its centre. ~3 cards are in view;
   the centred one gets .is-active and becomes the Figma FEATURED card (tall photo,
   description, divider, full price row). Its neighbours stay compact. */
@media (max-width: 820px) {
  .lg-svc-filters { display: flex; flex-wrap: wrap; gap: 10px; }
  .lg-search { flex: 1 1 100%; height: 46px; border-radius: 10px; }
  .lg-svc-filters .tw-dd { flex: 1 1 0; min-width: 0; }
  .lg-svc-filters .tw-select { width: 100%; height: 46px; border-radius: 10px; }

  .lg-cards {
    display: flex; flex-direction: column; gap: 12px;
    max-height: 430px; overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y proximity; scrollbar-width: none;
    padding: 2px;
  }
  .lg-cards::-webkit-scrollbar { display: none; }
  .lg-card { scroll-snap-align: center; transition: box-shadow 0.25s ease; }

  /* ── FEATURED (centred) card ── */
  .lg-card.is-active {
    align-items: stretch; padding: 8px; gap: 12px;
    border-radius: 22px; border-start-start-radius: 22px;
    box-shadow: 0 6px 22px rgba(31, 43, 77, 0.10);
  }
  .lg-card.is-active .lg-card__img {
    flex: 0 0 112px; width: 112px; aspect-ratio: 112 / 175; height: auto;
    border-radius: 12px; border-start-start-radius: 16px;
  }
  .lg-card.is-active .lg-card__body { flex-direction: column; justify-content: flex-start; gap: 0; padding: 2px 0 0; }
  .lg-card.is-active .lg-card__main { flex: 1 1 auto; justify-content: flex-start; }
  .lg-card.is-active .lg-card__name { font-size: 1rem; -webkit-line-clamp: 2; }
  .lg-card.is-active .lg-card__desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.75rem; line-height: 1.4; margin-top: 6px; color: #212428;
  }
  .lg-card.is-active .lg-card__foot {
    flex: none; flex-direction: row; align-items: center; justify-content: space-between;
    min-width: 0; max-width: none; gap: 10px;
    border-top: 1px solid var(--lg-border); padding-top: 10px; margin-top: 10px;
  }
  .lg-card.is-active .lg-price b { font-size: 1.75rem; }
  .lg-card.is-active .lg-book { width: auto; flex: 1 1 auto; max-width: 185px; height: 36px; font-size: 0.9rem; }
}

/* In a column flex track with a max-height, cards flex-shrink to fit — 31 of them
   collapsed to 16px each. They must keep their natural height and let the track scroll. */
@media (max-width: 820px) {
  .lg-cards > .lg-card { flex: 0 0 auto; }
}

/* Phone: no category header (Figma shows a flat list); compact-card chips must stay
   on one line — they were wrapping and inflating the card to 120px. */
@media (max-width: 820px) {
  .lg-acc__head { display: none; }
  .lg-acc__panel { display: block !important; }

  .lg-card:not(.is-active) .lg-card__meta { flex-wrap: nowrap; gap: 6px; margin-top: 7px; }
  .lg-card:not(.is-active) .lg-card__chip { font-size: 0.68rem; padding: 3px 7px; }
  .lg-card:not(.is-active) .lg-card__name { font-size: 0.9rem; }
  .lg-card:not(.is-active) .lg-card__sub { font-size: 0.78rem; }
  .lg-card:not(.is-active) .lg-card__foot { flex: 0 0 96px; min-width: 92px; max-width: 108px; }
  .lg-card:not(.is-active) .lg-price b { font-size: 1.3rem; }
}

/* Track sized to exactly three cards: 89 + 191 + 89 + two 12px gaps = 393. */
@media (max-width: 820px) {
  .lg-cards { max-height: 400px; }
}

/* Phone hero is a FIXED-height card (Figma), not text-driven — a long name or blurb
   must not stretch it. Type is sized down and clamped to fit; the rating row stays
   on one line with the address ellipsising; the CTA pins to the bottom. */
@media (max-width: 820px) {
  .lg-hero { height: 215px; min-height: 215px; padding: 12px; }
  .lg-hero__title { font-size: 1.15rem; line-height: 1.25; margin: 8px 0 5px; -webkit-line-clamp: 2; }
  .lg-hero__desc { font-size: 0.8rem; line-height: 1.45; margin: 0 0 8px; -webkit-line-clamp: 2; }
  .lg-hero__rating { flex-wrap: nowrap; gap: 5px; font-size: 0.72rem; margin-bottom: 8px; min-width: 0; }
  .lg-hero__rating .lg-loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-hero__rating .lg-rate { flex: none; white-space: nowrap; }
  .lg-hero__cta { margin-top: auto; }
  .lg-hero__cta .lg-btn-primary { height: 40px; font-size: 0.9rem; }
}

/* -webkit-line-clamp is inert without display:-webkit-box — that was only set in the
   desktop block, so the phone clamps did nothing and long copy overflowed the card. */
@media (max-width: 820px) {
  .lg-hero__title, .lg-hero__desc {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .lg-hero__title { -webkit-line-clamp: 2; }
  .lg-hero__desc { -webkit-line-clamp: 2; }
}

/* text-overflow:ellipsis is inert on a flex container — .lg-loc was inline-flex, so
   the address never truncated and bled across the photo. Make it a block line box. */
@media (max-width: 820px) {
  .lg-hero__text { overflow: hidden; }
  .lg-hero__rating { overflow: hidden; width: 100%; }
  .lg-hero__rating .lg-loc {
    display: block; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lg-hero__rating .lg-loc svg { vertical-align: -2px; margin-inline-end: 3px; }
  .lg-hero__rating .lg-sep { flex: none; }
}

/* Phone: "4.9 (1426 Reviews)" consumed the whole rating line and truncated the
   address to one letter. Drop the word, keep the count: "4.9 (1426)". */
@media (max-width: 820px) {
  .lg-rate__word { display: none; }
}

/* Phone: location drops to its own line under the rating. With a full line to itself
   the review count can spell out "Reviews" again; the card grows to fit the extra row. */
@media (max-width: 820px) {
  .lg-hero { height: 235px; min-height: 235px; }
  .lg-hero__rating { flex-direction: column; align-items: flex-start; gap: 3px; }
  .lg-hero__rating .lg-sep { display: none; }
  .lg-rate__word { display: inline; }
}

/* The nav is logo | (links + actions), so `space-between` parked the links pill
   left of centre — the flanking groups are very different widths. Centre it against
   the viewport instead. Only where there is room; narrower desktops keep the flow
   layout so the pill can't collide with the logo or the actions. */
@media (min-width: 1500px) {
  .lg-nav__menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
  .lg-nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* Centring the pill only works if the flanking groups leave room for it. The actions
   block ran to 472px (long branch + account names) and the pill grew with the
   viewport to 547px — together they collided at ≤1600. Cap both: names truncate, the
   pill stops growing. */
@media (min-width: 1200px) {
  .lg-nav__links { gap: 26px; }
  .lg-nav__links a { font-size: 15px; }

  .lg-nav__actions { gap: 10px; }
  /* Cap the TRIGGER only. `[class*="branch"] button` also matched the dropdown's
     option buttons and truncated every branch name in the list to "Purr a…". */
  .lg-nav__actions .tw-branch__btn { max-width: 170px; }
  .lg-nav__actions .tw-branch__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-nav__actions .tw-branch__menu,
  .lg-nav__actions .tw-branch__item { max-width: none; }
  .lg-acct__name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══════════ /services — guided service finder (Figma "View All Services") ═══════════ */
.lg-svcpage { padding-block: 1.5rem 3rem; }
.lg-svcpage__head { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.lg-svcpage__back { display: grid; place-items: center; width: 32px; height: 32px; color: var(--brand-primary); }
.lg-svcpage__title { margin: 0; font: 700 1.6rem var(--tw-font-brand); color: var(--brand-primary); }

.lg-svcpage__bar { display: flex; align-items: stretch; gap: 10px; margin-bottom: 1.6rem; }
.lg-svcpage__bar .lg-search { flex: 1 1 auto; height: 46px; border-radius: 10px; }
.lg-filterbtn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 46px; padding: 0 16px;
  background: #fff; border: 1px solid var(--brand-primary); border-radius: 10px; cursor: pointer;
  color: var(--brand-primary); font: 600 0.9rem var(--tw-font-body);
}
.lg-filterbtn:hover { background: rgba(var(--brand-primary-rgb), 0.06); }

.lg-step { margin-bottom: 1.5rem; }
.lg-step__label {
  display: flex; align-items: center; gap: 7px; margin: 0 0 0.75rem;
  font: 700 0.95rem var(--tw-font-brand); color: var(--brand-primary);
}
.lg-step__label--plain { color: var(--brand-primary); font-size: 1.05rem; }
.lg-req { color: #e2574c; }

.lg-optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.lg-opt {
  height: 44px; padding: 0 14px; border: 1px solid var(--lg-border); border-radius: 10px;
  background: #fff; color: var(--lg-text); font: 500 0.9rem var(--tw-font-body); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lg-opt:hover { border-color: var(--brand-primary); }
.lg-opt.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 600; }

.lg-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  height: 46px; padding: 0 16px; border: 1px solid var(--lg-border); border-radius: 10px;
  background: #fff; color: var(--lg-text); font: 400 0.9rem var(--tw-font-body); cursor: pointer;
}
.lg-select.is-on { border-color: var(--brand-primary); color: var(--lg-text); font-weight: 500; }
.lg-select.is-disabled { opacity: 0.55; cursor: not-allowed; background: #f4f6fa; }

/* Bottom sheet (both the sort sheet and the Choose-Service-Type sheet) */
.lg-sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.lg-sheet__scrim { position: absolute; inset: 0; background: rgba(20, 28, 46, 0.45); }
.lg-sheet__panel {
  position: relative; width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(31, 43, 77, 0.25);
}
.lg-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; }
.lg-sheet__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1.05rem var(--tw-font-brand); color: var(--brand-primary); }
.lg-sheet__head button { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--lg-grey); line-height: 0; }
.lg-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.lg-sheet__foot { padding: 12px 20px 20px; }
.lg-sheet__cta { display: grid; place-items: center; width: 100%; height: 46px; border-radius: 999px; font-size: 0.95rem; }

.lg-radio {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: start;
  padding: 12px 14px; border: 1px solid transparent; border-radius: 12px;
  background: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.lg-radio:hover { background: #f4f6fa; }
.lg-radio.is-on { background: rgba(var(--brand-primary-rgb), 0.07); border-color: rgba(var(--brand-primary-rgb), 0.35); }
.lg-radio__dot {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--lg-border); background: #fff; position: relative;
}
.lg-radio.is-on .lg-radio__dot { border-color: var(--brand-primary); }
.lg-radio.is-on .lg-radio__dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-primary);
}
.lg-radio__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-radio__label { font: 600 0.92rem var(--tw-font-body); color: #212428; }
.lg-radio__desc { font: 400 0.8rem/1.45 var(--tw-font-body); color: var(--lg-grey); }

/* Results reuse the featured card shape. */
.lg-results { display: flex; flex-direction: column; gap: 12px; }
.lg-results .lg-card { max-width: 720px; }
.lg-card__sub-inline { color: var(--lg-grey); font-weight: 400; }

@media (max-width: 820px) {
  .lg-svcpage__title { font-size: 1.3rem; }
  .lg-optgrid { grid-template-columns: 1fr 1fr; }
  .lg-opt { height: 42px; font-size: 0.85rem; }
  .lg-filterbtn { padding: 0 12px; font-size: 0.82rem; }
  .lg-sheet__panel { width: 100%; }
  /* Results are always the featured card here, never the compact carousel variant. */
  .lg-results .lg-card.is-active { box-shadow: none; border: 1px solid var(--lg-border); }
}

/* ═══ /services — DESKTOP: a sticky picker rail beside a results column ═══
   On phone it stays the single stacked column the Figma shows. */
.lg-svcpage__cols { display: block; }

.lg-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 240px; padding: 2rem; text-align: center;
  background: #f4f6fa; border-radius: 16px; border-start-start-radius: 26px; color: var(--lg-grey);
}
.lg-prompt svg { color: var(--brand-primary); opacity: 0.55; }
.lg-prompt p { margin: 0; font: 400 0.95rem var(--tw-font-body); max-width: 22rem; }

.lg-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary);
  border-radius: 999px; font: 700 0.75rem var(--tw-font-body);
}

.lg-pager { margin-top: 1.25rem; }
.lg-pager nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lg-pager svg { width: 16px; height: 16px; }
.lg-pager a, .lg-pager span {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--lg-border); border-radius: 10px; background: #fff;
  color: var(--lg-text); font: 500 0.875rem var(--tw-font-body); text-decoration: none;
}
.lg-pager a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.lg-pager [aria-current="page"] span,
.lg-pager span[aria-current="page"] {
  background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 700;
}
.lg-pager [aria-disabled="true"] span { opacity: 0.45; }
/* Laravel's default pager ships a "Showing x to y of z" block we don't want here. */
.lg-pager p, .lg-pager .hidden { display: none; }

@media (min-width: 981px) {
  .lg-svcpage__cols { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .lg-svcpage__picker {
    position: sticky; top: calc(var(--tw-nav-h) + 1.25rem);
    padding: 1.5rem; background: #f4f6fa;
    border-radius: 16px; border-start-start-radius: 26px;
  }
  .lg-svcpage__picker .lg-step:last-child { margin-bottom: 0; }
  .lg-svcpage__picker .lg-optgrid { grid-template-columns: 1fr 1fr; }
  .lg-svcpage__picker .lg-opt { height: 42px; font-size: 0.85rem; padding: 0 10px; }

  .lg-svcpage__bar { max-width: 720px; }
  .lg-results .lg-card { max-width: none; }

  /* Sheets centre as dialogs on desktop rather than sliding from the bottom edge. */
  .lg-sheet { align-items: center; }
  .lg-sheet__panel { border-radius: 20px; max-height: 76vh; box-shadow: 0 24px 60px rgba(31, 43, 77, 0.28); }
}

@media (max-width: 980px) {
  .lg-svcpage__picker { margin-bottom: 0.5rem; }
}

/* Result cards inherited the carousel's VERTICAL card on desktop, so the photo went
   full-width at 2:1 and each card was ~570px tall. Results are their own shape: a
   horizontal row with the photo on the leading edge. */
@media (min-width: 821px) {
  .lg-results .lg-card {
    flex: 0 0 auto; flex-direction: row; align-items: stretch; gap: 16px;
    padding: 12px; border: 1px solid var(--lg-border); border-radius: 14px; border-start-start-radius: 22px;
  }
  .lg-results .lg-card__img {
    flex: 0 0 210px; width: 210px; aspect-ratio: 4 / 3; height: auto;
    border-radius: 10px; border-start-start-radius: 16px;
  }
  .lg-results .lg-card__body { flex: 1 1 auto; flex-direction: column; padding: 4px 4px 2px 0; gap: 0; }
  .lg-results .lg-card__main { flex: 1 1 auto; }
  .lg-results .lg-card__name { font-size: 1.05rem; }
  .lg-results .lg-card__desc { -webkit-line-clamp: 2; font-size: 0.85rem; }
  .lg-results .lg-card__foot {
    flex-direction: row; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--lg-border); padding-top: 12px; margin-top: 12px;
  }
  .lg-results .lg-price b { font-size: 1.6rem; }
  .lg-results .lg-book { height: 38px; padding: 0 24px; font-size: 0.85rem; }
}

/* ═══ Pager (custom view — Laravel's default is Tailwind-classed and this theme
   does not load Tailwind, so it degraded to bare Previous/Next text links) ═══ */
.lg-pager { margin-top: 1.5rem; }
.lg-pager__nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lg-pager__btn {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--lg-border); border-radius: 10px; background: #fff; cursor: pointer;
  color: var(--lg-text); font: 500 0.9rem var(--tw-font-body);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lg-pager__btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.lg-pager__btn.is-on {
  background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 700;
}
.lg-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lg-pager__btn--arrow { color: var(--brand-primary); }
/* The leading arrow points "back" — mirror both in RTL. */
[dir="rtl"] .lg-pager__btn--arrow svg { transform: scaleX(-1); }
.lg-pager__gap { padding: 0 4px; color: var(--lg-grey); }

/* ═══ Option chips must fit long localized names (Arabic category names overflowed
   the fixed 44px button) ═══ */
.lg-optgrid { align-items: stretch; }
.lg-opt {
  height: auto; min-height: 44px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
@media (max-width: 820px) {
  .lg-opt { min-height: 42px; }
}

/* Clear-filters button (services page). Icon-only on phone, icon + label on desktop. */
.lg-clearbtn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 46px; padding: 0 14px;
  background: #fff; border: 1px solid var(--lg-border); border-radius: 10px; cursor: pointer;
  color: var(--lg-grey); font: 600 0.9rem var(--tw-font-body);
}
.lg-clearbtn:hover { border-color: #e2574c; color: #e2574c; }

/* Paging scrolls the results heading up; clear the fixed nav. */
#available { scroll-margin-top: calc(var(--tw-nav-h) + 16px); }

@media (max-width: 820px) {
  .lg-clearbtn { height: 46px; padding: 0 12px; }
  .lg-clearbtn__label { display: none; }
}

/* ═══ Modal panels must scroll INSIDE, not grow past the screen ═══
   Every modal panel is a flex column with a max-height and a scrollable body — but
   a flex item's `min-height` defaults to `auto` (= its content size), so the body
   refused to shrink, grew to full content height, and pushed the footer buttons off
   the bottom of the phone. `min-height: 0` is what lets the inner scroll engage.
   Heights also move vh → dvh: on mobile, `vh` counts the browser chrome that isn't
   actually visible, so 88vh already overflows the real viewport. */
.tw-modal__panel { max-height: 88dvh; }
.tw-modal__hd, .tw-modal__ft { flex: 0 0 auto; }
.tw-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.wz-modal, .wz-peteditor__panel { max-height: 92dvh; }
.wz-body, .wz-peteditor__body { flex: 1 1 auto; min-height: 0; }
.wz-foot, .wz-peteditor__foot { flex: 0 0 auto; }

/* Keep the action row clear of the home indicator / gesture bar. */
@media (max-width: 820px) {
  .tw-modal__ft { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .wz-foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .lg-sheet__foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ═══ Floating widgets stack — chat ▸ notifications ▸ coupon ═══
   These were three hardcoded `bottom` values, and the phone override
   (`@media (max-width: 520px) { .tw-cfloat { bottom: 82px } }`) was written when
   only chat + coupon existed — so on a phone the coupon float landed on top of the
   notification float at bottom:88px and hid it. Derive each slot from the one below
   it, so a new float can never collide with an existing one. */
:root {
  --tw-float-edge: 20px;   /* distance from the screen bottom to the first float */
  --tw-float-gap: 12px;    /* breathing room between floats */
  --tw-float-1: 58px;      /* chat button  (52px on phones) */
  --tw-float-2: 52px;      /* notif button */
}
.tw-chat  { bottom: var(--tw-float-edge); }
.tw-notif { bottom: calc(var(--tw-float-edge) + var(--tw-float-1) + var(--tw-float-gap)); }
.tw-cfloat {
  bottom: calc(var(--tw-float-edge) + var(--tw-float-1) + var(--tw-float-2) + (2 * var(--tw-float-gap)));
}

@media (max-width: 520px) {
  :root { --tw-float-edge: 16px; --tw-float-1: 52px; --tw-float-2: 52px; }
  /* Override the old hardcoded phone offset that caused the collision. */
  .tw-cfloat { bottom: calc(var(--tw-float-edge) + var(--tw-float-1) + var(--tw-float-2) + (2 * var(--tw-float-gap))); }
}

/* ═══ Services filter bar overflowed the phone ═══
   The bar is a flex row and .lg-search had `flex: 1 1 auto` with no `min-width: 0`,
   so the input refused to shrink below its intrinsic width. Filter and Clear were
   pushed straight off the right edge — the Clear button was rendered but unreachable.
   On phones the bar wraps: search on its own row, Filter + Clear sharing the next. */
.lg-search { min-width: 0; }
.lg-search input { min-width: 0; }

@media (max-width: 820px) {
  .lg-svcpage__bar { flex-wrap: wrap; gap: 10px; }
  .lg-svcpage__bar .lg-search { flex: 1 1 100%; }
  .lg-filterbtn, .lg-clearbtn { flex: 1 1 0; justify-content: center; min-width: 0; }
  /* There is room for the word now that Clear has half a row to itself. */
  .lg-clearbtn__label { display: inline; }
}

/* Pager: also key the active state off aria-current, so it never depends on the
   class alone surviving a Livewire DOM morph. */
.lg-pager__nav .lg-pager__btn.is-on,
.lg-pager__nav .lg-pager__btn[aria-current="page"] {
  background: var(--brand-primary); border-color: var(--brand-primary);
  color: #fff; -webkit-text-fill-color: #fff; font-weight: 700;
}

/* Reschedule reuses the wizard's calendar (.wz-cal) and slot grid (.wz-tsg) verbatim.
   Only addition: dim a period tab that has no slots, so an empty Evening reads as
   empty before you tap it. */
.wz-tsg__tab.is-empty:not(.is-on) { opacity: 0.45; }
.wz-tsg__tab.is-empty:not(.is-on) small { text-decoration: line-through; }

/* The modal now holds a calendar; give it room on a phone before the body scrolls. */
@media (max-width: 820px) {
  .tw-modal__panel { max-height: 92dvh; }
  .tw-modal__body .wz-cal { margin-bottom: 0.9rem; }
}

/* ═══ Branch switcher on phones ═══
   Collapses to an icon-only pin button (there is no room for the branch name beside
   the logo, language toggle and account), and its menu opens as a bottom sheet so
   long branch names stay readable. */
@media (max-width: 820px) {
  .lg-nav__actions .tw-branch { display: block; width: auto; position: static; }
  .lg-nav__actions .tw-branch__btn {
    width: 38px; height: 38px; min-width: 38px; max-width: none;
    padding: 0; justify-content: center; border-radius: 50%;
  }
  .lg-nav__actions .tw-branch__cur,
  .lg-nav__actions .tw-branch__chev { display: none; }

  .lg-nav__actions .tw-branch__menu {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: 100%; min-width: 0; max-width: none; max-height: 72dvh; overflow-y: auto;
    margin: 0; border-radius: 22px 22px 0 0; border: 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(17, 24, 39, 0.28);
    z-index: 200;
  }
  .lg-nav__actions .tw-branch__hd { padding: 4px 6px 10px; font-size: 0.72rem; }
  .lg-nav__actions .tw-branch__item { padding: 12px 8px; }
}

/* ═══ Branch switcher phone sheet ═══
   The menu lives inside the fixed navbar (a stacking context), so it cannot out-rank
   the floating chat/notification/coupon widgets no matter its z-index. Its scrim is
   therefore the signal for those floats to step aside while the sheet is open. */
.tw-branch__scrim { display: none; }

@media (max-width: 820px) {
  .tw-branch__scrim.is-open {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(15, 27, 61, 0.45); backdrop-filter: blur(2px);
  }
  body:has(.tw-branch__scrim.is-open) .tw-chat,
  body:has(.tw-branch__scrim.is-open) .tw-notif,
  body:has(.tw-branch__scrim.is-open) .tw-cfloat,
  body:has(.tw-branch__scrim.is-open) .wz-sitenotif { display: none !important; }
  body:has(.tw-branch__scrim.is-open) { overflow: hidden; }
}

/* Theme-preview label — floats OVER the page, translucent, so the design being judged
   is fully visible behind it. It is not sticky/solid: a solid bar would push the navbar
   down and hide the very hero the provider is evaluating. */
.tw-previewbar {
  /* Bottom-centre, not top: the top is where the navbar and hero live — the very
     things being judged. The float widgets are hidden in preview, so this corner
     of the viewport is free. */
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2000; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(23, 31, 51, .62);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: 600 0.72rem/1.3 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(10, 16, 30, .3);
}
.tw-previewbar__dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; flex: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .25);
}
@media (max-width: 520px) {
  .tw-previewbar { font-size: 0.66rem; padding: 5px 11px; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
}

/* ═══ Preview mode is READ-ONLY ═══
   The dashboard frames this site cross-origin, so its SameSite=Lax session cookie is
   not sent — Livewire's CSRF check would fail on every interaction and pop a "session
   expired" dialog. Beyond that, a provider "exploring" a preview must not be able to
   create REAL bookings. So: the page scrolls and reads normally, but nothing is
   clickable. Full interaction lives behind "Open full preview" in a first-party tab. */
body.is-preview button,
body.is-preview a,
body.is-preview input,
body.is-preview select,
body.is-preview textarea,
body.is-preview [wire\:click],
body.is-preview .tw-chat,
body.is-preview .tw-notif,
body.is-preview .tw-cfloat {
  pointer-events: none;
}
body.is-preview .tw-chat,
body.is-preview .tw-notif,
body.is-preview .tw-cfloat { display: none !important; }
/* The label has no controls, so it must never intercept a click or a scroll. */
body.is-preview .tw-previewbar,
body.is-preview .tw-previewbar * { pointer-events: none; }

/* ═══ Nav must survive a long-CTA language ═══
   In Arabic the sign-in CTA reads "تسجيل الدخول | إنشاء حساب" — 197px against 130px in
   English — and with a logo-less tenant the brand block also renders badge + full name.
   Together they overflowed a 390px nav and pushed the button off-screen. Phones get the
   short CTA and a logo-only brand; nothing is allowed to grow past the bar. */
.nav-cta__short { display: none; }
.nav-cta__long { display: inline; }

.lg-nav, .tw-navbar { min-width: 0; }
.lg-nav__actions, .tw-navbar__actions { min-width: 0; }

@media (max-width: 820px) {
  .nav-cta__long { display: none; }
  .nav-cta__short { display: inline; }

  /* The badge/logo identifies the brand; the name is right there in the hero. */
  .lg-nav__brandname, .tw-navbar__brandname { display: none; }

  .lg-nav__actions .lg-btn-primary,
  .tw-navbar .tw-btn-primary {
    flex: 0 1 auto; min-width: 0; max-width: 46vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ═══ Hero images: never crop the subject ═══
   One uploaded image has to fill two slots whose aspect ratios differ by 3.4× —
   ~1.58:1 on desktop, ~0.47:1 on a phone. `cover` therefore threw away up to 70% of a
   landscape photo's width on mobile and kept whatever happened to sit in the middle,
   which is how a van ends up sliced in half.

   Instead: CONTAIN the real image so all of it survives at any ratio, and fill the
   leftover space with a blurred, zoomed copy of itself. Nothing is ever cut off, and
   the provider does not have to do anything.

   The element paints nothing itself (`background-size: 0 0`) — it only carries the
   background-image that both pseudo-elements inherit. */
.lg-hero__slide {
  background-size: 0 0;
  overflow: hidden;
}
.lg-hero__slide::before,
.lg-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-position: center;
}
/* Blurred fill. Scaled up so the blur's soft edges never reach the frame. */
.lg-hero__slide::before {
  background-size: cover;
  filter: blur(28px) saturate(1.25) brightness(0.92);
  transform: scale(1.25);
}
/* The image itself, whole. */
.lg-hero__slide::after {
  background-size: contain;
  background-repeat: no-repeat;
}

/* Global Livewire loading feedback — top progress bar + pressed-control spinner. */
.wz-load{ position:fixed; top:0; inset-inline-start:0; height:3px; width:0; z-index:2000; background:var(--brand-primary); box-shadow:0 0 10px var(--brand-primary); opacity:0; pointer-events:none; border-end-end-radius:3px; }
.wz-load.is-on{ width:92%; opacity:1; transition:width 8s cubic-bezier(.1,.7,.2,1), opacity .12s ease; }
.wz-load.is-done{ width:100%; opacity:0; transition:width .2s ease, opacity .35s ease .12s; }
.wz-busy{ position:relative; pointer-events:none; opacity:.9; }
.wz-busy::after{ content:''; position:absolute; top:50%; inset-inline-end:.7rem; width:15px; height:15px; margin-top:-7.5px; border:2px solid currentColor; border-top-color:transparent; border-radius:999px; opacity:.85; animation:wz-spin .6s linear infinite; }
/* Icon-only controls: spinner replaces the icon, centered — never crammed at the edge. */
.wz-busy--icon{ position:relative; pointer-events:none; }
.wz-busy--icon > *{ opacity:0; }
.wz-busy--icon::after{ content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; transform:translate(-50%,-50%); border:2px solid currentColor; border-top-color:transparent; border-radius:999px; animation:wz-spin .6s linear infinite; }
@keyframes wz-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .wz-load.is-on{ transition:opacity .12s ease; } .wz-busy::after,.wz-busy--icon::after{ animation:none; } }

.tw-offer-card__scope{ font-size:.72rem; color:var(--tw-text-secondary); display:block; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tw-cfloat__scope{ font-size:.75rem; color:var(--tw-text-secondary); margin:.35rem 0 0; }