:root {
    --primary-color: #3b9c9c; /* tenant-configurable, see applyTheme() in app.js */
    --primary-dark: #205c5c; /* tenant-configurable */
    /* Derived from --primary-color rather than a second hardcoded neutral — this used to be
       a static #e8f7f6 regardless of the tenant's actual accent color, which mismatched any
       tenant whose color wasn't teal. color-mix() re-derives it live whenever applyTheme()
       changes --primary-color. */
    --primary-light: color-mix(in oklch, var(--primary-color) 11%, white);
    --accent-color: #ffb74d;
    --text-dark: #2c3e3e;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.4);
    --card-radius: 16px;

    /* Marketing landing-page tokens (see landing page/README.md for the source design).
       Only --primary-color/--primary-dark above are tenant-configurable; everything below is
       either fixed site-wide or derived from those two, so any tenant's accent color produces
       a coherent palette without needing more admin-configurable fields. */
    --landing-bg: #ffffff;
    --landing-alt-bg: color-mix(in oklch, var(--primary-color) 6%, white);
    --landing-accent-on-dark: color-mix(in oklch, var(--primary-color) 68%, white);
    --landing-muted: #6b6259;
    --landing-muted-on-dark: #c9beb4;
    --landing-border: rgba(0, 0, 0, 0.12);
    --landing-border-on-dark: rgba(255, 255, 255, 0.14);
    /* Content column cap for large/desktop screens — matches what the gallery section already
       used (the widest value already in this file), so every section now shares one consistent
       reading width instead of some sections capping and others (about/location/footer/nav)
       stretching edge-to-edge on wide monitors. 1200px is the standard "sweet spot" a lot of
       real sites converge on (Bootstrap's container-xl is 1140-1320px, Tailwind's max-w-7xl is
       1280px) — wide enough for a generous 2-column layout, narrow enough to stay comfortable
       to read on a 1440p/4K display. */
    --site-content-width: 1200px;
  }

  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-dark);
    margin: 0;
    overflow-x: hidden;
    position: relative;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
  }

  /* ==========================================================================
     MARKETING LANDING PAGE — recreates landing page/reference.html. Scoped
     entirely under .site-landing (fonts/colors) so the booking/profile/editor
     modal system further down this file (.portal-modal-*) is unaffected.
     ========================================================================== */

  .site-landing {
    font-family: 'Jost', sans-serif;
    background: var(--landing-bg);
    color: var(--text-dark);
  }

  .site-landing h1, .site-landing h2, .site-landing h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
  }

  .site-eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-color);
  }

  .site-eyebrow-on-dark {
    color: var(--landing-accent-on-dark);
  }

  .site-h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 600;
    margin: 0;
    line-height: 1.15;
    color: var(--text-dark);
  }

  .site-h2-on-dark {
    color: #f6f2ed;
  }

  .site-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(40px, 6vw, 64px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .site-btn {
    display: inline-block;
    padding: 16px 34px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: 'Jost', sans-serif;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .site-btn-solid {
    background: var(--primary-color);
    color: #ffffff;
  }

  .site-btn-solid:hover {
    background: var(--primary-dark);
  }

  .site-btn-outline {
    background: transparent;
    border: 1px solid var(--landing-border);
    color: var(--text-dark);
  }

  .site-btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
  }

  /* --- NAV --- */
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 22px clamp(24px, 5vw, 64px);
    box-sizing: border-box;
    /* background-color/background-image kept as separate longhands, not the `background`
       shorthand — transitioning the shorthand across a gradient<->solid-color change left the
       element permanently stuck fully transparent in testing (confirmed: removing the
       transition entirely fixed it instantly). background-color alone interpolates correctly
       as a real color transition; background-image just snaps (gradients aren't
       interpolatable anyway, so there's nothing lost by not animating it). */
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .site-nav.nav-scrolled {
    /* Hardcoded, not var(--landing-bg)/var(--landing-border) — both tokens are fixed
       site-wide already (never touched by applyTheme's dynamic tenant colors), and this
       specific declaration is the target of an active transition. Confirmed in testing:
       transitioning TO a var()-sourced value can leave this element stuck at its pre-transition
       state in at least one Chromium build, while transitioning to a literal value works
       correctly every time — since these two tokens were never actually dynamic, hardcoding
       them here costs nothing and sidesteps that class of bug entirely. */
    background-color: #ffffff;
    background-image: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
  }

  .site-nav-inner {
    /* .site-nav itself stays edge-to-edge (position:fixed, full-width background/blur) — this
       inner row is what actually caps and centers the logo/links/actions on wide screens,
       otherwise they'd stay pinned to the far viewport edges no matter how wide the window
       gets. */
    max-width: var(--site-content-width);
    margin: 0 auto;
    display: grid;
    /* 3-column grid instead of flex+space-between: with unequal-width outer items (a short
       logo vs. a wider profile/CTA/hamburger cluster), space-between's "equal gaps between
       consecutive items" only coincidentally centers the middle item — here it left the nav
       links noticeably closer to the logo than to the actions. A fixed center column centers
       the links as a block regardless of how the outer two compare in width. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .site-nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.25s ease;
    justify-self: start;
  }

  .site-nav.nav-scrolled .site-nav-logo {
    color: #2c3e3e; /* = --text-dark, hardcoded here — see the comment above */
  }

  /* Caps an uploaded logo image to a sane on-brand size regardless of its native dimensions —
     applies inside both .site-nav-logo and .site-footer-logo, wherever renderLogo() puts it. */
  .site-logo-img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }

  .site-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
    justify-self: center;
    /* Materialize ships a global `nav { background-color: ... }` base style (a reddish
       default) that otherwise wins on this bare <nav> tag — this page never wants any nav
       chrome/shadow from that stylesheet, just the plain semantic element. */
    background-color: transparent;
    box-shadow: none;
  }

  .site-nav-links a {
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: #ffffff;
    transition: color 0.25s ease;
  }

  .site-nav.nav-scrolled .site-nav-links a {
    color: #2c3e3e; /* = --text-dark, hardcoded — see comment on .site-nav.nav-scrolled above */
  }

  .site-nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-self: end;
  }

  .site-nav-profile {
    color: #ffffff;
    display: flex;
    transition: color 0.25s ease, opacity 0.2s ease;
  }

  .site-nav-profile:hover { opacity: 0.75; }

  .site-nav.nav-scrolled .site-nav-profile {
    color: #2c3e3e; /* = --text-dark, hardcoded — see comment on .site-nav.nav-scrolled above */
  }

  .site-nav-cta {
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 11px 24px;
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    transition: background 0.15s ease;
  }

  .site-nav-cta:hover { background: var(--primary-dark); }

  .site-nav-hamburger {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    align-items: center;
  }

  .site-nav.nav-scrolled .site-nav-hamburger { color: #2c3e3e; } /* = --text-dark, hardcoded for consistency with the other nav-scrolled color overrides above (this one has no transition, so it wasn't at risk, but keeping the whole group consistent is simpler to reason about) */

  /* Mobile full-screen nav overlay */
  .site-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--landing-bg);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .site-mobile-menu.active { display: flex; }

  .site-mobile-menu a {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    text-decoration: none;
  }

  .site-mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--landing-muted);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
  }

  /* --- HERO (multi-slide carousel, existing heroSlides data/behavior — see app.js) --- */
  .site-hero {
    position: relative;
    height: clamp(600px, 92vh, 880px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .site-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Before its src loads (or if a slide is ever missing an image), show a plain tinted
       fill instead of the browser's default broken-image icon. */
    background: var(--primary-dark);
    transition: opacity 0.5s ease;
  }

  .site-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 40%, var(--primary-dark) 100%);
    opacity: 0.88;
  }

  .site-hero-panel {
    position: relative;
    z-index: 2;
    min-height: 64%;
    box-sizing: border-box;
    padding: 0 clamp(24px, 6vw, 90px) clamp(48px, 7vw, 80px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 20%, var(--primary-dark) 65%);
  }

  .site-hero-panel-inner {
    /* .site-hero-panel stays full-width (its gradient overlay needs to span the whole photo,
       same as the photo itself) — this inner wrapper is what actually caps and centers the
       eyebrow/title/desc/CTA row, same reasoning as .site-nav-inner above. Without it, the text
       stayed pinned to the panel's own left padding while the photo behind it kept stretching
       wider, so on a large monitor the copy looked stranded far off to one side of a very wide
       empty-looking hero. */
    max-width: var(--site-content-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .site-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--landing-accent-on-dark);
  }

  .site-hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(38px, 6.5vw, 76px);
    line-height: 1.08;
    color: #f6f2ed;
    margin: 0;
    max-width: 900px;
  }

  .site-hero-title .serif-sub {
    font-style: italic;
    color: var(--landing-accent-on-dark);
  }

  .site-hero-desc {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
    color: #d9d0c8;
    max-width: 520px;
    margin: 0;
  }

  .site-hero-cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .site-hero .site-btn-outline {
    border-color: rgba(255,255,255,0.5);
    color: #f6f2ed;
  }

  .site-hero .site-btn-outline:hover {
    border-color: #f6f2ed;
  }

  .site-rating-badge {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .site-stars {
    color: var(--landing-accent-on-dark);
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .site-rating-badge span:last-child {
    font-size: 13px;
    color: #d9d0c8;
  }

  /* Hero nav arrows — position:absolute follows the nearest positioned ancestor
     (.site-hero, position:relative above), so they stay anchored to the hero section. */
  .hero-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    z-index: 3;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .hero-nav-arrow:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.45);
  }

  .hero-nav-arrow-left {
    left: 20px;
  }

  .hero-nav-arrow-right {
    right: 20px;
  }

  /* --- TRUST STRIP --- */
  .site-trust-strip {
    background: var(--landing-alt-bg);
    padding: 20px clamp(24px, 6vw, 90px);
    border-bottom: 1px solid var(--landing-border);
  }

  .site-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--landing-muted);
  }

  .site-trust-inner .site-trust-divider {
    width: 1px;
    height: 16px;
    background: var(--landing-border);
  }

  .site-trust-inner a {
    color: var(--primary-color);
    text-decoration: none;
  }

  /* --- ABOUT --- */
  .site-about {
    max-width: var(--site-content-width);
    margin: 0 auto;
    box-sizing: border-box;
    padding: clamp(64px, 10vw, 130px) clamp(24px, 6vw, 90px);
    display: flex;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
    flex-wrap: wrap;
  }

  .site-about-photo {
    /* flex-grow:0 (was 1) so it no longer expands to fill leftover row space now that the
       section itself is width-capped — keeps the photo close to its basis size and lets
       .site-about-copy (still flex-grow:1) take any extra room instead. */
    flex: 0 1 320px;
    min-width: 260px;
    aspect-ratio: 4/5;
    object-fit: cover;
    background: var(--landing-alt-bg);
  }

  .site-about-copy {
    flex: 1 1 420px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .site-about-intro {
    font-size: 16px;
    line-height: 1.8;
    color: var(--landing-muted);
    margin: 0;
    max-width: 480px;
  }

  .site-about-stats {
    display: flex;
    gap: clamp(22px, 4vw, 44px);
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .site-about-stat-label {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--primary-color);
  }

  .site-about-stat-sub {
    font-size: 12px;
    color: var(--landing-muted);
    margin-top: 4px;
    max-width: 160px;
  }

  /* --- SERVICES & PRICING (real catalog — see loadServicesPricing() in app.js) --- */
  .site-services {
    background: var(--primary-dark);
    padding: clamp(64px, 10vw, 130px) clamp(24px, 6vw, 90px);
  }

  .site-services-grid {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(32px, 5vw, 56px);
  }

  .site-services-category-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--landing-accent-on-dark);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--landing-border-on-dark);
  }

  .site-services-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    gap: 12px;
  }

  .site-services-row .name { font-size: 15px; color: #f0ebe5; }
  .site-services-row .price { font-size: 14px; color: var(--landing-muted-on-dark); white-space: nowrap; }

  /* --- OFFERS --- */
  .site-offers {
    padding: clamp(64px, 10vw, 110px) clamp(24px, 6vw, 90px);
  }

  .site-offers-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
  }

  .site-offer-card {
    flex: 1 1 300px;
    min-width: 260px;
    max-width: 340px;
    background: var(--landing-alt-bg);
    border: 1px solid var(--landing-border);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
  }

  .site-offer-tag {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--primary-color);
  }

  .site-offer-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
  }

  .site-offer-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--landing-muted);
    margin: 0;
  }

  /* --- GALLERY --- */
  .site-gallery {
    padding: clamp(64px, 10vw, 110px) clamp(24px, 6vw, 90px);
    background: var(--landing-alt-bg);
  }

  .site-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto 36px;
  }

  .site-gallery-follow {
    font-size: 14px;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--text-dark);
  }

  .site-gallery-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .site-gallery-item {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 380px;
    height: clamp(200px, 24vw, 320px);
    object-fit: cover;
    cursor: pointer;
    background: var(--landing-alt-bg);
  }

  /* --- TEAM --- */
  .site-team {
    padding: clamp(64px, 10vw, 110px) clamp(24px, 6vw, 90px);
  }

  .site-team-grid {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
  }

  .site-team-card {
    flex: 1 1 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .site-team-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    background: var(--landing-alt-bg);
  }

  .site-team-name {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--text-dark);
  }

  .site-team-role {
    font-size: 13px;
    color: var(--landing-muted);
    margin-top: 3px;
  }

  /* --- TESTIMONIALS --- */
  .site-testimonials {
    background: var(--primary-dark);
    padding: clamp(64px, 10vw, 110px) clamp(24px, 6vw, 90px);
  }

  .site-testimonials-grid {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
  }

  .site-testimonial-card {
    flex: 1 1 290px;
    min-width: 250px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-testimonial-quote-mark {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 32px;
    color: var(--landing-muted-on-dark);
    opacity: 0.6;
  }

  .site-testimonial-text {
    font-size: 15px;
    line-height: 1.8;
    color: #e2dbd3;
    margin: 0;
  }

  .site-testimonial-author {
    font-size: 13px;
    color: var(--landing-accent-on-dark);
  }

  /* --- LOCATION / BOOKING CTA --- */
  .site-location {
    max-width: var(--site-content-width);
    margin: 0 auto;
    box-sizing: border-box;
    padding: clamp(64px, 10vw, 110px) clamp(24px, 6vw, 90px);
    display: flex;
    gap: clamp(36px, 6vw, 80px);
    align-items: stretch;
    flex-wrap: wrap;
  }

  .site-location-copy {
    flex: 1 1 400px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    justify-content: center;
  }

  .site-location-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: var(--text-dark);
  }

  .site-location-details .muted { color: var(--landing-muted); font-size: 13px; margin-top: 4px; }

  .site-location-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .site-location-photo {
    /* flex-grow:0 (was 1), smaller basis — same reasoning as .site-about-photo above: don't
       expand to fill leftover row space, let .site-location-copy take it instead. */
    flex: 0 1 340px;
    min-width: 260px;
    object-fit: cover;
    background: var(--landing-alt-bg);
  }

  /* --- FOOTER --- */
  .site-footer {
    background: var(--primary-dark);
    padding: 44px clamp(24px, 6vw, 90px) 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
  }

  .site-footer-top {
    max-width: var(--site-content-width);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
  }

  .site-footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #f6f2ed;
  }

  .site-footer-social {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
  }

  .site-footer-social a {
    color: var(--landing-muted-on-dark);
    text-decoration: none;
    font-size: 13px;
  }

  .site-footer-divider {
    height: 1px;
    background: var(--landing-border-on-dark);
  }

  .site-footer-bottom {
    max-width: var(--site-content-width);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--landing-muted-on-dark);
  }

  /* Design's own single breakpoint (independent of the modal system's 992px breakpoint below) */
  @media (max-width: 760px) {
    .site-nav-links { display: none; }
    .site-nav-hamburger { display: flex; }
    .site-nav-cta { padding: 9px 16px; font-size: 12px; }
    .hero-nav-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
    .hero-nav-arrow-left { left: 10px; }
    .hero-nav-arrow-right { right: 10px; }
  }

  /* Portal Overlay Modals */
  .portal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 45, 45, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .portal-modal-overlay.active {
    display: flex;
  }

  /* The actual booking and profile modal card */
  .portal-modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 50, 50, 0.25);
    padding: 42px 40px 36px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
  }

  @media (max-width: 480px) {
    /* 40px/side was eating enough of a phone's width, combined with the overlay's own 20px
       gutter, that the portal-nav tab row (see below) couldn't fit even after being shrunk —
       most of a phone's screen needs to go to actual content, not card padding. */
    .portal-modal-content {
      padding: 32px 20px 28px;
    }
  }

  /* ===== Portal typography — mirrors the landing page look ===== */
  .portal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-align: center;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }

  .portal-title-sm {
    font-size: 1.9rem;
  }

  .portal-sub {
    text-align: center;
    color: #78909c;
    font-size: 0.94rem;
    margin: 0;
  }

  .title-ornament {
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), #8fd4d2);
    margin: 14px auto 26px;
  }

  .portal-link {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .portal-link:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
  }

  .step-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-align: center;
    margin: 0 0 22px;
  }

  /* Themed Materialize inputs inside the portal */
  .portal-modal-content .input-field input {
    border-bottom: 1px solid #cfd8dc !important;
    box-shadow: none;
  }

  .portal-modal-content .input-field input:focus {
    border-bottom: 1.5px solid var(--primary-color) !important;
    box-shadow: 0 1px 0 0 var(--primary-color) !important;
  }

  .portal-modal-content .input-field input:focus + label {
    color: var(--primary-color) !important;
  }

  .portal-modal-content .input-field label {
    color: #90a4ae;
  }

  /* Uppercase mini-labels above selects / pickers */
  .select-label {
    position: static !important; /* neutralize Materialize absolute labels inside .input-field */
    transform: none !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
    text-align: left;
    color: #607d8b;
  }

  .portal-select {
    height: 44px;
    border: 1px solid #cfd8dc;
    border-radius: 10px;
    padding: 0 12px;
    width: 100%;
    font-size: 0.92rem;
    background: #fff;
    color: var(--text-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .portal-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 156, 156, 0.12);
  }

  .profile-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 28px;
    box-shadow: 0 10px 30px rgba(0, 77, 77, 0.08);
    border: 1px solid rgba(59, 156, 156, 0.12);
  }

  @keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .portal-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    color: #78909c;
    cursor: pointer;
    font-size: 1.6rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .portal-modal-close:hover {
    color: #d32f2f;
  }

  /* Refactored wizard CSS & form styles */
  .service-row {
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .service-row.selected {
    background: #b8e2e0; /* deliberately stronger than --primary-light — that pale a tint read as "still white" */
    box-shadow: inset 4px 0 0 var(--primary-color);
  }

  .service-row.selected .service-name {
    color: var(--primary-color);
    font-weight: 700;
  }

  .service-row label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-grow: 1;
  }

  .service-row input[type="checkbox"] {
    margin-right: 12px;
  }

  .service-info {
    display: flex;
    flex-direction: column;
  }

  .service-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
  }

  .service-duration {
    font-size: 0.8rem;
    color: #78909c;
    margin-top: 2px;
  }

  .service-cost {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
  }

  .category-collapse {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: white;
  }

  .category-collapse summary {
    padding: 15px 20px;
    font-weight: 600;
    color: #37474f;
    background: #fafafa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    user-select: none;
  }

  .category-collapse summary i {
    transition: transform 0.2s ease;
    color: #78909c;
  }

  .category-collapse[open] summary i {
    transform: rotate(180deg);
    color: var(--primary-color);
  }

  /* Highlight the category summary header if a service is selected */
  .category-collapse.has-selection {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(59, 156, 156, 0.08) !important;
  }

  .category-collapse.has-selection summary {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
  }

  .category-collapse.has-selection summary i {
    color: var(--primary-color) !important;
  }

  .selection-summary-bar {
    background: var(--primary-light);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .summary-text {
    font-weight: 600;
    color: var(--primary-dark);
  }

  .summary-text span {
    margin-right: 15px;
  }

  .datepicker-container {
    margin-bottom: 25px;
  }

  .datepicker-input {
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
  }

  .datepicker-input:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 156, 156, 0.12) !important;
  }

  .datepicker-modal {
    min-width: 300px !important;
    max-width: 95% !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  @media only screen and (min-width: 601px) {
    .datepicker-modal { width: 625px !important; }
  }
  @media only screen and (max-width: 600px) {
    .datepicker-modal { width: 325px !important; }
  }

  .slots-grid-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-top: 20px;
    max-height: 250px;
    overflow-y: auto;
    padding: 6px;
  }

  .slot-btn {
    background: white;
    border: 1px solid #b2dfdb;
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .slot-btn:hover {
    background: #e0f2f1;
    border-color: var(--primary-color);
  }

  .slot-btn.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 121, 107, 0.2);
  }

  .slots-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 34px 10px;
    color: #78909c;
    font-weight: 500;
  }

  .slots-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e0f2f1;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: slotsSpin 0.8s linear infinite;
  }
  @keyframes slotsSpin { to { transform: rotate(360deg); } }

  #slotTakenModal {
    max-width: 420px;
    border-radius: 16px;
    text-align: center;
  }
  #slotTakenModal .stm-icon {
    width: 74px;
    height: 74px;
    margin: 4px auto 10px;
    border-radius: 50%;
    background: #fff3e0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #slotTakenModal .stm-icon i {
    font-size: 42px;
    color: #f57c00;
  }
  #slotTakenModal h5 {
    font-weight: 700;
    color: #37474f;
    margin: 6px 0 10px;
  }
  #slotTakenModal p {
    color: #607d8b;
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0 auto 6px;
    max-width: 320px;
  }

  .booking-form-input {
    font-size: 1.1rem !important;
  }

  .success-icon-area {
    text-align: center;
    margin-bottom: 25px;
  }

  .success-icon-area i {
    font-size: 5rem;
    color: #2e7d32;
  }

  .booking-details-box {
    background: #f1f8e9;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 20px;
    margin-top: 25px;
  }

  .details-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .details-row:last-child {
    margin-bottom: 0;
  }

  .details-label {
    color: #558b2f;
    font-weight: 500;
  }

  .details-val {
    font-weight: 600;
    color: #33691e;
  }

  .nav-buttons-container {
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .primary-act-btn {
    background: linear-gradient(135deg, #3b9c9c 0%, #205c5c 100%);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 13px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 121, 107, 0.2);
    transition: all 0.3s ease;
  }

  .primary-act-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 121, 107, 0.3);
    transform: translateY(-1px);
  }

  .primary-act-btn.disabled, .primary-act-btn:disabled {
    background: #b0bec5;
    color: #eceff1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }

  .sec-act-btn {
    background: transparent;
    color: #78909c;
    border: 1.5px solid #cfd8dc;
    border-radius: 30px;
    padding: 12px 30px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
  }

  .sec-act-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-light);
  }

  .loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .loader-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .portal-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1.5px solid #e0e7e7;
    padding-bottom: 8px;
    /* Safety net, not the primary fix (that's the narrow-screen sizing below) — without this,
       4 non-wrapping/non-shrinking buttons that don't fit force the WHOLE page's layout
       viewport wider than the phone screen (the classic "unconstrained-width element" mobile
       bug), which is why the tab row looked cropped/shifted rather than just cramped. Contains
       any future overflow (a longer label, an extra tab) to a scroll within this row instead. */
    overflow-x: auto;
    /* Required alongside overflow-x — per spec, setting only overflow-x to a non-"visible"
       value forces the browser to also compute overflow-y as "auto" instead of "visible" (you
       can't mix "auto" on one axis with "visible" on the other). Without this, the row shows an
       unwanted vertical scrollbar the moment its content is even 1px taller than the row itself
       (e.g. the logout icon's line-height vs. the text buttons') — nothing here should ever
       scroll vertically. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .portal-nav-btn {
    background: transparent;
    color: #78909c;
    border: none;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .portal-nav-exit {
    color: #b0bec5;
  }

  .portal-nav-exit .material-icons {
    font-size: 1.3rem;
  }

  .portal-nav-exit:hover {
    color: #c62828 !important;
  }

  .portal-nav-btn:hover {
    color: var(--primary-color);
  }

  .portal-nav-btn.active {
    color: var(--primary-color);
  }

  .portal-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: -9.5px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
  }

  .history-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
  }

  .history-card:hover {
    box-shadow: 0 4px 12px rgba(0,121,107,0.06);
  }

  .badge-status {
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
  }

  .badge-status.status-confirmed {
    background: #e8f5e9;
    color: #2e7d32;
  }

  .badge-status.status-pending {
    background: #fff3e0;
    color: #ef6c00;
  }

  .badge-status.status-cancelled {
    background: #ffebee;
    color: #c62828;
  }

  /* step-bar layout */
  .step-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    position: relative;
  }

  .step-bar::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #cfd8dc;
    z-index: 1;
  }

  .step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    flex-grow: 1;
  }

  .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #cfd8dc;
    color: #78909c;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 3px solid #fff;
    transition: all 0.3s ease;
  }

  .step-label {
    font-size: 0.75rem;
    color: #78909c;
    margin-top: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .step-node.active .step-number {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-light);
  }

  .step-node.active .step-label {
    color: var(--primary-color);
  }

  .step-node.done .step-number {
    background: #00b0ff;
    color: white;
  }

  .step-view {
    display: none;
  }

  .step-view.active {
    display: block;
  }

  /* Custom SVGs for Social Sidebar */
  .fab-custom {
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
  }


  /* === Premium Styled Input overrides for customer app forms === */
  .portal-modal-content .input-field {
    margin-top: 28px !important;
    margin-bottom: 12px !important;
    position: relative !important;
  }

  .portal-modal-content .input-field input[type="text"],
  .portal-modal-content .input-field input[type="email"],
  .portal-modal-content .input-field input[type="password"],
  .portal-modal-content .input-field input[type="tel"],
  .portal-modal-content .input-field input[type="number"] {
    height: 46px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(59, 156, 156, 0.25) !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
  }

  .portal-modal-content .input-field input:focus {
    border-color: var(--primary-color) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 156, 156, 0.12) !important;
  }

  /* Force label to be static above input, matching Outfit typography styling */
  .portal-modal-content .input-field label,
  .portal-modal-content .input-field label.active {
    position: absolute !important;
    top: -24px !important;
    left: 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #607d8b !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Styling dropdown select components and datepickers */
  .portal-select {
    height: 46px !important;
    border: 1px solid rgba(59, 156, 156, 0.25) !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 0 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--text-dark) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
  }
  .portal-select:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 156, 156, 0.12) !important;
  }

  .datepicker-input {
    height: 46px !important;
    border: 1px solid rgba(59, 156, 156, 0.25) !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 0 16px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--text-dark) !important;
  }

  /* Redesign Buttons to have matching 8px border-radius and cleaner premium shadows */
  .primary-act-btn {
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 4px 10px rgba(59, 156, 156, 0.15) !important;
    transition: all 0.25s ease !important;
  }
  .primary-act-btn:hover {
    box-shadow: 0 6px 16px rgba(59, 156, 156, 0.25) !important;
    transform: translateY(-1px) !important;
  }

  .sec-act-btn {
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    transition: all 0.2s ease !important;
  }

  /* Profile Card styling enhancements */
  .profile-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(59, 156, 156, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 50, 50, 0.06) !important;
    padding: 36px 30px 24px !important;
  }

  /* Nav tabs premium look */
  .portal-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    border-bottom: 1.5px solid #e0e7e7 !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .portal-nav-btn {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #78909c !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
  }

  .portal-nav-btn:hover {
    color: var(--primary-color) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .portal-nav-btn.active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
  }

  .portal-nav-btn.portal-nav-exit {
    color: #b0bec5 !important;
  }

  .portal-nav-btn.portal-nav-exit:hover {
    color: #c62828 !important;
  }

  /* Narrow-phone tab-row sizing — needs !important + placement after the "premium look" block
     above, since that block's own !important font-size/padding/gap/justify-content on these
     same selectors would otherwise always win regardless of this media query. Shrinks the row
     enough that, combined with the icon-only exit button, all 4 tabs normally fit without
     needing the horizontal-scroll fallback (.portal-nav's overflow-x:auto above) at all — that
     fallback stays in place as a safety net for even narrower devices or longer labels. */
  @media (max-width: 480px) {
    .portal-nav {
      gap: 2px !important;
      justify-content: flex-start !important;
    }
    .portal-nav-btn {
      font-size: 0.74rem !important;
      padding: 8px 6px !important;
    }
  }

  /* Checkbox styling to match sharp theme */
  [type="checkbox"].filled-in:checked+span:not(.lever):after {
    border-radius: 4px !important;
    border: 2px solid var(--primary-color) !important;
    background-color: var(--primary-color) !important;
  }
  [type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
    border-radius: 4px !important;
    border: 2px solid #cfd8dc !important;
  }

  /* Force Google Fonts (Plus Jakarta Sans and Outfit) globally on all modal, portal, input, and header elements to override Materialize defaults */
  .portal-modal-overlay,
  .portal-modal-content,
  .portal-modal-content *:not(.material-icons) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
  }

  /* Exclude material icons from global fonts override */
  .material-icons {
    font-family: 'Material Icons' !important;
  }

  .portal-modal-content h1,
  .portal-modal-content h2,
  .portal-modal-content h3,
  .portal-modal-content h4,
  .portal-modal-content h5,
  .portal-modal-content h6,
  .portal-title,
  .step-heading {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
  }

  /* Keep the main HairyTales brand logo header in the elegant Cormorant Garamond serif */
  .salon-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
  }

  /* Date Navigator styles */
  .date-navigator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f7f8;
    border-radius: 10px;
    padding: 2px 6px;
    border: 1px solid #cfd8dc;
    height: 44px;
    box-sizing: border-box;
  }

  .date-nav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #455a64;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    outline: none;
  }

  .date-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
  }

  .date-nav-btn:disabled {
    color: #b0bec5;
    cursor: not-allowed;
  }

  .calendar-day-name {
    margin-top: 6px;
    font-size: 0.8rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    text-transform: uppercase;
    min-height: 18px;
    letter-spacing: 0.5px;
  }

  /* --- Composite multi-phase packages (Πακέτα Υπηρεσιών) --- */
  .wf-steps-preview {
    display: block;
    font-size: 0.76rem;
    color: #90a4ae;
    margin-top: 3px;
    line-height: 1.4;
  }

  .service-row.option-disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  #slotsSpanNote {
    margin-top: 12px;
    padding: 8px 14px;
    background: #e0f2f1;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #00695c;
  }

  #successPartsList {
    margin-top: 8px;
    border-top: 1px dashed #c8e6c9;
    padding-top: 8px;
  }

  .success-part-row {
    font-size: 0.85rem;
    color: #37474f;
    padding: 3px 0;
    font-weight: 600;
  }

  .success-part-collab {
    color: #78909c;
    font-weight: 500;
  }

  .success-part-gap {
    font-size: 0.78rem;
    color: #f57c00;
    padding: 2px 0 2px 14px;
    font-style: italic;
  }

  .history-parts {
    margin-top: 8px;
    border-top: 1px dashed #e0e0e0;
    padding-top: 6px;
  }

  .history-part-row {
    font-size: 0.84rem;
    color: #546e7a;
    padding: 2px 0;
  }

  .history-part-time {
    font-weight: 700;
    color: #37474f;
  }

  .history-part-collab {
    color: #90a4ae;
  }

  /* ===== Tenant content editor ===== */

  .nav-editor-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #607d8b;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    z-index: 60;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .nav-editor-icon:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
  }

  .nav-editor-icon i {
    font-size: 1.2rem;
  }

  /* Tab bar grew from 5 to 8 buttons (Team/Testimonials/Rating added) — scoped to the editor
     modal only, not the shared .portal-nav rule the booking wizard's own tab row also uses. */
  #editorPanelModal .portal-nav {
    flex-wrap: wrap;
  }

  .editor-tab-scroll {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* The app-wide floating-label trick (.portal-modal-content .input-field label) positions
     labels 24px ABOVE their own input via negative absolute offset — fine when the whole modal
     scrolls as one unit with generous fixed content above, but inside THIS nested scroll box a
     field can end up flush against the scroll container's own top edge, clipping its label
     clean off (confirmed live: label rendered above the scroll box's own bounding rect).
     Overridden here to plain in-flow labels instead, which can never be clipped regardless of
     scroll position. Scoped to these two modals only — every other form in the app keeps the
     original floating-label look. */
  #editorPanelModal .editor-tab-scroll .input-field,
  #editorGateModal .input-field {
    margin-top: 12px !important;
  }

  #editorPanelModal .editor-tab-scroll .input-field label,
  #editorGateModal .input-field label {
    position: static !important;
    top: auto !important;
    display: block;
    margin-bottom: 6px;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #607d8b;
  }

  .editor-section-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #607d8b;
    margin: 24px 0 4px;
  }

  .editor-repeat-card {
    background: #ffffff;
    border: 1px solid rgba(59, 156, 156, 0.15);
    border-radius: 14px;
    padding: 18px 20px 6px;
    margin-bottom: 16px;
  }

  .editor-repeat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .editor-remove-btn {
    color: #c62828;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
  }

  .editor-remove-btn:hover {
    opacity: 1;
  }

  .editor-remove-btn i {
    font-size: 1.2rem;
  }

  .editor-image-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
  }

  .editor-image-picker img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: #eceff1;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  .editor-upload-btn-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .editor-upload-btn-sm:hover {
    background: var(--primary-color);
    color: white;
  }

  .editor-upload-btn-sm i {
    font-size: 1.1rem;
  }

  .editor-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    margin-top: 4px;
  }

  .editor-add-btn:hover {
    color: var(--primary-dark);
  }

  .editor-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
  }

  .editor-gallery-item {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(59, 156, 156, 0.15);
    border-radius: 12px;
    padding: 8px;
  }

  .editor-gallery-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  .editor-gallery-item input[type="text"] {
    width: 100%;
    border: none;
    border-top: 1px solid #eceff1;
    font-size: 0.78rem;
    padding: 6px 2px 0;
    margin-top: 6px;
    box-sizing: border-box;
  }

  .editor-remove-btn-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    justify-content: center;
    opacity: 1;
  }

  .editor-remove-btn-overlay i {
    font-size: 1rem;
  }