/* =========================================================
   تمیزچی - Design system
   Deep navy primary, fresh green accent (used sparingly),
   mostly-white/spacious layout, mobile-first.
   ========================================================= */

:root {
    --color-primary: #0e2a47;
    --color-primary-dark: #0a1f36;
    --color-accent: #1f9d63;
    --color-accent-dark: #17824f;
    --color-bg: #ffffff;
    --color-bg-soft: #f3f8fb;
    --color-ivory: #faf6ee;
    --color-text: #17232f;
    --color-text-muted: #5c6b7a;
    --color-border: #e6edf3;
    --shadow-soft: 0 12px 32px rgba(14, 42, 71, 0.08);
    --shadow-soft-sm: 0 4px 14px rgba(14, 42, 71, 0.06);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-pill: 999px;
    --container-width: 1120px;
}

/* Local Vazirmatn font files - see static/fonts/. Not loaded from Google
   Fonts or any CDN. font-display:swap avoids invisible text while each
   file loads; the Tahoma/Arial fallback in the font-family stacks below
   covers the gap if a given weight's file isn't present yet. */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    line-height: 1.7;
    font-size: 16px;
}

/* Form controls don't inherit font-family from body by default in
   browser UA stylesheets, so this is set explicitly. Icons/SVGs are
   untouched - none of them render text via font-family. */
button,
input,
textarea,
select,
option {
    font-family: inherit;
}

::placeholder {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, p {
    margin: 0;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

section {
    padding: 64px 0;
}

.section-heading {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 40px;
}

.section-heading h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}

.section-heading p {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.7rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

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

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

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-primary);
}

.btn-lg {
    padding: 1rem 2.1rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.55rem 1.3rem;
    font-size: 0.9rem;
}

/* ---------- Header ---------- */

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
}

.main-nav {
    display: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-links a {
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-account a {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.nav-account a.nav-register-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: rgba(31, 157, 99, 0.12);
    color: var(--color-accent-dark);
    font-size: 0.88rem;
}

.nav-register-pill:hover {
    background: rgba(31, 157, 99, 0.2);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-cta {
    display: none;
}

.menu-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

@media (min-width: 900px) {
    .main-nav {
        display: flex;
        align-items: center;
        gap: 34px;
    }

    .header-cta {
        display: inline-flex;
    }

    .menu-toggle {
        display: none;
    }
}

@media (max-width: 899px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
        padding: 12px 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .main-nav.open {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        width: 100%;
    }

    .nav-account {
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
        width: 100%;
    }
}

/* ---------- Hero (approved banner image) ---------- */
/* The banner already contains the branding, headline, benefits, and
   photography - no HTML text or icons are overlaid on top of it. */

.hero {
    padding: 0;
    position: relative;
}

.hero-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.hero-banner picture,
.hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Layer 2: a very subtle fade at the bottom of the photo itself, toward
   the same warm ivory the wave/objects below use - so the photo and the
   overlap layer blend into one continuous surface instead of reading as
   "image, then a separate shape". */
.hero-banner::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(
        to bottom,
        rgba(250, 246, 238, 0) 0%,
        rgba(250, 246, 238, 0.5) 60%,
        rgba(250, 246, 238, 0.88) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ---------- Hero services overlap (premium floating category selector) ---------- */
/* .hero-overlap is pinned to the bottom of .hero (which now coincides
   with the photo's own bottom edge, since the CTA moved above it) and
   pulled down by translateY so the objects visually emerge from the
   photo: roughly half stays over the Hero, half spills into the next
   section. A shared organic SVG wave provides the base ivory surface;
   each object additionally gets its own soft, color-matched backlight
   glow and a flat contact shadow, for a premium "one composition" feel
   rather than a separate section underneath. */

.hero-overlap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    transform: translateY(40%);
    z-index: 5;
}

.hero-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-wave-accent {
    position: absolute;
    inset: 0 15% 20% 15%;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(31, 157, 99, 0.14) 0%, rgba(31, 157, 99, 0) 68%);
    filter: blur(6px);
}

.hero-services {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 28px 24px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hero-services::-webkit-scrollbar {
    display: none;
}

.hero-service-item {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: min(66vw, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 280ms ease;
}

/* Wraps the chair's glow+image+text so a desktop-only transform (see the
   768px breakpoint below) can lift just that visual unit without
   changing layout/height. Plain flex passthrough elsewhere. */
.hero-service-chair-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Flat, soft contact shadow directly under the object - distinct from
   the object's own drop-shadow, which reads more like ambient depth.
   Reads --chair-lift (set only on .hero-service-chair at desktop, see
   below) so the shadow follows the chair's own vertical adjustment;
   it's unset/0 for every other item. */
.hero-service-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 62%;
    height: 16px;
    background: radial-gradient(ellipse, rgba(10, 27, 46, 0.22) 0%, rgba(10, 27, 46, 0) 72%);
    opacity: 0.8;
    transform: translateX(-50%) translateY(var(--chair-lift, 0px));
    z-index: 0;
    transition: opacity 280ms ease, transform 280ms ease;
}

.hero-service-item:hover,
.hero-service-item:focus-visible {
    transform: translateY(-6px) scale(1.01);
}

.hero-service-item:hover::after,
.hero-service-item:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--chair-lift, 0px)) scale(1.06);
}

/* Soft directional backlight behind each object - warm ivory behind the
   sofa, pale sage behind the mattress, a slightly cooler restrained
   green behind the chair - echoing the Hero photo's own daylight rather
   than an arbitrary glow. Kept low-opacity and blurred throughout. */
.hero-service-glow {
    position: absolute;
    inset: 2% 4% 30% 4%;
    z-index: 0;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.85;
    transition: opacity 280ms ease, transform 280ms ease;
}

.hero-service-sofa .hero-service-glow {
    background: radial-gradient(ellipse at 50% 40%, rgba(250, 246, 238, 0.95) 0%, rgba(250, 246, 238, 0) 72%);
}

.hero-service-mattress .hero-service-glow {
    background: radial-gradient(ellipse at 50% 40%, rgba(210, 234, 218, 0.85) 0%, rgba(210, 234, 218, 0) 72%);
}

.hero-service-chair .hero-service-glow {
    background: radial-gradient(ellipse at 50% 40%, rgba(200, 226, 222, 0.7) 0%, rgba(200, 226, 222, 0) 72%);
}

.hero-service-item:hover .hero-service-glow,
.hero-service-item:focus-visible .hero-service-glow {
    opacity: 1;
    transform: scale(1.08);
}

