/* ==========================================================================
   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, 26, 58, 127), 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 <img> 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))); }
/* Every image overlay lives in ONE row so they can never collide. Each used to be its own
   absolutely-positioned element and the % badge (inset-inline-end .75rem) and the favourite
   (right 10px) both landed top-right, the heart sitting on the discount. Flow beats stacking:
   the category leads, the badge + heart cluster ends, and the gap is guaranteed at any width. */
.tw-service__ovl { position: absolute; inset-block-start: 0.75rem; inset-inline: 0.75rem; display: flex; align-items: center; gap: 0.5rem; z-index: 2; pointer-events: none; }
.tw-service__ovl > *, .tw-service__ovl-end > * { pointer-events: auto; }
.tw-service__ovl-end { display: flex; align-items: center; gap: 0.4rem; margin-inline-start: auto; flex: 0 0 auto; }
/* Long category names give up width to the cluster rather than pushing it off the card. */
.tw-service__cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 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 { flex: 0 0 auto; background: var(--tw-danger); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.22rem 0.55rem; border-radius: 8px; white-space: nowrap; }
.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; }
/* Boarding "Starting at": its own line above the figure, never inline with it, so the
   figure keeps its order in Arabic. */
.tw-price__from { display: block; margin-bottom: 0.25rem; font-family: var(--tw-font-body); font-weight: 600; font-size: 0.7rem; color: var(--tw-text-muted); }
.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); }
/* iOS Safari gives input[type=date] a native intrinsic min-width that ignores width:100%, so in a
   two-up .wz-row (Date of birth | Gender) it spilled out of its cell and under the neighbour.
   Dropping the native appearance lets it shrink to its column; min-height keeps an EMPTY date
   (no value text to size it) the same height as the text inputs beside it. */
.wz-input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; min-height:calc(1.6em + 1.4rem + 2px); }
.wz-input[type="date"]::-webkit-date-and-time-value{ text-align:start; }
.wz-row{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-start; }
.wz-row > *{ flex:1 1 150px; min-width:0; }
/* flex-basis 0 (plain `flex:1`) can never wrap, so three fields squeezed to ~104px on a
   360px phone. A real basis lets the row break instead. */
.wz-row > .wz-field:has(.wz-combo__other){ flex-basis:100%; }
/* "Other" adds a second input under the select, so the field outgrows its neighbour and
   left an ~82px hole beside it at 390px. Full width while that input is showing. */

.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-field--miss .wz-pills{ border:1.5px dashed #e07a5f; background:#fdf3f0; border-radius:14px; padding:.6rem; }
.wz-pills__hint{ width:100%; font-size:.78rem; font-weight:600; color:#c2410c; }
.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); }
/* Shown in place of "Sent to … · Resend" once the code is proven and only signup details remain. */
.wz-otp-ok { margin: .55rem 0 0; font-size: .85rem; font-weight: 700; color: #0f9d58; }
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); }
/* Account banner: from any other tab, the only signal is a count on one of five
   chips. Same brand-tinted language as the landing card, one level quieter. */
.acc-alert{ display:flex; align-items:center; gap:.85rem; padding:.9rem 1.05rem; margin-bottom:1rem;
  border:1px solid var(--tw-primary-border); border-radius:var(--tw-r-md);
  background:linear-gradient(105deg, var(--tw-primary-tint-strong), var(--tw-primary-tint) 60%, var(--tw-surface)); }
.acc-alert__ic{ flex:none; width:38px; height:38px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--tw-primary-tint-strong); color:var(--brand-primary);
  box-shadow:0 0 0 2px var(--tw-surface), 0 0 0 3px var(--tw-primary-border); }
.acc-alert__ic img{ width:100%; height:100%; object-fit:cover; display:block; }
.acc-alert__initial{ font-family:var(--tw-font-brand); font-size:1rem; font-weight:700; line-height:1; }
.acc-alert__b{ flex:1; min-width:0; }
.acc-alert__t{ font-family:var(--tw-font-brand); font-weight:700; font-size:.95rem; color:var(--tw-text); text-wrap:balance; }
.acc-alert__s{ font-size:.81rem; color:var(--tw-ink-soft); margin-top:.15rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .55rem; }
.acc-alert__cta{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding:0 1.05rem; border-radius:var(--tw-r-sm); border:0; cursor:pointer;
  background:var(--brand-primary); color:#fff; font-family:var(--tw-font-brand); font-weight:700;
  font-size:.9rem; white-space:nowrap; box-shadow:var(--tw-shadow-card);
  transition:box-shadow .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1); }
.acc-alert__cta:hover{ box-shadow:var(--tw-shadow-hover); transform:translateY(-1px); }
.acc-alert__cta:active{ transform:translateY(0); }
.acc-alert__cta:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }
@media(max-width:520px){ .acc-alert{ flex-wrap:wrap; } .acc-alert__cta{ flex:1 1 100%; } }
@media(prefers-reduced-motion:reduce){ .acc-alert__cta{ transition:none; } .acc-alert__cta:hover{ transform:none; } }

:root{
  /* Body text on a brand-tinted surface. --tw-text-secondary (#6b7a8d) measures 3.8:1
     over an 8% brand tint — under the 4.5:1 floor, and the exact failure that makes a
     design "hard to read but nobody can say why". This clears 5.6:1 on every brand hue
     tested (hot pink through navy) while staying clearly subordinate to --tw-text. */
  --tw-ink-soft: #525f78;
}