.hero-service-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    /* Fixed box height + object-fit:contain on mobile so the portrait
       chair photo doesn't blow up just because it shares the same item
       width as the wide sofa/mattress photos. Desktop resets this back
       to natural width-driven sizing (see the 768px override below). */
    height: clamp(140px, 38vw, 220px);
    object-fit: contain;
    /* Two shadows: a tight one for edge/contact definition, a wider one
       for ambient depth - plus a barely-there bright pass to suggest a
       subtle rim highlight along the top-lit edge. */
    filter:
        drop-shadow(0 3px 6px rgba(10, 27, 46, 0.18))
        drop-shadow(0 18px 26px rgba(10, 27, 46, 0.2))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35));
    transition: filter 280ms ease;
}

.hero-service-item:hover .hero-service-image,
.hero-service-item:focus-visible .hero-service-image {
    filter:
        drop-shadow(0 4px 8px rgba(10, 27, 46, 0.2))
        drop-shadow(0 24px 32px rgba(10, 27, 46, 0.26))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.45));
}

.hero-service-text {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.hero-service-label {
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--color-primary);
    white-space: nowrap;
}

.hero-service-sub {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #53657a;
    white-space: nowrap;
}

@media (min-width: 768px) {
    /* First-viewport priority: the whole image+title+subtitle unit is
       pulled up (as one group, via this single shared transform) so all
       six lines of text (3 titles + 3 subtitles) stay clear of the fold
       on common desktop window sizes. The shared cream wave moves with
       this same layer, so the text still reads as sitting on cream.

       This is a WIDTH-aware pixel shift, not a flat percentage: at narrow
       desktop widths (~768-1366px) little to no lift is needed - the
       Hero's own subtitle text sits close to where the chair would want
       to rise, so lifting it there would cover that text. At wide
       windows (~1920px) the photo (and the gap to the fold) is taller,
       so a bigger lift is both needed and safe. Tuned and verified via
       real screenshots at 1366/1440/1600/1720/1920px - not just by
       formula - to confirm the Hero's own text stays uncovered at every
       width while all six category text lines clear the fold. */
    .hero-overlap {
        transform: translateY(clamp(-35px, calc(-6.32vw + 86.3px), 0px));
    }

    .hero-services {
        overflow: visible;
        align-items: flex-start;
        padding-inline: 48px;
        padding-top: 0;
        gap: clamp(28px, 4.4vw, 64px);
        pointer-events: none;
    }

    .hero-service-item {
        width: auto;
        pointer-events: auto;
    }

    .hero-service-image {
        height: auto;
    }

    /* Editorial asymmetry preserved, but the mattress's extra drop was
       eating the room its own title/subtitle needed - tightened so the
       whole unit (image + text) still clears the fold. */
    .hero-service-sofa {
        margin-top: clamp(6px, 1vw, 14px);
    }

    .hero-service-sofa .hero-service-image {
        width: clamp(200px, 17vw, 306px);
    }

    .hero-service-mattress {
        margin-top: clamp(18px, 2.4vw, 34px);
    }

    .hero-service-mattress .hero-service-image {
        width: clamp(180px, 15.3vw, 288px);
    }

    .hero-service-chair {
        margin-top: clamp(4px, 0.8vw, 12px);
        /* The chair PNG is portrait (taller/narrower) than the
           sofa/mattress assets, so its title/subtitle reach further down
           than the other two. This custom property drives both the
           visual-unit transform below and the shared contact-shadow rule
           above - transform doesn't participate in layout, so the flex
           row's own height (and therefore the sofa/mattress positions)
           stay exactly as they were. The hover translateY/scale lives on
           the outer link (.hero-service-item:hover) and combines
           additively with this, so hover still works normally. */
        --chair-lift: clamp(-10px, -0.8vw, -6px);
    }

    .hero-service-chair .hero-service-image {
        width: clamp(145px, 12.2vw, 225px);
    }

    .hero-service-chair-visual {
        transform: translateY(var(--chair-lift));
    }
}

/* ---------- Services ----------
   The home page no longer renders a dedicated .services heading section
   (removed - it held only a title with no cards below it); the booking-cta
   section immediately follows the hero instead. .services-grid/.service-card
   below remain in use on other pages (e.g. bookings:start). */

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.service-card-image {
    background: var(--color-bg-soft);
    aspect-ratio: 4 / 3;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card-body {
    padding: 22px 22px 26px;
}

.service-card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.service-card-body p {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.service-card-link {
    display: inline-block;
    margin-top: 16px;
    font-weight: 600;
    color: var(--color-accent-dark);
    font-size: 0.95rem;
}

.service-card-link:hover {
    text-decoration: underline;
}

@media (min-width: 700px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Booking CTA ---------- */
/* This section sits directly under the hero. Below 768px, .hero-overlap
   (the floating service cards) is pulled down by translateY(40%) and
   really does spill under the Hero, growing from ~100px at narrow phone
   widths to ~134px near 767px - the fluid clamp() below tracks that so
   the banner card never collides with it at any mobile width, without
   over-padding narrow phones.
   At 768px+, .hero-overlap's transform is overridden (see the
   `@media (min-width: 768px) { .hero-overlap { transform: ... } }` rule)
   to ~0 or negative, so it never spills past the Hero there - no
   clearance is needed and the old 90px was pure unwanted whitespace. */

.booking-cta {
    position: relative;
    padding: clamp(102px, calc(77px + 8vw), 142px) 0 32px;
    background-color: #faf8f4;
    background-image:
        radial-gradient(ellipse 55% 75% at 100% 25%, rgba(198, 220, 242, 0.4), transparent 70%),
        radial-gradient(ellipse 55% 75% at 0% 75%, rgba(203, 224, 202, 0.38), transparent 70%);
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Subtle premium grain, generated with an inline SVG feTurbulence filter
   (no image asset, no JS). Sits behind the banner card via paint order:
   this ::before is the section's own first-painted layer, so the later
   .booking-cta-inner (a positioned sibling) always renders above it. */
.booking-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

@media (min-width: 768px) {
    .booking-cta {
        /* No hero-overlap spillover at this width or above - match the
           bottom padding for a clean, compact, symmetric section. */
        padding-top: 32px;
    }
}

.booking-cta-inner {
    position: relative;
    max-width: 1600px;
    width: calc(100% - 48px);
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: var(--color-primary);
    color: #ffffff;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.booking-cta-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.booking-cta-media {
    width: 100%;
    aspect-ratio: 2048 / 768;
}

.booking-cta-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-cta-text {
    padding: 28px 24px 32px;
    text-align: center;
}

.booking-cta-text h2 {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.45;
}

.booking-cta-text p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    line-height: 1.8;
    font-size: 0.98rem;
}

.booking-hours {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

.booking-cta-text .btn-primary {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 22px;
    background: var(--color-accent);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.booking-cta-text .btn-primary:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .booking-cta-inner {
        aspect-ratio: 2048 / 768;
    }

    .booking-cta-media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        z-index: 0;
    }

    .booking-cta-text {
        position: absolute;
        inset-block: 0;
        right: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: min(52%, 620px);
        text-align: right;
        padding: 0 28px;
    }

    .booking-cta-text .btn-primary {
        display: inline-flex;
        width: auto;
    }
}

@media (min-width: 1100px) {
    .booking-cta-text {
        width: min(46%, 620px);
        padding: 0 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-cta-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .booking-cta-text .btn-primary,
    .booking-cta-text .btn-primary:hover {
        transform: none;
    }
}

/* ---------- Why Tamizchee + Steps: ONE liquid-glass section ----------
   Both parts ("چرا تمیزچی؟" and "رزرو در چند قدم ساده") live inside a
   single <section class="why-steps"> as plain <div> children (.why,
   .steps) - there is no second <section>, no divider, and no background
   change between them: the same static photo (why-booking-bg.png, its
   URL injected only via the --ws-bg-photo custom property set inline in
   the template, since this file cannot use {% static %}) covers the
   whole section as one continuous canvas. Colors below are scoped to
   this section only via local custom properties. */

.why-steps {
    --ws-navy: #082f55;
    --ws-emerald: #12b873;
    --ws-green: #19c77a;
    --ws-sky: #20aeef;
    --ws-blue: #168bff;
    --ws-cyan: #18c7de;
    --ws-badge-green: #12c875;
    --ws-bg: #f7fcff;
    position: relative;
    padding: 40px 0 35px;
    background-color: var(--ws-bg);
    background-image:
        linear-gradient(rgba(248, 253, 255, 0.62), rgba(248, 253, 255, 0.62)),
        var(--ws-bg-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: hidden;
}

/* Desktop layout fix: a wider, centered content column (without touching
   the site-wide .container max-width used elsewhere) so 3-up/4-up card
   rows have room to stay compact without feeling cramped. */
@media (min-width: 1100px) {
    .why-steps .container {
        max-width: 1400px;
    }
}

/* Scoped heading rhythm for this section only - tighter than the shared
   .section-heading default (used elsewhere on the site) so the whole
   why+steps composition stays compact enough to fit one desktop
   viewport without needing to scroll inside the section. */
.why-steps .section-heading {
    margin-bottom: 28px;
}

/* ---------- Section content layers ---------- */

.why,
.steps {
    position: relative;
    z-index: 1;
}

.ws-heading {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ws-heading.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.heading-accent {
    display: block;
    width: 44px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--ws-green), var(--ws-blue));
}

.why .section-heading h2,
.steps .section-heading h2 {
    color: var(--ws-navy);
}

/* ---------- Shared liquid-glass card + floating icon orb ---------- */

.glass-card {
    /* LEVEL 2 of the section's depth stack (background = level 1, this
       card = level 2, its icon-orb/badge = level 3 - each level gets a
       visibly stronger shadow than the one below it, so they read as
       physically separate surfaces instead of merging together). The
       card surface is deliberately much brighter/more opaque than the
       photo background behind it (see .why-steps), so it never gets
       "lost" in a same-toned backdrop, plus a large multi-layer navy+cyan
       ambient shadow (never plain gray/black) so it visibly floats. */
    position: relative;
    background:
        linear-gradient(90deg, var(--ws-cyan), var(--ws-blue), var(--ws-green)) bottom / 100% 3px no-repeat,
        radial-gradient(130% 130% at 12% 12%, rgba(24, 199, 222, 0.32), transparent 55%),
        radial-gradient(130% 130% at 88% 90%, rgba(25, 199, 122, 0.24), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(225, 250, 255, 0.76) 50%, rgba(221, 255, 239, 0.7) 100%);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    box-shadow:
        0 30px 60px -18px rgba(4, 48, 85, 0.32),
        0 16px 34px -10px rgba(0, 155, 210, 0.28),
        0 6px 14px -4px rgba(0, 60, 100, 0.18),
        -6px 0 22px -16px rgba(24, 199, 222, 0.35),
        6px 0 22px -16px rgba(25, 199, 122, 0.3),
        inset 0 0 0 1px rgba(24, 199, 222, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    opacity: 0;
    transform: translateY(26px);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease,
        opacity 0.6s ease;
}

.glass-card::before {
    /* Glass reflection sheen - sweeps a few px further across on hover */
    content: "";
    position: absolute;
    inset: -60% -60%;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(180, 235, 255, 0.28) 57%,
        transparent 64%);
    transform: translateX(-70%);
    transition: transform 0.9s ease;
    pointer-events: none;
}

.glass-card::after {
    /* Static glossy highlight, top-start corner - sells "real glass" even
       at rest, without hurting text contrast (kept out of the text area). */
    content: "";
    position: absolute;
    top: -35%;
    inset-inline-start: -15%;
    width: 65%;
    height: 65%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 70%);
    pointer-events: none;
    opacity: 0.8;
}

.glass-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.glass-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 36px 70px -18px rgba(4, 48, 85, 0.4),
        0 20px 42px -10px rgba(0, 155, 210, 0.38),
        0 8px 16px -4px rgba(0, 60, 100, 0.22),
        -9px 0 30px -14px rgba(24, 199, 222, 0.55),
        9px 0 30px -14px rgba(25, 199, 122, 0.45),
        inset 0 0 0 1px rgba(24, 199, 222, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass-card:hover::before {
    transform: translateX(58%);
}

.icon-orb,
.step-icon-wrap {
    /* LEVEL 3 - brighter than the card surface it sits on, with the
       strongest, most concentrated shadow of the three depth levels, so
       it visibly floats above the card the same way the card floats
       above the background. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.2) 45%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(198, 240, 255, 0.68));
    box-shadow:
        0 14px 28px -8px rgba(8, 47, 85, 0.38),
        0 4px 10px -2px rgba(0, 155, 210, 0.32),
        inset 0 2px 3px rgba(255, 255, 255, 0.98),
        inset 0 -5px 9px -2px rgba(25, 199, 122, 0.26);
    animation: iconOrbFloat 5s ease-in-out infinite;
    transition: box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-orb-glow {
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 199, 222, 0.38), rgba(25, 199, 122, 0.2) 55%, transparent 75%);
    filter: blur(7px);
    opacity: 0.8;
    transition: opacity 0.35s ease, background 0.35s ease;
}

.glass-card:hover .icon-orb-glow {
    opacity: 1;
    background: radial-gradient(circle, rgba(24, 199, 222, 0.55), rgba(25, 199, 122, 0.35) 55%, transparent 75%);
}

.glass-card:hover .icon-orb,
.glass-card:hover .step-icon-wrap {
    /* A plain `transform` here would lose to the always-running
       iconOrbFloat animation (a running CSS animation always wins over a
       transitioned/static transform on the same property). Adding a
       second, later-listed animation that settles on scale(1.04) and
       holds via `forwards` is what actually wins and shows the hover
       scale - the float visually pauses for the hover's duration, which
       reads as an intentional "lift to attention", not a bug. */
    animation: iconOrbFloat 5s ease-in-out infinite, iconOrbHoverScale 0.4s ease forwards;
}

@keyframes iconOrbHoverScale {
    from,
    to {
        transform: scale(1.04);
    }
}

.why-icon,
.step-icon {
    display: flex;
    color: var(--ws-emerald);
    transition: transform 0.35s ease;
}

.glass-card:hover .why-icon,
.glass-card:hover .step-icon {
    transform: scale(1.1);
}

@keyframes iconOrbFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-heading,
    .glass-card {
        opacity: 1;
        transform: none;
        transition: box-shadow 0.2s ease;
    }

    .glass-card:hover {
        transform: none;
    }

    .glass-card::before {
        display: none;
    }

    .icon-orb,
    .step-icon-wrap,
    .glass-card:hover .icon-orb,
    .glass-card:hover .step-icon-wrap {
        animation: none;
        transform: none;
    }

    .steps-path-dot,
    .steps-path-dot-v,
    .steps-path-line {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Lighter blur on narrow phones for smoother scrolling performance. */
@media (max-width: 480px) {
    .glass-card {
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        box-shadow:
            0 18px 34px -16px rgba(4, 48, 85, 0.28),
            0 10px 20px -10px rgba(0, 155, 210, 0.22),
            0 4px 10px -4px rgba(0, 60, 100, 0.14),
            inset 0 0 0 1px rgba(24, 199, 222, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .icon-orb,
    .step-icon-wrap {
        box-shadow:
            0 8px 16px -6px rgba(8, 47, 85, 0.3),
            inset 0 2px 3px rgba(255, 255, 255, 0.98),
            inset 0 -5px 9px -2px rgba(25, 199, 122, 0.22);
    }
}

/* ---------- Why Tamizchee ---------- */

.why {
    padding-top: 0;
    padding-bottom: 24px;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
}

.why-item {
    padding: 28px 20px 24px;
}

.icon-orb {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
}

.why-icon svg {
    width: 25px;
    height: 25px;
}

.why-item h3 {
    font-size: clamp(1rem, 2.4vw, 1.1rem);
    font-weight: 700;
    color: var(--ws-navy);
}

.why-item p {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: clamp(0.85rem, 1.8vw, 0.92rem);
    line-height: 1.6;
}

.why-grid .why-item:nth-child(1) {
    transition-delay: 0ms;
}

.why-grid .why-item:nth-child(2) {
    transition-delay: 120ms;
}

.why-grid .why-item:nth-child(3) {
    transition-delay: 240ms;
}

@media (min-width: 700px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* ---------- Steps ---------- */

.steps {
    padding-top: 26px;
}

.steps-track {
    position: relative;
}

.steps-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.step-icon-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.step-icon svg {
    width: 20px;
    height: 20px;
}

.step-badge {
    position: absolute;
    top: -8px;
    inset-inline-start: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--ws-green), var(--ws-badge-green));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    box-shadow: 0 8px 18px rgba(18, 200, 117, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    animation: stepBadgeFloat 4.5s ease-in-out infinite;
    z-index: 2;
}

.step-title {
    font-weight: 600;
    color: var(--color-text);
    font-size: clamp(0.88rem, 2vw, 0.98rem);
}

.steps-list li:nth-child(1) {
    transition-delay: 0ms;
}

.steps-list li:nth-child(2) {
    transition-delay: 120ms;
}

.steps-list li:nth-child(3) {
    transition-delay: 240ms;
}

.steps-list li:nth-child(4) {
    transition-delay: 360ms;
}

@keyframes stepBadgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Connecting path - desktop: organic curvy gradient line, glass nodes,
   and a moving light pulse. The line "draws" itself in once the steps
   scroll into view (stroke-dashoffset transition), then the pulse loops
   continuously. */
.steps-path {
    display: none;
    position: absolute;
    inset-inline: 26px;
    top: 26px;
    height: 40px;
    z-index: 0;
    pointer-events: none;
}

.steps-path svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.steps-path-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1.1s ease;
}

.steps-path.is-visible .steps-path-line {
    stroke-dashoffset: 0;
}

.steps-path-node {
    fill: rgba(255, 255, 255, 0.95);
    stroke: var(--ws-sky);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.4s ease 0.9s;
}

.steps-path.is-visible .steps-path-node {
    opacity: 1;
}

.steps-path-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #eafffa 0%, var(--ws-green) 70%);
    box-shadow: 0 0 10px 2px rgba(32, 200, 117, 0.6);
    animation: stepsDotMoveH 8s ease-in-out infinite;
}

@keyframes stepsDotMoveH {
    0% {
        left: 0%;
        top: 50%;
    }
    17% {
        left: 17%;
        top: 6%;
    }
    33% {
        left: 33%;
        top: 50%;
    }
    50% {
        left: 50%;
        top: 6%;
    }
    67% {
        left: 67%;
        top: 50%;
    }
    83% {
        left: 84%;
        top: 6%;
    }
    100% {
        left: 100%;
        top: 50%;
    }
}

/* Connecting path - mobile: vertical gradient line + moving light pulse */
.steps-path-vertical {
    position: absolute;
    inset-block: 20px;
    inset-inline-start: 38px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--ws-badge-green), #18bbd7, var(--ws-blue));
    opacity: 0.45;
    z-index: 0;
}

.steps-path-dot-v {
    position: absolute;
    inset-inline-start: -2.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #eafffa 0%, var(--ws-green) 70%);
    box-shadow: 0 0 10px 2px rgba(32, 200, 117, 0.6);
    animation: stepsDotMoveV 6s ease-in-out infinite;
}

@keyframes stepsDotMoveV {
    0%,
    100% {
        top: 0%;
    }
    50% {
        top: calc(100% - 8px);
    }
}

@media (min-width: 900px) {
    .steps-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .step-item {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 34px 16px 30px;
    }

    .step-icon-wrap {
        width: 58px;
        height: 58px;
        margin: 0 auto;
    }

    .step-icon svg {
        width: 24px;
        height: 24px;
    }

    .step-badge {
        top: -10px;
        inset-inline-start: -8px;
        width: 28px;
        height: 28px;
        font-size: 0.82rem;
    }

    .steps-path {
        display: block;
    }

    .steps-path-vertical {
        display: none;
    }
}

/* ---------- Footer: premium 2026 glass footer ----------
   A large, independent, photo-backed section (not a thin bottom bar).
   Local custom properties scope the palette to this component only,
   matching the same emerald/cyan accents used elsewhere on the page. */

.site-footer {
    --footer-navy: #041a2e;
    --footer-cyan: #18c7de;
    --footer-green: #19c77a;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.86);
    padding-top: 56px;
}

.site-footer .container {
    max-width: 1400px;
}

.footer-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--footer-navy);
    background-image: var(--footer-bg-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-bg::after {
    /* Navy wash, only as strong as needed for text contrast - stronger
       toward the right (where the sofa photo sits, under Brand) and
       fading to nothing on the left, where the image is already dark. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(4, 18, 32, 0.6) 0%, rgba(4, 18, 32, 0.28) 40%, rgba(4, 18, 32, 0.08) 65%);
}

.footer-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    pointer-events: none;
}

.footer-glow-cyan {
    width: 380px;
    height: 380px;
    top: -120px;
    inset-inline-start: 12%;
    background: radial-gradient(circle, rgba(24, 199, 222, 0.55), transparent 70%);
    animation: footerGlowDriftA 16s ease-in-out infinite;
}

.footer-glow-emerald {
    width: 320px;
    height: 320px;
    bottom: -120px;
    inset-inline-end: 22%;
    background: radial-gradient(circle, rgba(25, 199, 122, 0.5), transparent 70%);
    animation: footerGlowDriftB 14s ease-in-out infinite;
}

@keyframes footerGlowDriftA {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(26px, 18px);
    }
}

@keyframes footerGlowDriftB {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-22px, -14px);
    }
}

.footer-panel-wrap {
    position: relative;
    z-index: 1;
    padding: 40px 0;
}

/* The glass panel is the single unifying surface for all footer content -
   deliberately faint (not a solid white card) so the photo background
   stays clearly visible through it. */
.footer-panel {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 42px 48px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 20, 45, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 750ms ease, transform 750ms ease;
}

.footer-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

.footer-panel-grid > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.footer-panel.is-visible .footer-panel-grid > * {
    opacity: 1;
    transform: translateY(0);
}

.footer-panel-grid > *:nth-child(1) {
    transition-delay: 0ms;
}

.footer-panel-grid > *:nth-child(2) {
    transition-delay: 80ms;
}

.footer-panel-grid > *:nth-child(3) {
    transition-delay: 160ms;
}

/* ---------- Brand ---------- */

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(2, 10, 20, 0.5);
}

.footer-logo-accent {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--footer-green), var(--footer-cyan));
    box-shadow: 0 0 12px 2px rgba(24, 199, 222, 0.6);
}

.footer-desc {
    margin-top: 10px;
    max-width: 300px;
    line-height: 2;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 2px 10px rgba(2, 10, 20, 0.45);
}

.footer-brand-accent {
    display: block;
    width: 45px;
    height: 3px;
    margin-top: 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--footer-green), var(--footer-cyan));
}