/* ---- Abandoned-checkout recovery ------------------------------------------
   Palette decision: the TENANT's own brand colour, never a warning colour. Every
   surface here renders under an arbitrary per-tenant identity (this storefront is
   hot pink; the next is navy), and an amber alert bar on someone else's brand reads
   as a bug bolted on, not as design. Nothing has gone wrong — a booking the customer
   nearly made, often holding their own credit, is the friendliest thing on the page.
   Green appears exactly once, on money coming back, so it reads as meaning.
   No side stripes: state is carried by surface, chip and content. */

/* Landing: a FAB in the right-hand rail that expands into a panel — the same shape
   as the claimed-coupon float, so the storefront has one floating language rather
   than two competing ones.
   Rail order: chat(20/z1500) → bell(88/z1490) → coupon(156/z1499) → this(224/z1488).
   Under all of them, and far under the wizard overlay (z2000) so opening the booking
   flow covers it instead of fighting it. */
.tw-rfloat{ position:fixed; z-index:1488; inset-inline-end:20px;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

/* The tooltip and the FAB share a row so the label slides out beside the button
   rather than on top of it; `align-items:center` keeps it on the button's axis. */
.tw-rfloat__row{ display:flex; align-items:center; gap:8px; }

/* Ink, not brand: a tooltip has to stay legible against an arbitrary tenant hue, and
   white-on-ink is 13.9:1 at every one of them. --tip-x is the slide distance, flipped
   for RTL in one place so the reveal rules never need a direction of their own. */
.tw-rfloat__tip{ --tip-x:6px; position:relative; max-width:190px; padding:.4rem .62rem;
  border-radius:10px; background:var(--tw-text); color:#fff; text-wrap:balance;
  font-family:var(--tw-font-brand); font-weight:600; font-size:.78rem; line-height:1.35;
  box-shadow:0 8px 20px -8px rgba(15,23,42,.45); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateX(var(--tip-x));
  transition:opacity .24s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1),
             visibility .24s; }
html[dir="rtl"] .tw-rfloat__tip{ --tip-x:-6px; }
.tw-rfloat__tip::after{ content:''; position:absolute; inset-block-start:50%; inset-inline-end:-3px;
  width:8px; height:8px; background:var(--tw-text); transform:translateY(-50%) rotate(45deg); }
.tw-rfloat__tip.is-on,
.tw-rfloat__row:hover .tw-rfloat__tip,
.tw-rfloat__row:has(.tw-rfloat__btn:focus-visible) .tw-rfloat__tip{
  --tip-x:0px; opacity:1; visibility:visible; }

/* One soft ring shortly after load — it draws the eye to the button the label is
   explaining. Two pulses, then done; it is an introduction, not an alarm. Bound to the
   button rather than to the label's state, so it plays once on arrival instead of
   replaying every time the panel is closed. */
.tw-rfloat__btn{ animation:twRfPulse 1.7s ease-out .9s 2; }
@keyframes twRfPulse{
  0%{ box-shadow:var(--tw-shadow-md), 0 0 0 0 rgba(var(--brand-primary-rgb, 26, 58, 127), .42); }
  70%{ box-shadow:var(--tw-shadow-md), 0 0 0 13px rgba(var(--brand-primary-rgb, 26, 58, 127), 0); }
  100%{ box-shadow:var(--tw-shadow-md), 0 0 0 0 rgba(var(--brand-primary-rgb, 26, 58, 127), 0); }
}

.tw-rfloat__btn{ position:relative; width:48px; height:48px; border:0; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; color:#fff;
  background:var(--brand-primary); box-shadow:var(--tw-shadow-md);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1); }
.tw-rfloat__btn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--tw-shadow-hover); }
.tw-rfloat__btn:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }
.tw-rfloat__count{ position:absolute; inset-block-start:-3px; inset-inline-end:-3px;
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  /* Ink, not brand, on the white disc: brand-on-white is 3.53:1 for this tenant's pink
     and fails for any mid-tone hue — and this is 10px text, so it owes 4.5:1. The 2px
     brand ring carries the brand instead, which works at every hue. */
  background:var(--tw-surface); color:var(--tw-text); border:2px solid var(--brand-primary);
  font:800 10px var(--tw-font-brand); display:grid; place-items:center; }

/* OPAQUE base under the tint. --tw-primary-tint* are rgba(), so a gradient built only
   from them is see-through — as a float that meant the page's own headings and inputs
   showed straight through the card. The solid --tw-surface layer underneath fixes it. */
.tw-rfloat__card{ width:min(88vw, 320px);
  background:linear-gradient(160deg, var(--tw-primary-tint-strong), transparent 62%), var(--tw-surface);
  border:1px solid var(--tw-primary-border); border-radius:16px;
  box-shadow:0 20px 46px -14px rgba(15,23,42,.34); padding:14px;
  display:flex; flex-direction:column; gap:.6rem; }

.tw-rfloat__hd{ display:flex; align-items:flex-start; gap:.6rem; }
.tw-rfloat__pet{ flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--tw-primary-tint-strong); color:var(--brand-primary);
  box-shadow:0 0 0 2px var(--tw-surface), 0 0 0 3px var(--tw-primary-border); }
.tw-rfloat__pet img{ width:100%; height:100%; object-fit:cover; display:block; }
.tw-rfloat__initial{ font-family:var(--tw-font-brand); font-size:1rem; font-weight:700; line-height:1; }
.tw-rfloat__t{ flex:1; min-width:0; margin:0; font-family:var(--tw-font-brand); font-weight:700;
  font-size:.92rem; line-height:1.34; color:var(--tw-text); text-wrap:balance; }
.tw-rfloat__x{ flex:none; width:28px; height:28px; margin:-4px -4px 0 0; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--tw-ink-soft); cursor:pointer;
  transition:background .18s cubic-bezier(.16,1,.3,1), color .18s; }
.tw-rfloat__x:hover{ background:var(--tw-primary-tint-strong); color:var(--tw-text); }
.tw-rfloat__x:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }

.tw-rfloat__credit{ align-self:flex-start; display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .58rem; border-radius:999px; background:rgba(16,185,129,.14);
  color:#046c50; font-weight:700; font-size:.78rem; }
.tw-rfloat__note{ margin:0; font-size:.8rem; line-height:1.45; color:var(--tw-ink-soft); }

.tw-rfloat__cta{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:0 1rem; border:0; border-radius:var(--tw-r-sm); cursor:pointer;
  background:var(--brand-primary); color:#fff; font-family:var(--tw-font-brand);
  font-weight:700; font-size:.9rem; box-shadow:var(--tw-shadow-card);
  transition:box-shadow .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1); }
.tw-rfloat__cta:hover{ box-shadow:var(--tw-shadow-hover); transform:translateY(-1px); }
.tw-rfloat__cta:active{ transform:translateY(0); }
.tw-rfloat__cta[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.tw-rfloat__arw{ display:inline-flex; transition:transform .22s cubic-bezier(.16,1,.3,1); }
.tw-rfloat__cta:hover .tw-rfloat__arw{ transform:translateX(3px); }
.tw-rfloat__alt{ align-self:center; display:inline-flex; align-items:center; min-height:36px;
  padding:0 .6rem; border-radius:var(--tw-r-sm); font-size:.82rem; font-weight:600;
  color:var(--tw-ink-soft); text-decoration:none;
  transition:color .18s cubic-bezier(.16,1,.3,1), background .18s; }
.tw-rfloat__alt:hover{ color:var(--brand-primary); background:var(--tw-primary-tint); }
.tw-rfloat__cta:focus-visible,.tw-rfloat__alt:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }

/* Phone: the rail is shorter, and the panel must not run under the chat FAB. */
/* Phone: the coupon float moves to 82px at this exact breakpoint and the chat
   button grows to 52px, so the rail re-stacks — follow it rather than guess. */
@media(max-width:520px){
  .tw-rfloat__card{ width:min(90vw, 300px); }
  .tw-rfloat__tip{ max-width:min(58vw, 170px); }
}
@media(prefers-reduced-motion:reduce){
  .tw-rfloat__btn,.tw-rfloat__cta,.tw-rfloat__arw,.tw-rfloat__alt,.tw-rfloat__x{ transition:none; }
  .tw-rfloat__btn:hover,.tw-rfloat__cta:hover{ transform:none; }
  .tw-rfloat__cta:hover .tw-rfloat__arw{ transform:none; }
  /* The label still appears — it carries the meaning. Only the travel and the ring go. */
  .tw-rfloat__tip{ --tip-x:0px; transition:opacity .01ms, visibility .01ms; }
  .tw-rfloat__btn{ animation:none; }
}

/* Account list: the same language, one level quieter. */
.acc-chip__dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-primary); flex:none; }

/* State is the surface + the chip. Not a stripe. */
.acc-bk--todo{ background:linear-gradient(180deg, var(--tw-primary-tint), var(--tw-surface) 62%);
  border-color:var(--tw-primary-border); }
.acc-badge--todo{ background:var(--tw-primary-tint-strong); color:var(--tw-text); }

.acc-rebook{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem .9rem;
  padding:.85rem 1.1rem; border-top:1px solid var(--tw-primary-border); }
.acc-rebook__note{ flex:1 1 15rem; min-width:0; display:flex; flex-direction:column; gap:.3rem;
  font-size:.83rem; color:var(--tw-ink-soft); }
.acc-rebook__warn{ color:var(--tw-text); font-weight:600; }
.acc-rebook__back{ align-self:flex-start; display:inline-flex; align-items:center; gap:.32rem;
  padding:.2rem .58rem; border-radius:999px; background:rgba(16,185,129,.14);
  color:#046c50; font-weight:700; font-size:.79rem; }
.acc-rebook__slot{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--tw-text); }
.acc-rebook__cta{ margin-inline-start:auto; flex:none; display:inline-flex; align-items:center;
  justify-content:center; gap:.45rem; min-height:44px; padding:0 1.15rem; border:0;
  border-radius:var(--tw-r-sm); cursor:pointer; background:var(--brand-primary); color:#fff;
  font-family:var(--tw-font-brand); font-weight:700; font-size:.9rem; white-space:nowrap;
  text-decoration:none; box-shadow:var(--tw-shadow-card);
  transition:box-shadow .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1); }