/* ---------- Navigation ---------- */

.footer-nav-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 16px;
}

.footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
}

.footer-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    transition: color 250ms ease, transform 250ms ease;
}

.footer-nav-mark {
    width: 0;
    height: 2px;
    flex-shrink: 0;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--footer-cyan), var(--footer-green));
    transition: width 250ms ease;
}

.footer-nav a:hover {
    color: #ffffff;
    transform: translateX(-3px);
}

.footer-nav a:hover .footer-nav-mark {
    width: 13px;
}

.footer-nav a.footer-nav-highlight {
    color: rgba(140, 235, 195, 0.9);
}

.footer-nav a.footer-nav-highlight:hover {
    color: rgba(160, 245, 210, 1);
}

.footer-nav a:focus-visible {
    outline: 2px solid rgba(24, 199, 222, 0.65);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ---------- Contact / social / portfolio glass capsules ---------- */

.footer-capsules {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-capsule {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(320px, 100%);
    height: 66px;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
    overflow: hidden;
    transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease,
        background 350ms ease;
}

.footer-capsule-portfolio {
    background: linear-gradient(135deg, rgba(0, 190, 255, 0.13), rgba(20, 210, 130, 0.13));
    border-color: rgba(80, 230, 200, 0.28);
}

.footer-capsule::before {
    /* Soft shimmer / light-sweep - shared technique for all three capsules */
    content: "";
    position: absolute;
    inset: -60% -60%;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.26) 50%, transparent 58%);
    transform: translateX(-70%);
    transition: transform 700ms ease;
    pointer-events: none;
}

.footer-capsule:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2), 0 0 20px -6px rgba(24, 199, 222, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.footer-capsule-portfolio:hover {
    background: linear-gradient(135deg, rgba(0, 190, 255, 0.18), rgba(20, 210, 130, 0.18));
}

.footer-capsule:hover::before {
    transform: translateX(60%);
}

.footer-capsule-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(24, 199, 222, 0.28), rgba(25, 199, 122, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(235, 255, 250, 0.95);
    transition: transform 350ms ease;
}

.footer-capsule-icon svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
}

.footer-capsule:hover .footer-capsule-icon {
    transform: scale(1.04);
}

.footer-capsule-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-capsule-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-capsule-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-capsule-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 250ms ease, color 250ms ease;
}

.footer-capsule-arrow svg {
    width: 16px;
    height: 16px;
}

.footer-capsule:hover .footer-capsule-arrow {
    transform: translateX(-3px);
    color: rgba(255, 255, 255, 0.85);
}

/* Desktop capsule order is Phone, Instagram, Portfolio (source order);
   mobile/tablet flips it to Portfolio, Instagram, Phone per spec. */
@media (max-width: 899px) {
    .footer-capsule-phone {
        order: 3;
    }

    .footer-capsule-instagram {
        order: 2;
    }

    .footer-capsule-portfolio {
        order: 1;
    }

    .footer-capsule {
        width: 100%;
    }
}