.acc-rebook__cta:hover{ box-shadow:var(--tw-shadow-hover); transform:translateY(-1px); }
.acc-rebook__cta:active{ transform:translateY(0); }
.acc-rebook__cta[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.acc-rebook__cta:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }
.acc-rebook__arw{ display:inline-flex; transition:transform .22s cubic-bezier(.16,1,.3,1); }
.acc-rebook__cta:hover .acc-rebook__arw{ transform:translateX(3px); }

@media(max-width:520px){
  .acc-rebook__cta{ width:100%; margin-inline-start:0; }
}
@media(prefers-reduced-motion:reduce){
  .acc-rebook__cta,.acc-rebook__arw{ transition:none; }
  .acc-rebook__cta:hover{ transform:none; }
  .acc-rebook__cta:hover .acc-rebook__arw{ transform:none; }
}

@media(max-width:520px){
  .acc-alert{ flex-wrap:wrap; }
  .acc-alert__cta{ width:100%; }
  .acc-rebook__cta{ width:100%; justify-content:center; margin-inline-start:0; }
}
@media(prefers-reduced-motion:reduce){
  .acc-alert__cta,.acc-rebook__cta,.acc-rebook__cta .arw{ transition:none; }
  .acc-alert__cta:hover,.acc-rebook__cta:hover{ transform:none; }
  .acc-rebook__cta:hover .arw{ transform:none; }
}
.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; }
/* An unfinished checkout: the customer's own brand tint, because it is a to-do they
   can still act on — not the red of a booking that is over. Ink on tint, so it holds
   its contrast at any tenant hue (brand-on-tint drops to 3.5:1 on a mid-tone brand). */
.tw-badge--todo { color: var(--tw-text); background: var(--tw-primary-tint-strong); }

/* ── 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, 26, 58, 127), .07); border: 1px solid rgba(var(--brand-primary-rgb, 26, 58, 127), .18); border-radius: 10px; padding: 8px 13px; cursor: pointer; }
.wz-view-agree:hover { background: rgba(var(--brand-primary-rgb, 26, 58, 127), .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; }
/* "Use my current location" — sits between the place search and the map. */
.wz-map__locate { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; padding: .5rem .9rem; border: 1px solid var(--tw-border); border-radius: 999px; background: var(--tw-surface); color: var(--brand-primary); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.wz-map__locate:hover { border-color: var(--brand-primary); }
.wz-map__locate:disabled { opacity: .6; cursor: progress; }
.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, 26, 58, 127), .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; }
/* Wraps rather than squeezes: this footer can carry three actions (cancel, complete, done) and
   a flex row with no wrap shrinks them until their labels break into two lines. */