/* ---------- Back-to-top (kept inside the panel's own bounds) ---------- */

.footer-to-top {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    cursor: pointer;
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.footer-to-top svg {
    width: 18px;
    height: 18px;
}

.footer-to-top:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 26px -6px rgba(24, 199, 222, 0.55);
}

.footer-to-top:focus-visible {
    outline: 2px solid rgba(24, 199, 222, 0.7);
    outline-offset: 3px;
}

/* ---------- Bottom bar ---------- */

.footer-bottom-line {
    position: relative;
    z-index: 1;
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 210, 230, 0.45), rgba(30, 210, 140, 0.45), transparent);
}

.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 22px;
    padding: 16px 0 22px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal {
    display: flex;
    gap: 18px;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.72);
}

.footer-bottom a:hover {
    color: #ffffff;
}

.footer-admin-link {
    opacity: 0.55;
    font-size: 0.78rem;
}

.footer-admin-link:hover {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .footer-panel,
    .footer-panel-grid > * {
        opacity: 1 !important;
        transform: none !important;
        transition: box-shadow 200ms ease, border-color 200ms ease, background 200ms ease,
            color 200ms ease !important;
    }

    .footer-capsule:hover,
    .footer-nav a:hover,
    .footer-to-top:hover,
    .footer-capsule:hover .footer-capsule-icon,
    .footer-capsule:hover .footer-capsule-arrow {
        transform: none !important;
    }

    .footer-capsule::before {
        display: none;
    }

    .footer-glow-cyan,
    .footer-glow-emerald {
        animation: none;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .footer-panel-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand nav"
            "capsules capsules";
        gap: 32px 24px;
    }

    .footer-brand {
        grid-area: brand;
    }

    .footer-nav-wrap {
        grid-area: nav;
    }

    .footer-capsules {
        grid-area: capsules;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-capsule {
        flex: 1 1 240px;
        width: auto;
    }
}

@media (min-width: 900px) {
    .site-footer {
        min-height: 560px;
        display: flex;
        align-items: center;
        padding-top: 0;
    }

    .footer-panel-wrap {
        width: 100%;
        padding: 0;
    }

    .footer-panel-grid {
        grid-template-columns: 1.05fr 0.9fr 1.05fr;
        grid-template-areas: "brand nav capsules";
        align-items: center;
        gap: 60px;
    }

    .footer-brand {
        grid-area: brand;
    }

    .footer-nav-wrap {
        grid-area: nav;
    }

    .footer-capsules {
        grid-area: capsules;
        align-items: flex-end;
    }

    /* .site-footer becomes a flex container at this breakpoint (to center
       .footer-panel-wrap vertically in the empty background); without this,
       the bottom bar/divider would become flex items too and get pulled
       into that vertical centering instead of staying pinned to the very
       bottom of the section. */
    .footer-bottom-line,
    .footer-bottom {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
    }

    .footer-bottom-line {
        bottom: 64px;
    }

    .footer-bottom {
        padding: 16px 0 20px;
    }
}

@media (max-width: 699px) {
    .footer-bg {
        background-position: 32% center;
    }
}

/* =========================================================
   Booking flow (Phase 3)
   ========================================================= */

.btn-block {
    display: flex;
    width: 100%;
}

/* ---------- Flash messages ---------- */

.site-messages {
    padding-top: 16px;
}

.site-message {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    margin-bottom: 10px;
}

.site-message-error {
    background: #fdecec;
    color: #9b2c2c;
}

.site-message-success {
    background: #e9f8f0;
    color: var(--color-accent-dark);
}

.site-message-info,
.site-message-warning {
    background: var(--color-bg-soft);
    color: var(--color-primary);
}

/* ---------- Booking layout ---------- */

.booking-section {
    padding: 32px 0 64px;
}

.booking-container.narrow {
    max-width: 620px;
    margin: 0 auto;
}

.booking-subheading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 28px 0 14px;
}

.booking-empty {
    color: var(--color-text-muted);
}

/* ---------- Progress indicator ---------- */

.booking-progress {
    margin-bottom: 28px;
}

.booking-progress ol {
    display: flex;
    gap: 8px;
}

.booking-progress li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.booking-progress .progress-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.booking-progress li.is-active {
    background: var(--color-primary);
    color: #ffffff;
}

.booking-progress li.is-active .progress-num {
    background: var(--color-accent);
    color: #ffffff;
}

.booking-progress li.is-done {
    color: var(--color-primary);
}

.booking-progress li.is-done .progress-num {
    background: var(--color-accent);
    color: #ffffff;
}

@media (max-width: 480px) {
    .booking-progress li span:last-child {
        display: none;
    }
}

/* ---------- Step 1: service cards ---------- */

.booking-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.booking-service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft-sm);
}

.booking-service-image {
    background: var(--color-bg-soft);
    aspect-ratio: 16 / 9;
}

.booking-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-service-body {
    padding: 18px 20px 22px;
}

.booking-service-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.booking-service-body p {
    margin-top: 6px;
    margin-bottom: 16px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

@media (min-width: 700px) {
    .booking-service-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Step 2: date grid ---------- */

.date-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.date-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    text-align: center;
    min-height: 44px;
}

.date-card.is-date-available:hover {
    border-color: var(--color-primary);
}

.date-card.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.date-weekday {
    font-size: 0.85rem;
    font-weight: 600;
}

.date-day-month {
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.85;
}

.date-status {
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 2px;
}

.date-card.is-date-available .date-status {
    color: var(--color-accent-dark);
}

.date-card.is-selected .date-status {
    color: #ffffff;
    opacity: 0.9;
}

.date-card.is-date-full,
.date-card.is-date-unavailable {
    cursor: not-allowed;
    background: var(--color-bg-soft);
}

.date-card.is-date-full .date-status {
    color: #9b2c2c;
}

.date-card.is-date-full .date-weekday,
.date-card.is-date-full .date-day-month {
    opacity: 0.7;
}

.date-card.is-date-unavailable {
    opacity: 0.55;
}

.date-card.is-date-unavailable .date-status {
    color: var(--color-text-muted);
}

.date-card.is-selected-muted {
    border: 2px solid var(--color-primary);
}

@media (min-width: 560px) {
    .date-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 900px) {
    .date-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ---------- Step 2: slot list ---------- */

.slot-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.slot-form {
    display: contents;
}

.slot-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    text-align: right;
    cursor: default;
}

.slot-period {
    font-weight: 700;
    color: var(--color-primary);
}

.slot-time {
    color: var(--color-text-muted);
}

.slot-state {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

button.slot-available {
    cursor: pointer;
    border-color: var(--color-accent);
}

button.slot-available:hover {
    box-shadow: var(--shadow-soft-sm);
}

.slot-available .slot-state {
    background: #e9f8f0;
    color: var(--color-accent-dark);
}

.slot-full .slot-state {
    background: #fdecec;
    color: #9b2c2c;
}

.slot-full,
.slot-inactive {
    opacity: 0.65;
}

.slot-inactive .slot-state {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

@media (min-width: 560px) {
    .slot-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.booking-empty-box {
    margin-top: 16px;
    padding: 28px 20px;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    text-align: center;
}

.booking-empty-box p {
    margin-bottom: 16px;
    color: var(--color-text-muted);
}

/* ---------- Step 3: form ---------- */

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

.field-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
}

.field-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

textarea.field-input {
    resize: vertical;
}

.field-error {
    color: #c0392b;
    font-size: 0.85rem;
}

/* ---------- Step 4: review ---------- */

.review-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin: 24px 0;
}

.review-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
}

.review-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-row dt {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    flex-shrink: 0;
}

.review-row dd {
    margin: 0;
    font-weight: 600;
    text-align: left;
}

.review-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Success page ---------- */

.success-box {
    text-align: center;
    padding: 12px 0 40px;
}

.success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9f8f0;
    color: var(--color-accent-dark);
    margin-bottom: 18px;
}

.success-icon svg {
    width: 28px;
    height: 28px;
}

.success-box h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

.tracking-code {
    margin-top: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-accent-dark);
    letter-spacing: 1px;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

/* =========================================================
   Customer panel (Phase 4)
   ========================================================= */

.text-center {
    text-align: center;
}

.panel-section {
    padding: 16px 0 64px;
    background-image:
        radial-gradient(ellipse 70% 40% at 15% 0%, rgba(31, 157, 99, 0.08), transparent 65%),
        radial-gradient(ellipse 60% 40% at 100% 10%, rgba(14, 42, 71, 0.07), transparent 65%);
}

.panel-app {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.panel-content {
    min-width: 0;
}

/* ---------- Panel top bar: greeting + avatar + logout ---------- */

.panel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-soft-sm);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.panel-topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.panel-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
}

.panel-greeting {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.panel-greeting-hello {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.panel-greeting-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-logout-form {
    flex-shrink: 0;
}

.panel-logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-soft);
    border: none;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
}

.panel-logout-btn svg {
    width: 16px;
    height: 16px;
}

.panel-logout-btn:hover {
    color: #c0392b;
    background: #fdecec;
}

/* ---------- Panel navigation: pill tabs ---------- */

.panel-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.panel-tabs::-webkit-scrollbar {
    display: none;
}

.panel-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    white-space: nowrap;
}

.panel-tab svg {
    width: 16px;
    height: 16px;
}

.panel-tab:hover {
    color: var(--color-primary);
}

.panel-tab.is-active {
    background: var(--color-primary);
    color: #ffffff;
}

.panel-tab-cta {
    background: var(--color-accent);
    color: #ffffff;
}

.panel-tab-cta:hover {
    background: var(--color-accent-dark);
    color: #ffffff;
}

/* ---------- Dashboard: KPI cards ---------- */

.panel-welcome-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 4px 0 14px;
}

.panel-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.panel-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-soft-sm);
}

.panel-kpi-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    color: var(--color-primary);
}

.panel-kpi-icon svg {
    width: 20px;
    height: 20px;
}

.panel-kpi-upcoming .panel-kpi-icon {
    color: var(--color-primary);
    background: #eaf1fb;
}

.panel-kpi-completed .panel-kpi-icon {
    color: var(--color-accent-dark);
    background: #e9f8f0;
}

.panel-kpi-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
}

.panel-kpi-label {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ---------- Empty state (premium) ---------- */

.panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 36px 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed var(--color-border);
}

.panel-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.panel-empty-icon svg {
    width: 24px;
    height: 24px;
}

.panel-empty-text {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.panel-empty .btn {
    margin-top: 4px;
}

/* ---------- Booking card (dashboard "next booking") - premium glass ---------- */

.panel-subheading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 12px;
}

.booking-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 26px;
}

.booking-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.booking-card-service {
    font-weight: 800;
    color: var(--color-primary);
    font-size: 1.08rem;
}

.booking-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.booking-card-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-card-field-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.booking-card-field-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.booking-card-tracking {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-card-actions {
    margin-top: 2px;
}

.booking-card-actions .btn {
    width: 100%;
}

@media (min-width: 640px) {
    .booking-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .booking-card-actions .btn {
        width: auto;
    }

    .booking-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}

/* ---------- Status badges ---------- */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.status-pending {
    background: #fdf3e3;
    color: #9a6b0a;
}

.status-confirmed {
    background: #e9f8f0;
    color: var(--color-accent-dark);
}

.status-on_the_way,
.status-in_progress {
    background: #eaf1fb;
    color: var(--color-primary);
}

.status-completed {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.status-cancelled {
    background: #fdecec;
    color: #9b2c2c;
}

/* ---------- Booking list: premium cards ---------- */

.booking-list-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-soft-sm);
}

.booking-row:hover {
    box-shadow: var(--shadow-soft);
}

.booking-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.booking-row-service {
    font-weight: 700;
    color: var(--color-text);
}

.booking-row-date {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.booking-row-tracking {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

@media (min-width: 560px) {
    .booking-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
    }

    .booking-row-top {
        flex: 1;
        min-width: 0;
    }

    .booking-row-tracking {
        margin-inline-start: auto;
    }
}

/* ---------- Filter tabs: pill chips ---------- */

.filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 4px 0 20px;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tabs a {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.filter-tabs a.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(14, 42, 71, 0.25);
}

/* ---------- Booking detail ---------- */

.panel-back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.panel-back-link:hover {
    color: var(--color-primary);
}

.booking-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.booking-detail-header .tracking-code {
    font-size: 1rem;
    margin: 0;
}

/* ---------- Booking status timeline ---------- */

.timeline-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-sm);
    padding: 20px 18px;
    margin-bottom: 20px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.timeline-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
}

.timeline-step:last-child {
    padding-bottom: 0;
}

/* Connecting line - drawn from the center of this step's icon down to the
   next one. Positioned on the icon column, not the text, so it still
   lines up correctly at any font size/width. */
.timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: -2px;
    right: 17px;
    width: 2px;
    background: var(--color-border);
}

.timeline-step.is-done:not(:last-child)::before {
    background: var(--color-accent);
}