.tw-modal__ft { display: flex; flex-wrap: wrap; 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; white-space: nowrap; }
.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, .94); color: #8a94a6; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 27, 61, .16); transition: transform .16s cubic-bezier(.22,1,.36,1), color .16s ease, box-shadow .16s ease; z-index: 2; }
.tw-fav-heart svg { width: 17px; height: 17px; transition: transform .18s cubic-bezier(.22,1,.36,1), fill .15s ease; }
.tw-fav-heart:hover { transform: scale(1.08); color: #ef5a7a; box-shadow: 0 4px 12px rgba(15, 27, 61, .20); }
.tw-fav-heart:active svg { transform: scale(0.88); }
.tw-fav-heart.is-on { color: #ef4d6e; }
.tw-fav-heart.is-on svg { fill: currentColor; transform: scale(1.06); }
[dir="rtl"] .tw-fav-heart { right: auto; left: 10px; }
/* Inside the service card the heart is one item in the overlay row, not a pinned corner — the
   row places it. Scoped so any other surface using .tw-fav-heart keeps its own positioning. */
.tw-service__ovl .tw-fav-heart { position: static; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .tw-fav-heart { transition: none; } .tw-fav-heart:hover { transform: none; } }
.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, 26, 58, 127), .07); border: 1px solid rgba(var(--brand-primary-rgb, 26, 58, 127), .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, 26, 58, 127), .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, 26, 58, 127), .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, 26, 58, 127), .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, 26, 58, 127), .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, 26, 58, 127), .07); border: 1px dashed rgba(var(--brand-primary-rgb, 26, 58, 127), .35); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.wz-upload:hover { background: rgba(var(--brand-primary-rgb, 26, 58, 127), .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, 26, 58, 127), .07); border: 1px solid rgba(var(--brand-primary-rgb, 26, 58, 127), .18); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.wz-chip-btn:hover { background: rgba(var(--brand-primary-rgb, 26, 58, 127), .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, 26, 58, 127), .12); color: var(--brand-primary); }
.wz-seg--sub button.is-sel .wz-count { background: rgba(var(--brand-primary-rgb, 26, 58, 127), .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, 26, 58, 127), .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; }
/* Room gallery: native scroll-snap strip (no nested buttons — the card itself is a <button>). */
.wz-room__track { display: flex; width: 100%; height: 100%; scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; }
.wz-room__track::-webkit-scrollbar { display: none; }
.wz-room__slide { position: relative; display: block; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; overflow: hidden; background: var(--tw-surface-mute, #f1f4f8); }
/* Nothing is cropped: the photo is contained, and a blurred, zoomed copy of the same
   file fills the leftover space so the band still reads as full-bleed. Two classes,
   because `.wz-room__img img` above would otherwise win on specificity. */
.wz-room__img .wz-room__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.wz-room__img .wz-room__shot--blur { object-fit: cover; transform: scale(1.18); filter: blur(16px) saturate(1.1); z-index: 0; }
.wz-room__dots { position: absolute; inset-inline: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.wz-room__dot { width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.wz-room__dot.is-active { background: #fff; }
.wz-room__desc { margin-top: 2px; font-size: .78rem; line-height: 1.35; color: var(--tw-text-mute, #6b7a8d); }
.wz-room__min { margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--tw-text-mute, #6b7a8d); }

/* ══════════════════════════════════════════════════════════════
   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; }

/* "View full" trigger: a SIBLING of the room card's own <button>, not nested
   inside it (a nested <button> would be invalid HTML — see the gallery note
   above). .wz-room-wrap is now the .wz-rooms grid cell; .wz-room still fills
   it exactly as before. */
.wz-room-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }

/* Gallery paging arrows overlaid on the card's image band. Siblings of the
   card <button>, absolutely positioned over it — .wz-room-wrap is the
   containing block. Revealed on hover/focus so a 20-card grid stays calm, and
   hidden entirely on touch, where the strip is swipeable and arrows are just
   clutter. Vertically centred on the 128px image band, not the whole card. */
.wz-room__nav { position: absolute; top: 64px; z-index: 2; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.wz-room__nav--prev { inset-inline-start: 8px; }
.wz-room__nav--next { inset-inline-end: 8px; }
.wz-room__nav:hover { background: rgba(15,23,42,.7); }
.wz-room-wrap:hover .wz-room__nav, .wz-room-wrap:focus-within .wz-room__nav { opacity: 1; }
/* The arrows are RTL-mirrored by inset-inline-*, but their chevron glyphs are
   drawn LTR, so flip the glyph itself under RTL. */
[dir="rtl"] .wz-room__nav svg, [dir="rtl"] .wz-rdetail__nav svg { transform: scaleX(-1); }
@media (hover: none) { .wz-room__nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .wz-room__nav { transition: none; } }
.wz-room-wrap .wz-room { flex: 1; }
.wz-room-more { display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; padding: .5rem .6rem; font-family: var(--tw-font-brand); font-weight: 700; font-size: .76rem; color: var(--brand-primary); background: transparent; border: 1.5px dashed var(--tw-primary-border, rgba(var(--brand-primary-rgb, 26, 58, 127), .35)); border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.wz-room-more:hover { background: var(--tw-primary-tint); border-style: solid; }
.wz-room-more svg { flex-shrink: 0; }

/* Room detail ("View full") modal: nested over the wizard (.wz-overlay is
   z-index:2000 above) — visual language mirrors .wz-overlay/.wz-modal. */
.wz-rdetail-overlay { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 1.5rem; background: rgba(31,43,77,.55); backdrop-filter: blur(3px); }
.wz-rdetail { position: relative; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; background: var(--tw-surface, #fff); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(31,43,77,.5); }
@media (max-width: 560px) { .wz-rdetail-overlay { padding: 0; } .wz-rdetail { max-width: none; max-height: 100vh; height: 100dvh; border-radius: 0; } }
.wz-rdetail__gallery { height: 220px; }
@media (max-width: 560px) { .wz-rdetail__gallery { height: 260px; } }
/* Modal gallery controls. Unlike the card's, these are always visible and
   focusable: the modal has no <button> ancestor, and it is the accessible path
   to the photos that the card's mouse-only arrows deliberately do not provide.
   Sits below .wz-rdetail__x (z-index 2) at the same layer but out of its
   corner. */
.wz-rdetail__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); cursor: pointer; transition: background .15s; }
.wz-rdetail__nav--prev { inset-inline-start: 10px; }
.wz-rdetail__nav--next { inset-inline-end: 10px; }
.wz-rdetail__nav:hover { background: rgba(15,23,42,.7); }
/* .wz-room__dots is pointer-events:none for the card's decorative indicator;
   here the dots are real buttons, so hand pointer events back. */
.wz-rdetail__dots { pointer-events: auto; gap: 6px; bottom: 10px; }
.wz-rdetail__dots .wz-room__dot { width: 7px; height: 7px; padding: 0; border: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wz-rdetail__nav { transition: none; } }
.wz-rdetail__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); transition: background .15s; }
.wz-rdetail__x:hover { background: rgba(15,23,42,.65); }
.wz-rdetail__body { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; }
.wz-rdetail__name { margin: 0 0 2px; font-family: var(--tw-font-brand); font-weight: 800; font-size: 1.15rem; color: var(--tw-text); }
.wz-rdetail__meta { margin: 0 0 .7rem; font-size: .82rem; color: var(--tw-text-mute, #6b7a8d); }
.wz-rdetail__desc { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.55; color: var(--tw-text); white-space: pre-line; }
.wz-rdetail__amenities { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1rem; }
.wz-rdetail__amenity { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tw-text); }
.wz-rdetail__amenity img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.wz-rdetail__amenity-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-rdetail__pricebox { margin-top: 2px; }
.wz-rdetail__foot { padding: 1rem 1.3rem; border-top: 1px solid var(--tw-border-light, #eef1f6); }

/* ══════════════════════════════════════════════════════════════
   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. */
.tw-filters--offers { justify-content:center; margin-bottom:1.4rem; }
.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; 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; 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-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; }
/* Base spinner. Until now the ONLY .wz-spin rule in this file was the
   .wz-modal__loading size override below — no border, no radius, no
   animation — so every <span class="wz-spin"> outside that container (the
   wizard footer's Continue button, the room detail modal's Choose-this-room
   button) rendered as an invisible empty span. @keyframes wz-spin is defined
   further down; keyframe order does not matter. */
.wz-room-more[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.wz-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 999px; animation: wz-spin .6s linear infinite; vertical-align: middle; }
.wz-spin--sm { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .wz-spin { animation: none; } }
.wz-modal__loading .wz-spin { width: 38px; height: 38px; border-width: 3px; }

/* ── Customer notification bell (booking-status updates) ─────────────────── */
.tw-notif { position: fixed; 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; }

/* Reschedule reuses the wizard's calendar (.wz-cal/.wz-day) and slot grid (.wz-tsg).
   Dim a period tab with no slots so an empty Evening reads as empty before you tap. */
.wz-tsg__tab.is-empty:not(.is-on) { opacity: .45; }
.wz-tsg__tab.is-empty:not(.is-on) small { text-decoration: line-through; }

/* A flex item's min-height defaults to its content size, so the modal body refused to
   shrink and pushed the footer buttons off-screen. min-height:0 lets the body scroll. */
.tw-modal__panel { max-height: 92dvh; }
.tw-modal__hd, .tw-modal__ft { flex: 0 0 auto; }
.tw-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 820px) {
  .tw-modal__ft { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ═══ 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. */
.tw-hero__slide {
  background-size: 0 0;
  overflow: hidden;
}
.tw-hero__slide::before,
.tw-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. */
.tw-hero__slide::before {
  background-size: cover;
  filter: blur(28px) saturate(1.25) brightness(0.92);
  transform: scale(1.25);
}
/* The image itself, whole. */
.tw-hero__slide::after {
  background-size: contain;
  background-repeat: no-repeat;
}

/* Livewire loading feedback — pressed-control spinner only; the top progress bar was removed. */
.wz-busy{ position:relative; pointer-events:none; opacity:.9; }
/* Set while a redirecting action (sign-in, booking placed) waits for the next page: nothing on the
   old page may be tapped again — see holdUntilUnload() in theme.js. */
html.wz-leaving body{ pointer-events:none; cursor:progress; }
.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-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; }

/* ── Searchable combobox (breed / area) — WEB-1401 ─────────────────── */
.wz-combo { position: relative; }
.wz-combo__control { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: start; cursor: pointer; }
.wz-combo__control:disabled { opacity: .55; cursor: not-allowed; }
.wz-combo__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-combo__value.is-ph { color: var(--tw-text-muted); }
.wz-combo__caret { flex: none; color: var(--tw-text-muted); }

.wz-combo__panel { position: absolute; z-index: 60; top: calc(100% + 6px); inset-inline-start: 0; width: 100%; max-height: 300px; display: flex; flex-direction: column; overflow: hidden; padding: .4rem; background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(var(--brand-primary-rgb, 26, 58, 127), .32), 0 4px 12px rgba(31, 43, 77, .08); }

.wz-combo__searchwrap { position: relative; padding: .15rem .15rem .4rem; }
.wz-combo__searchwrap svg { position: absolute; inset-inline-start: .75rem; top: calc(50% - .2rem); transform: translateY(-50%); color: var(--tw-text-muted); }
.wz-combo__search { width: 100%; font: inherit; font-size: .92rem; color: var(--tw-text); padding: .55rem .8rem .55rem 2.2rem; border: 1px solid var(--tw-border); border-radius: 10px; background: var(--tw-surface-mute); }
html[dir="rtl"] .wz-combo__search { padding: .55rem 2.2rem .55rem .8rem; }
.wz-combo__search:focus { outline: none; border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 3px var(--tw-primary-tint); }

.wz-combo__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.wz-combo__item { padding: .5rem .7rem; border-radius: 9px; font-size: .92rem; color: var(--tw-text); cursor: pointer; }
.wz-combo__item.is-active { background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-combo__item--other { margin-top: .25rem; border-top: 1px solid var(--tw-border); border-radius: 0 0 9px 9px; font-weight: 700; }
.wz-combo__item.is-sel { background: var(--tw-primary-tint); color: var(--brand-primary); }
.wz-combo__empty { padding: .6rem .7rem; font-size: .85rem; color: var(--tw-text-muted); }
.wz-combo__other { margin-top: .45rem; }

@media (prefers-reduced-motion: reduce) {
  .wz-combo__panel { transition: none; }
}

/* ── Chat action cards ────────────────────────────────────────────────────
   Rich cards the salon sends into the thread (times / payment / report card /
   package / reminder / location) plus the assistant's own option cards. They
   live in the incoming-message slot, so they inherit its side and its tail,
   but drop the bubble's padded background for their own surface.
   Colour: brand carries the icon chip and the single primary CTA only. Labels
   and amounts stay on --tw-text so a pale tenant brand can never make the
   card's most important number hard to read.
   ------------------------------------------------------------------------ */
.tw-msg.is-card { max-width: 92%; }
.tw-msg.is-card .tw-msg__t { padding-inline-start: 6px; }

.tw-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-r-md, 14px);
  border-end-start-radius: 4px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.tw-card__hd { display: flex; align-items: center; gap: 8px; }
.tw-card__ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--tw-primary-tint); color: var(--brand-primary);
}
.tw-card__t {
  font-family: var(--tw-font-brand);
  font-size: .84rem; font-weight: 700; line-height: 1.3;
  color: var(--tw-text); min-width: 0; overflow-wrap: anywhere;
}

.tw-card__amt {
  margin: -2px 0 0;
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tw-text);
}
.tw-card__x {
  margin: 0; font-size: .85rem; line-height: 1.45; color: var(--tw-text);
  white-space: pre-line; overflow-wrap: anywhere;
}
.tw-card__s {
  margin: 0; font-size: .75rem; line-height: 1.45; color: var(--tw-text-secondary);
  overflow-wrap: anywhere;
}

/* Options: one per row. A choice is a full-width target — thumbs, not cursors. */
.tw-card__opts { display: flex; flex-direction: column; gap: 6px; }
.tw-card__opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 0; padding: 9px 12px;
  font: inherit; font-size: .82rem; font-weight: 600; text-align: start;
  color: var(--tw-text);
  background: var(--tw-surface-mute);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-r-sm, 10px);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
/* Label over description, not beside it: in a ~340px widget a side-by-side desc
   collapses to an ellipsis that tells the customer nothing. */
.tw-card__opt-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tw-card__opt-l { overflow-wrap: anywhere; }
.tw-card__opt-d {
  font-size: .7rem; font-weight: 500; line-height: 1.35; color: var(--tw-text-secondary);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tw-card__opt-ok { flex: 0 0 auto; color: var(--tw-success); }
.tw-card__opt-go { flex: 0 0 auto; color: var(--tw-text-muted, #9ca5b4); }
[dir="rtl"] .tw-card__opt-go { transform: scaleX(-1); }
button.tw-card__opt:hover .tw-card__opt-go { color: var(--brand-primary); }

button.tw-card__opt:hover {
  background: var(--tw-primary-tint);
  border-color: var(--tw-primary-border);
  color: var(--brand-primary);
}
button.tw-card__opt:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
button.tw-card__opt:disabled { opacity: .55; cursor: progress; }

/* Already answered, or informational by nature (a legacy slot, a wizard step this
   channel does not drive). Readable, and honest about not being a button. */
.tw-card__opt.is-static { cursor: default; background: var(--tw-surface); color: var(--tw-text-secondary); }
.tw-card__opt.is-chosen {
  background: var(--tw-primary-tint);
  border-color: var(--tw-primary-border);
  color: var(--tw-text);
}

/* The single primary action. Same gradient as the send button so "the brand's
   main action" looks the same everywhere in the widget. */
.tw-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: 10px 14px;
  border-radius: var(--tw-r-sm, 10px);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary)));
  color: #fff; font-weight: 700; font-size: .84rem; text-decoration: none;
  transition: filter .16s ease;
}
.tw-card__cta:hover { filter: brightness(1.07); }
.tw-card__cta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.tw-card__done {
  display: flex; align-items: center; gap: .35rem;
  margin: 0; font-size: .75rem; font-weight: 600; color: var(--tw-success);
}

@media (prefers-reduced-motion: reduce) {
  .tw-card__opt, .tw-card__cta { transition: none; }
}

/* ==========================================================================
   Service-category chips — horizontal, tappable filter that drives $category.
   ========================================================================== */
.tw-catchips { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; margin-bottom: 1rem; }
.tw-catchips::-webkit-scrollbar { display: none; }
.tw-catchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--tw-surface); border: 1px solid var(--tw-border); color: var(--tw-text); font: 600 0.9rem var(--tw-font-brand); cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tw-catchip svg { width: 17px; height: 17px; flex: 0 0 auto; }
.tw-catchip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.tw-catchip.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--brand-primary) 60%, transparent); }
.tw-catchip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 820px) { .tw-catchips { margin-bottom: 0.85rem; } .tw-catchip { height: 40px; font-size: 0.86rem; } }
@media (prefers-reduced-motion: reduce) { .tw-catchip { transition: none; } }