.timeline-step-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    border: 2px solid var(--color-bg-soft);
}

.timeline-step-icon svg {
    width: 18px;
    height: 18px;
}

.timeline-step-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.timeline-step.is-done .timeline-step-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.timeline-step.is-done .timeline-step-title {
    color: var(--color-text);
}

.timeline-step.is-active .timeline-step-icon {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(14, 42, 71, 0.14);
}

.timeline-step.is-active .timeline-step-title {
    color: var(--color-primary);
    font-weight: 800;
}

.timeline-step.is-upcoming .timeline-step-icon {
    background: var(--color-bg-soft);
    border-color: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.timeline-step.is-upcoming .timeline-step-title {
    color: var(--color-text-muted);
}

/* ---------- Booking status: cancelled (distinct state, no timeline) ---------- */

.timeline-cancelled {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fdecec;
    border: 1px solid #f1c9c9;
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 20px;
}

.timeline-cancelled-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #9b2c2c;
}

.timeline-cancelled-icon svg {
    width: 20px;
    height: 20px;
}

.timeline-cancelled-text {
    margin: 0;
    color: #9b2c2c;
    font-weight: 600;
    font-size: 0.92rem;
}

@media (min-width: 640px) {
    .timeline-card {
        padding: 24px 22px;
    }
}

/*
 * On wide screens the timeline/employee cards are narrow by nature (a
 * short vertical list, a one-line avatar+name row) and were sitting at
 * full page width, leaving a large empty gap on one side. >=1024px they
 * sit side by side instead; mobile/tablet keep the original stacked
 * layout untouched. A single remaining card (no employee assigned, or a
 * cancelled booking with no employee) is capped to a reasonable width
 * instead of stretching across the whole row.
 */
@media (min-width: 1024px) {
    .booking-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .booking-detail-grid > .timeline-card,
    .booking-detail-grid > .timeline-cancelled,
    .booking-detail-grid > .employee-card {
        margin-bottom: 0;
    }

    .booking-detail-grid > :only-child {
        grid-column: 1 / 2;
        max-width: 480px;
    }
}

/* ---------- Assigned employee card ---------- */

.employee-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.employee-card-label {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.employee-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
}

.employee-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.employee-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.98rem;
}

.employee-role {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ---------- Header bell ---------- */

.panel-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.panel-bell {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.panel-bell:hover {
    color: var(--color-primary);
}

.panel-bell svg {
    width: 19px;
    height: 19px;
}

.panel-bell-badge {
    position: absolute;
    top: -3px;
    left: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: #c0392b;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #ffffff;
}

/* ---------- Notifications list ---------- */

.notif-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.notif-list-header .panel-welcome-heading {
    margin: 0;
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-soft-sm);
}

.notif-card.is-unread {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(14, 42, 71, 0.12);
    box-shadow: 0 0 0 1px rgba(14, 42, 71, 0.06), 0 8px 20px rgba(14, 42, 71, 0.1);
}

.notif-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

.notif-card.is-unread .notif-icon {
    background: #eaf1fb;
    color: var(--color-primary);
}

.notif-icon svg {
    width: 17px;
    height: 17px;
}

.notif-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notif-message {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.notif-card.is-unread .notif-message {
    color: var(--color-text);
    font-weight: 700;
}

.notif-time {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: 6px;
}

.notif-action-form {
    flex-shrink: 0;
}

.notif-action-btn {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--color-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.notif-action-btn-ghost {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

@media (max-width: 420px) {
    .notif-card {
        flex-wrap: wrap;
    }

    .notif-action-form {
        width: 100%;
    }

    .notif-action-btn {
        width: 100%;
    }
}

.cancel-btn {
    color: #c0392b;
    border-color: #f1c9c9;
}

.cancel-btn:hover {
    background: #fdecec;
    border-color: #c0392b;
}

/* ---------- Panel header row (addresses) ---------- */

.panel-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.panel-header-row h1 {
    margin: 0;
}

/* ---------- Generic panel form card (Profile, Address form) ---------- */

.panel-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-sm);
    padding: 20px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.panel-card .field-input {
    background: rgba(255, 255, 255, 0.9);
}

.panel-form-error {
    background: #fdecec;
    border: 1px solid #f1c9c9;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.panel-form-error p {
    margin: 0;
    color: #9b2c2c;
    font-size: 0.85rem;
}

.panel-form-error p + p {
    margin-top: 4px;
}

/* ---------- Addresses ---------- */

.address-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-soft-sm);
}

.address-title {
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.default-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    background: #e9f8f0;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
}

.address-text {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.address-desc {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.address-actions {
    display: flex;
    gap: 8px;
}

.address-actions form {
    display: contents;
}

@media (min-width: 640px) {
    .address-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Profile ---------- */

.form-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--color-text);
}

.profile-password-link {
    margin-top: 16px;
    font-size: 0.86rem;
    text-align: center;
}

.profile-password-link a {
    color: var(--color-primary);
    font-weight: 700;
}

.profile-password-link a:hover {
    text-decoration: underline;
}

/* ---------- Portfolio page (/portfolio/) ---------- */

.portfolio-page {
    padding: 48px 0 64px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
}

.portfolio-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft-sm);
}

.portfolio-card-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portfolio-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-soft);
}

.portfolio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portfolio-card-tag {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(14, 42, 71, 0.75);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
}

.portfolio-card-tag-after {
    background: rgba(31, 157, 99, 0.85);
}

.portfolio-card-body {
    padding: 18px 20px 22px;
}

.portfolio-card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
}

.portfolio-card-body p {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.portfolio-card-service {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.portfolio-empty {
    margin-top: 32px;
    color: var(--color-text-muted);
}

@media (min-width: 700px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Auth pages (login / register) ---------- */

.auth-section {
    padding: 48px 0 64px;
    display: flex;
    justify-content: center;
    background-image:
        radial-gradient(ellipse 70% 40% at 15% 0%, rgba(31, 157, 99, 0.08), transparent 65%),
        radial-gradient(ellipse 60% 40% at 100% 10%, rgba(14, 42, 71, 0.07), transparent 65%);
}

.auth-container {
    display: flex;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 28px 24px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.auth-brand {
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin: 0 0 18px;
}

.auth-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 6px;
}

.auth-subtitle {
    text-align: center;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text);
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(14, 42, 71, 0.08);
}

.auth-help-text {
    margin: 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.auth-switch {
    margin-top: 18px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.auth-switch a {
    color: var(--color-primary);
    font-weight: 700;
}

.auth-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 420px) {
    .auth-card {
        padding: 22px 18px;
    }
}