/* iOS Safari auto-zooms a focused input/select/textarea whose font-size is under 16px.
   The zoom makes the visual viewport narrower than the layout viewport, so the page
   becomes horizontally pannable and stays that way after blur — which is why the pet
   and address editors scrolled sideways on iPhone but never in Chrome. 16px stops it
   at the source; maximum-scale/user-scalable=no would break pinch-zoom instead. */
@media (max-width:560px){
  /* :not(.wz-otp-input) — the OTP boxes are deliberately 1.35rem and already clear the
     threshold; this rule is later in the cascade and would otherwise shrink them. */
  .wz-input:not(.wz-otp-input), .wz-combo__search, .wz-combo__other { font-size:16px; }
}

/* Applied-coupon card — shared by the Pets (first) step and Summary step */
.wz-offer-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: 14px; border: 1px solid #b7f0cb; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); }
.wz-offer-card__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #0f9d58; background: #dcfce7; }
.wz-offer-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wz-offer-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-offer-card__title { font-family: var(--tw-font-brand); font-size: .95rem; font-weight: 800; color: var(--tw-text); }
.wz-offer-card__pill { font-size: .68rem; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 2px 9px; }
.wz-offer-card__sub { margin: 0; font-size: .8rem; color: var(--tw-text-secondary); }
.wz-offer-card__warn { margin: 0; display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: #c2410c; }
.wz-offer-card__warn svg { flex-shrink: 0; }
.wz-offer-card__hint { margin: 0; font-size: .76rem; color: var(--tw-text-muted); }
.wz-offer-card__right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; align-self: center; }
.wz-offer-card__amt { font-family: var(--tw-font-brand); font-size: 1.02rem; font-weight: 800; color: #15803d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-offer-card__remove { border: 0; background: transparent; color: var(--tw-text-secondary); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.wz-offer-card__remove:hover { color: #dc2626; text-decoration: underline; }
.wz-offer-card__x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 0; padding: 0; background: transparent; color: var(--tw-text-muted); cursor: pointer; display: grid; place-items: center; transition: background .18s ease, color .18s ease; }
.wz-offer-card__x:hover { background: rgba(239, 68, 68, .12); color: #dc2626; }
.wz-offer-card.is-na { border-color: var(--tw-border); background: var(--tw-surface); box-shadow: 0 1px 3px rgba(31, 43, 77, .05); }
@media (prefers-reduced-motion: no-preference) { .wz-offer-card { animation: wzOfferIn .28s ease both; } }
@keyframes wzOfferIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Type-ahead combobox (breed): single input, floating panel that escapes modal overflow, match highlight */
.wz-combo__control--ta { display: flex; align-items: center; gap: .4rem; padding: 0; cursor: text; }
.wz-combo__control--ta.is-disabled { opacity: .55; cursor: not-allowed; }
.wz-combo__control--ta:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--tw-primary-tint); }
.wz-combo__tainput { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--tw-text); padding: .7rem .2rem .7rem .9rem; }
html[dir="rtl"] .wz-combo__tainput { padding: .7rem .9rem .7rem .2rem; }
.wz-combo__tainput::placeholder { color: var(--tw-text-muted); }
.wz-combo__control--ta .wz-combo__caret { margin-inline-end: .7rem; transition: transform .18s ease; }
.wz-combo__control--ta .wz-combo__tainput[aria-expanded="true"] ~ .wz-combo__caret { transform: rotate(180deg); }
.wz-combo__panel.is-float { position: fixed; z-index: 2000; max-height: 320px; }
.wz-combo__panel.is-float .wz-combo__list { flex: 1 1 auto; min-height: 0; }
.wz-combo__mark { font-weight: 800; color: var(--brand-primary); background: var(--tw-primary-tint); border-radius: 3px; padding: 0 1px; }


/* ═══ Floating widgets rail — chat ▸ notifications ▸ coupon ▸ unfinished booking ═══
   Two bugs live here, and they are the same bug twice.

   First: three hardcoded `bottom` values, with a phone override
   (`@media (max-width:520px){ .tw-cfloat{ bottom:82px } }`) written back when only
   chat + coupon existed. Once the notification bell arrived at bottom:88px the coupon
   float landed on top of it on every phone and hid it.

   Second: EVERY float in this rail is rendered conditionally — chat needs the
   `chat-support` feature, the bell needs a signed-in customer, the coupon needs a
   claimed coupon, the resume float needs an abandoned checkout. So an offset that
   hardcodes what sits below it does not just risk a collision; it also reserves a slot
   for a float that is usually absent and leaves a visible hole in the stack.

   Both are fixed the same way: each float contributes a slot height that collapses to
   ZERO when that float is not on the page, and every offset is the running total below
   it. Add a new float by giving it a slot var and appending it to the sum — it can
   neither collide with a neighbour nor float above an empty slot. This block is the
   only place in the stylesheet that sets a `bottom` for these elements; keep it that way. */
:root {
  --tw-float-edge: 20px;   /* 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-float-3: 48px;      /* coupon button */

  /* Slot contributions. 0 until the matching float is actually in the DOM. */
  --tw-float-s1: 0px;
  --tw-float-s2: 0px;
  --tw-float-s3: 0px;
}
body:has(.tw-chat)   { --tw-float-s1: calc(var(--tw-float-1) + var(--tw-float-gap)); }
body:has(.tw-notif)  { --tw-float-s2: calc(var(--tw-float-2) + var(--tw-float-gap)); }
body:has(.tw-cfloat) { --tw-float-s3: calc(var(--tw-float-3) + var(--tw-float-gap)); }

.tw-chat   { bottom: var(--tw-float-edge); }
.tw-notif  { bottom: calc(var(--tw-float-edge) + var(--tw-float-s1)); }
.tw-cfloat { bottom: calc(var(--tw-float-edge) + var(--tw-float-s1) + var(--tw-float-s2)); }
.tw-rfloat { inset-block-end: calc(var(--tw-float-edge) + var(--tw-float-s1) + var(--tw-float-s2) + var(--tw-float-s3)); }

/* Phones: a tighter edge and a smaller chat button. The slot vars resolve lazily, so
   the offsets above pick these up on their own — nothing here needs restating. */
@media (max-width: 520px) {
  :root { --tw-float-edge: 16px; --tw-float-1: 52px; }
}