/* ===== Script-size trim =====
 *
 * Georgian sets larger on the page than Latin at the same nominal size — taller
 * x-height, more counters, and no ascender-free lowercase to fall back on — so a
 * layout tuned in English reads heavy in Georgian. Every font-size at or above 13px
 * is written as calc(N - var(--ka-trim)) and this decides what N is reduced by.
 *
 * Nothing below 13px is trimmed: 2pt off an 11px label leaves 8.3px, which is not a
 * smaller font so much as an unreadable one.
 *
 * Scoped by the lang attribute the layout already writes on <html>, so it follows the
 * language the reader chose and needs nothing passed to the stylesheet.
 */
:root {
    --ka-trim: 0px;
}

html[lang^="ka"] {
    --ka-trim: 2.67px;   /* 2pt at 96dpi */
}



/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1a1a;
}*/

/* ===== Navbar ===== */
/*.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px;
    border-bottom: 1px solid #e0e0e0;*/ /* the thin gray line */
    /*background-color: #ffffff;
}*/

/* Brand (logo + name + tagline) */
/*.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .navbar-brand .logo {
        width: 34px;
        height: 34px;
    }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name {
    font-weight: 700;
    font-size: calc(16px - var(--ka-trim, 0px));
    color: #1a1a1a;
}

.brand-tagline {
    font-size: 11px;
    color: #8a8a8a;
}*/

/* Nav links */
/*.navbar-links {
    display: flex;
    align-items: center;
    gap: 36px;
}

    .navbar-links a {
        text-decoration: none;
        color: #1a1a1a;
        font-size: 14px;
        font-weight: 500;
        padding-bottom: 6px;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .navbar-links a:hover {
            color: #2e7d32;
        }

        .navbar-links a.active {
            color: #2e7d32;
            border-bottom: 2px solid #2e7d32;
        }*/

/* Language selector */
/*.navbar-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
}

    .navbar-lang .globe-icon {
        font-size: calc(15px - var(--ka-trim, 0px));
    }*/


/* wwwroot/css/site.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1a1a;
}

/* ===== Navbar =====
   Deep green, matching .site-footer (#054529), so the light content sits
   between two brand-coloured bands. Accents are the logo green #00A65A;
   text is white and a desaturated green-grey for anything secondary. */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 40px;
    background-color: #054529;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 10px rgba(4, 61, 34, 0.18);

    /* Stays put on the long dashboard and route pages. Above the hero's
       layers (which top out at z-index 3) and the lang menu's own stacking. */
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Brand */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .navbar-brand .logo {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-name {
    font-weight: 700;
    font-size: calc(22px - var(--ka-trim, 0px));
    letter-spacing: -0.2px;
    color: #ffffff;
}

.brand-tagline {
    font-size: 12px;
    color: #a3cbb6;
}

/* Nav links */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

    .navbar-links a {
        text-decoration: none;
        color: #d6e7dc;
        font-size: calc(15px - var(--ka-trim, 0px));
        font-weight: 500;
        padding-bottom: 4px;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .navbar-links a:hover {
            color: #ffffff;
            border-bottom-color: rgba(255, 255, 255, 0.35);
        }

        /* The current page reads as white text; the green underline carries
           the brand accent without dropping contrast on a dark bar. */
        .navbar-links a.active {
            color: #ffffff;
            font-weight: 600;
            border-bottom-color: #00A65A;
        }

/* Primary call to action for signed-out visitors. Filled, so registering is
   the one obviously clickable thing in the bar. White rather than the logo
   green: white on #00A65A is 3.2:1, short of AA, whereas #065430 on white is
   9:1 and the pill pops harder against the dark bar besides. */
.navbar-links a.navbar-cta {
    padding: 9px 18px;
    border-radius: 999px;
    border-bottom: none;
    background-color: #ffffff;
    color: #065430;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .navbar-links a.navbar-cta:hover {
        background-color: #eaf7ec;
        color: #043d22;
        border-bottom: none;
        transform: translateY(-1px);
    }

/* ===== Header tools =====
   The gear and the globe, kept as one group at the right-hand end so the bar still lays
   out as brand / links / tools rather than spreading four things across its width. */
.navbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Account settings (gear) =====
   Round rather than the pill the language switcher wears: it carries an icon and no text,
   and a pill around a single glyph reads as a button missing its label. */
.navbar-settings {
    position: relative;
}

.settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .settings-toggle:hover {
        background-color: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.45);
    }

    .settings-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    }

    .settings-toggle.open {
        background-color: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .settings-toggle .settings-gear {
        width: 17px;
        height: 17px;
        opacity: 0.92;
        transition: transform 0.25s ease;
    }

    .settings-toggle.open .settings-gear {
        transform: rotate(45deg);
    }

/* Same card as the language panel, so the two dropdowns beside each other are plainly the
   same kind of thing. */
.settings-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(4, 61, 34, 0.22);
    min-width: 210px;
    padding: 6px;
    display: none;
    z-index: 20;
    animation: lang-menu-in 0.14s ease-out;
}

    .settings-menu.show {
        display: block;
    }

    .settings-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 11px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
        text-decoration: none;
        white-space: nowrap;
    }

        .settings-menu a:hover {
            background-color: #eef7f1;
            color: #065430;
        }

        .settings-menu a:focus-visible {
            outline: 2px solid #065430;
            outline-offset: -2px;
        }

        .settings-menu a svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            opacity: 0.75;
        }

/* ===== Change-password dialogue ===== */

.pw-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(6, 32, 20, 0.55);
    overflow-y: auto;

    /* Reserved on both sides, so a dialogue tall enough to need a scrollbar does not get
       nudged off centre by the width of one. */
    scrollbar-gutter: stable both-edges;
    animation: pw-fade 0.15s ease-out;
}

    .pw-overlay[hidden] {
        display: none;
    }

@keyframes pw-fade {
    from {
        opacity: 0;
    }
}

/* The page behind must not scroll under the dialogue: a modal that moves when you spin the
   wheel over it looks broken even when it is not. */
body.pw-open {
    overflow: hidden;
}

.pw-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fbfdfb;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(4, 40, 24, 0.35);
    padding: 30px 34px 34px 34px;
    animation: pw-rise 0.18s ease-out;
}

@keyframes pw-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.pw-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: #0f7a45;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .pw-close:hover {
        background-color: #e8f4ec;
        color: #065430;
    }

    .pw-close:focus-visible {
        outline: 2px solid #065430;
        outline-offset: 1px;
    }

    .pw-close svg {
        width: 19px;
        height: 19px;
    }

.pw-title {
    margin: 0 0 22px 0;
    text-align: center;
    font-size: calc(25px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #0d2c1c;
}

.pw-alert {
    margin: 0 0 16px 0;
    padding: 10px 13px;
    border-radius: 10px;
    background-color: #fdecec;
    border: 1px solid #f3c6c6;
    color: #97231f;
    font-size: 13.5px;
    line-height: 1.5;
}

    .pw-alert[hidden] {
        display: none;
    }

.pw-field {
    margin-bottom: 18px;
}

    .pw-field label {
        display: block;
        margin-bottom: 7px;
        font-size: 14px;
        font-weight: 700;
        color: #12351f;
    }

/* The complaint sits above the box it is about, so it is read before the thing being
   retyped rather than discovered underneath it. */
.pw-error {
    margin: 0 0 7px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #c0342e;
}

    .pw-error[hidden] {
        display: none;
    }

.pw-input-wrap {
    position: relative;
}

    .pw-input-wrap input {
        width: 100%;
        padding: 13px 46px 13px 15px;
        font-family: inherit;
        font-size: 14.5px;
        color: #12351f;
        background: #ffffff;
        border: 1px solid #d5e3d9;
        border-radius: 10px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .pw-input-wrap input::placeholder {
            color: #9aa8a0;
        }

        .pw-input-wrap input:focus {
            outline: none;
            border-color: #0f7a45;
            box-shadow: 0 0 0 3px rgba(15, 122, 69, 0.15);
        }

.pw-field:has(.pw-error:not([hidden])) .pw-input-wrap input {
    border-color: #e0a5a2;
}

.pw-reveal {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 7px;
    color: #0f7a45;
    cursor: pointer;
}

    .pw-reveal:hover {
        background-color: #eef7f1;
    }

    .pw-reveal:focus-visible {
        outline: 2px solid #065430;
        outline-offset: -1px;
    }

    .pw-reveal svg {
        width: 18px;
        height: 18px;
    }

    /* Struck through while the password is on show, so the button says which state it is in
       rather than only what pressing it would do. */
    .pw-reveal.revealed svg {
        opacity: 0.55;
    }

/* The rules, stated up front. */
.pw-rules {
    margin: 0 0 20px 0;
    padding: 16px 18px;
    background-color: #f2f9f4;
    border: 1px solid #d9ecdf;
    border-radius: 12px;
}

    .pw-rules h3 {
        margin: 0 0 12px 0;
        font-size: 14.5px;
        font-weight: 700;
        color: #0d2c1c;
    }

.pw-rules-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pw-rules-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #e0f0e6;
    color: #0f7a45;
}

    .pw-rules-badge svg {
        width: 24px;
        height: 24px;
    }

.pw-rules ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #37503f;
}

.pw-submit {
    width: 100%;
    padding: 14px;
    font-family: inherit;
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #ffffff;
    background-color: #0d6b3c;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .pw-submit:hover:not(:disabled) {
        background-color: #0a5730;
    }

    .pw-submit:focus-visible {
        outline: 3px solid rgba(15, 122, 69, 0.4);
        outline-offset: 2px;
    }

    /* Visibly unavailable rather than merely inert: a button that looks pressable and does
       nothing reads as a broken page, not as a rule not yet met. */
    .pw-submit:disabled {
        background-color: #a9c6b5;
        cursor: not-allowed;
    }

@media (max-width: 560px) {
    .pw-dialog {
        padding: 26px 20px 28px 20px;
    }

    .pw-rules-body {
        gap: 12px;
    }

    .pw-rules-badge {
        display: none;
    }
}

/* ===== Language dropdown ===== */
.navbar-lang {
    position: relative;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.26);
    cursor: pointer;
    padding: 7px 10px 7px 11px;
    border-radius: 999px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .lang-toggle:hover {
        background-color: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.45);
    }

    /* Visible focus, because this is reachable by keyboard and sits on a dark bar where
       the browser's default outline all but disappears. */
    .lang-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    }

    .lang-toggle.open {
        background-color: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* Drawn rather than typed: the emoji globe renders at a different size and baseline in
       every browser, and on Windows it arrived in full colour next to white text. */
    .lang-toggle .lang-globe {
        width: 16px;
        height: 16px;
        opacity: 0.9;
        flex-shrink: 0;
    }

    .lang-toggle .lang-arrow {
        width: 12px;
        height: 12px;
        opacity: 0.75;
        transition: transform 0.18s ease;
    }

    .lang-toggle.open .lang-arrow {
        transform: rotate(180deg);
    }

/* The menu itself stays a light card: a dropdown panel reads as a surface
   sitting on the page, not as part of the bar. */
.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(4, 61, 34, 0.22);
    min-width: 190px;
    padding: 6px;
    display: none;
    z-index: 20;
    overflow: hidden;
    animation: lang-menu-in 0.14s ease-out;
}

@keyframes lang-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

    .lang-menu.show {
        display: block;
    }

    .lang-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 9px 11px;
        border-radius: 9px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        background: none;
        border: none;
        cursor: pointer;
        color: #1f2937;
        white-space: nowrap;
    }

        .lang-menu button:hover {
            background-color: #eef7f1;
        }

        .lang-menu button:focus-visible {
            outline: 2px solid #065430;
            outline-offset: -2px;
        }

/* The two-letter code, boxed so the three rows line up on something other than the
   scripts, which have wildly different widths. */
.lang-menu .lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 6px;
    border-radius: 6px;
    background-color: #f1f5f3;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.lang-menu .lang-name {
    flex: 1;
}

        /* The language already in use. Marked rather than hidden, so the panel always
           shows all three and the current one is simply the one already ticked. */
        .lang-menu button.lang-selected {
            background-color: #f1f7f3;
            color: #065430;
            font-weight: 700;
        }

            .lang-menu button.lang-selected .lang-code {
                background-color: #065430;
                color: #ffffff;
            }

            .lang-menu button.lang-selected::after {
                content: "✓";
                color: #00A65A;
                font-weight: 700;
            }

/* ===== Narrow screens ===== */
/* ----- The menu button ----- */

/* Off on a wide screen, where the bar has room to show every destination at once. */
.navbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background-color: transparent;
    cursor: pointer;
}

    .navbar-toggle:hover {
        background-color: rgba(255, 255, 255, 0.10);
    }

    .navbar-toggle:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

/* Drawn from one element and its two pseudo-elements rather than three spans, so the
   markup carries a control and not a picture of one. */
.navbar-toggle-bars,
.navbar-toggle-bars::before,
.navbar-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: #ffffff;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.navbar-toggle-bars {
    position: relative;
}

    .navbar-toggle-bars::before,
    .navbar-toggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .navbar-toggle-bars::before {
        top: -6px;
    }

    .navbar-toggle-bars::after {
        top: 6px;
    }

/* Open, the three bars become a cross: the control says what pressing it again will do. */
.navbar-toggle.is-open .navbar-toggle-bars {
    background-color: transparent;
}

    .navbar-toggle.is-open .navbar-toggle-bars::before {
        top: 0;
        transform: rotate(45deg);
    }

    .navbar-toggle.is-open .navbar-toggle-bars::after {
        top: 0;
        transform: rotate(-45deg);
    }

@media (max-width: 900px) {
    .navbar {
        flex-wrap: wrap;
        gap: 14px;
        padding: 12px 20px;
    }

    .navbar-toggle {
        display: inline-flex;
    }

    /* The destinations were a wrapping row of their own, which cost a fifth of the window
       standing open on every page and still pushed Sign out onto a line by itself. Behind
       the button they cost nothing until they are wanted, and each then gets a full row
       that a finger can hit. */
    .navbar-links {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

        .navbar-links.is-open {
            display: flex;
        }

        .navbar-links a,
        .navbar-links .navbar-logout-btn {
            display: block;
            width: 100%;
            padding: 13px 4px;
            text-align: left;
        }

    /* Sign out is a form, so without this it sits inline and reads as a stray control
       rather than the last row of the menu. */
    .navbar-logout-form {
        display: block;
        width: 100%;
    }

    /* Sign up keeps its pill, but as a row of its own with room around it. */
    .navbar-cta {
        margin-top: 8px;
        text-align: center;
        padding: 12px 16px;
    }

    .brand-tagline {
        display: none;
    }
}

/* The bar is sticky, so on a phone its height is charged against every screen of every
   page, not just the first. Wrapped onto three rows it measured 157px — a fifth of a
   360×800 screen permanently spent on navigation. This buys most of that back without
   hiding anything behind a menu: the row of links stays visible, it just stops being
   spaced like a desktop bar. */
@media (max-width: 640px) {
    .navbar {
        gap: 8px;
        padding: 8px 14px;
    }

    .brand-name {
        font-size: calc(19px - var(--ka-trim, 0px));
    }

    .brand-logo-icon svg {
        width: 30px;
        height: 30px;
    }
}







/*HOME css*/




/* ===== Hero Section ===== */
/*.hero {
    position: relative;
    width: 100%;
    height: 90vh;*/ /* scales with screen instead of fixed px */
    /*min-height: 560px;
    max-height: 920px;*/ /* stops it getting too tall on huge screens */
    /*display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;*/ /* was "top center" � shifts image up, reveals more bottom */
    /*display: block;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
    /*  background: linear-gradient( to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.05) 65% );*/
    /*z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 560px;*/
    /* UPDATED: Increased left padding from 90px to 120px to pull text further right */
    /*padding: 70px 50px 60px 120px;
}

.hero-badge {
    display: inline-block;
    background-color: #eaf7ec;
    color: #2e7d32;
    font-size: calc(16px - var(--ka-trim, 0px));*/ /* UPDATED: Increased from 14px */
    /*font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.hero-title {
    font-size: calc(54px - var(--ka-trim, 0px));*/ /* UPDATED: Increased from 50px */
    /*font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 22px;
}

    .hero-title .highlight {
        color: #2e7d32;
    }

.hero-subtext {
    font-size: calc(22px - var(--ka-trim, 0px));*/ /* UPDATED: Increased from 18px */
    /*color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 38px;
    max-width: 480px;
}

.hero-features {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(17px - var(--ka-trim, 0px));*/ /* UPDATED: Increased from 15px */
    /*font-weight: 500;
    color: #1a1a1a;
}

.feature-icon {
    font-size: calc(25px - var(--ka-trim, 0px));*/ /* UPDATED: Increased from 17px */
/*}

@media (max-width: 768px) {
    .hero {
        min-height: 640px;
    }
}*/









/* ===== Why Choose Us / How It Works Section ===== */
/*.why-how-section {
    display: flex;
    width: 100%;
    
}*/

/* ---------- LEFT: Why Choose Us ---------- */
/*.why-choose {
    flex: 1;
    background-image: url("/images/leaves.png");
    background-size: cover;
    background-position: center;
    background-color: #1e5e33;
    display: flex;
    align-items: center;
}

.why-choose-overlay {
    padding: 60px 70px;
    max-width: 520px;*/
    /* Pushes content slightly inwards if needed, or margin: 0 auto; to center inside the half */
    /*margin: 0 auto;
}

.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

    .section-label.light {
        color: #8fd9a3;
    }

    .section-label.dark {
        color: #2e7d32;
    }

.why-title {
    font-size: calc(34px - var(--ka-trim, 0px));
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 44px;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.why-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;*/ /* Changed to solid white to make green icons pop */
    /*display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d32;*/ /* Turns the SVG icon green */
/*}*/

    /* Size for the new SVG icons */
    /*.why-icon svg {
        width: 22px;
        height: 22px;
    }

.why-text h4 {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.why-text p {
    font-size: 14px;
    color: #cfe8d6;
    line-height: 1.5;
    max-width: 340px;
}*/

/* ---------- RIGHT: How It Works ---------- */
/*.how-it-works {
    flex: 1;
    background-color: #f4f8f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;*/ /* Slight bump to vertical padding for breathing room */
/*}

.how-title {
    font-size: calc(32px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 70px;
}

.steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
    position: relative;
}

.step-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #2e7d32;*/ /* Turns the SVG icon green */
/*}*/

/* Size for the new SVG icons */
/*.step-icon {
    width: 40px;
    height: 40px;
}

.step-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #2e7d32;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.step h4 {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.step p {
    font-size: 14px;
    color: #6a6a6a;
    line-height: 1.5;
}*/

/* Dotted connector line between steps */
/*.step-connector {
    width: 90px;
    border-top: 2px dotted #b7dfc0;
    margin-top: 45px;
}*/

/* ---------- Responsive ---------- */
/*@media (max-width: 992px) {
    .why-how-section {
        flex-direction: column;
        min-height: auto;
    }

    .steps-row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .step-connector {
        display: none;
    }
}*/




/* ===== Package Suggestions Section ===== */
/*.package-suggestions-section {
    background-color: #f1f7f3;*/ /* Light green background tint */
    /*padding: 70px 24px;*/ /* Slightly increased section padding */
    /*width: 100%;
    box-sizing: border-box;
}

.package-container {
    max-width: 1400px;*/ /* UPDATED: Expanded from 1280px for larger cards & wider gaps */
    /*margin: 0 auto;
    text-align: center;
}

.package-section-title {
    color: #2e7d32;
    font-size: calc(35px - var(--ka-trim, 0px));*/ /* UPDATED: Slightly larger header label */
    /*font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;*/ /* UPDATED: Increased gap between cards from 20px to 32px */
/*}

.package-card {
    background-color: #ffffff;
    border-radius: 20px;*/ /* Slightly curvier corners for bigger card */
    /*padding: 34px 28px;*/ /* UPDATED: Increased internal card padding */
    /*display: flex;
    align-items: center;
    gap: 22px;*/ /* UPDATED: More space between icon and text */
    /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    text-align: left;
}*/

/* Green Icons */
/*.package-icon {
    flex-shrink: 0;
    width: 62px;*/ /* UPDATED: Increased icon size from 50px */
    /*height: 62px;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .package-icon svg {
        width: 100%;
        height: 100%;
        stroke-width: 1.8px;
    }

.package-details {
    display: flex;
    flex-direction: column;
}

.package-name {
    font-size: calc(19px - var(--ka-trim, 0px));*/ /* UPDATED: Larger card title */
    /*font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}

.package-description {
    font-size: 14px;*/ /* UPDATED: Larger body text */
    /*color: #555555;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.package-price {
    font-size: calc(26px - var(--ka-trim, 0px));*/ /* UPDATED: Larger price text */
    /*font-weight: 800;
    color: #2e7d32;
}*/

/* Responsive adjustments */
/*@media (max-width: 1200px) {
    .package-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 650px) {
    .package-grid {
        grid-template-columns: 1fr;
    }
}*/








/* ===== How Payment Works Banner ===== */
/*.payment-works-section {
    background-color: #f1f7f3;
    width: 100%;
    padding: 40px 40px;*/ /* Slightly increased padding for bigger images */
    /*box-sizing: border-box;
    overflow: hidden;
}

.payment-works-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}*/

/* UPDATED: Increased wrapper width from 250px to 320px */
/*.payment-banner-img {
    flex: 0 0 320px;
    max-width: 320px;
    display: flex;
    align-items: center;
}*/

    /* UPDATED: Increased max-height from 140px to 220px */
    /*.payment-banner-img img,
    img.payment-img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 220px;
        object-fit: contain;
        display: block;
    }

.payment-img-left {
    justify-content: flex-start;
}

.payment-img-right {
    justify-content: flex-end;
}

.payment-works-content {
    text-align: center;
    flex: 1;
}

.payment-label {
    display: block;
    color: #2e7d32;
    font-size: calc(29px - var(--ka-trim, 0px));
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.payment-title {
    font-size: calc(34px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px 0;
    line-height: 1.2;
}

.payment-subtext {
    font-size: calc(16px - var(--ka-trim, 0px));
    color: #4b5563;
    margin: 0;
}*/

/* Responsive Styles for Tablet & Mobile */
/*@media (max-width: 900px) {
    .payment-works-container {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .payment-banner-img {
        flex: unset;
        max-width: 100%;
        justify-content: center !important;
    }

        .payment-banner-img img,
        img.payment-img {
            max-height: 160px;
        }

    .payment-title {
        font-size: calc(28px - var(--ka-trim, 0px));
    }
}*/













/*HOME css*/




/* ===== Hero Section ===== */
.hero {
    position: relative;
    width: 100%;
    height: 90vh; /* scales with screen instead of fixed px */
    min-height: 560px;
    max-height: 920px; /* stops it getting too tall on huge screens */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* <picture> only exists to choose between two cuts of the photograph; it must not become
   a box in the layout, or the image inside it stops being the hero's backdrop. */
.hero-picture {
    display: contents;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The frame is wider than the photograph, so cover trims its height. Holding the crop
       window near the top of the frame keeps the road out of the bottom edge and leaves
       air above the collector's cap, which is where the section wants its breathing room. */
    object-position: center 15%;
    display: block;
    z-index: 1;
}

/* On a narrow screen the picture stops being a backdrop and becomes a band above the words.

   The photograph carries its own white fade across its left half: it was cut for a layout
   with the words on the left and the picture on the right. A phone has no left and right,
   so cover crops it to a narrow vertical strip — centred, that strip lands on the fade and
   shows a washed background with a pair of legs in it. Moving the strip across fixes the
   crop but creates the other problem: the man and the black bag then sit directly behind
   four lines of small text, and no amount of scrim makes that comfortable without washing
   the photograph back out. One of the two has to give way, and on a screen this narrow it
   is the overlap itself. Each gets its own room: the picture reads as a picture, and the
   text sits on a plain ground where every line is legible. */
@media (max-width: 900px) {
    .hero {
        display: block;
        height: auto;
        min-height: 0;
        max-height: none;
        background-color: #f3f8f4;
    }

    /* The narrow cut is square and already framed on the collector, so height follows the
       width rather than being a fixed number that would crop it again on a wider phone.
       Capped, because a square band is the full width tall: harmless at 390, but 820 on a
       tablet would spend the whole first screen on the photograph and push every word of
       the page below the fold. Past the cap the square is trimmed top and bottom, which
       costs sky and pavement and no part of the subject. */
    .hero-bg-image {
        position: relative;
        height: auto;
        aspect-ratio: 1;
        max-height: min(52vh, 460px);
        /* Only bites once the cap has trimmed the square. Centred, the trim takes as much
           off the top as the bottom and the collector loses his head, since he stands in
           the upper half and the pavement fills the lower. Held high, what goes is
           pavement. Below the cap the whole square is shown and this has no effect. */
        object-position: center 18%;
    }

    /* The scrim exists to lift text off the photograph. Nothing is on it now. */
    .hero-overlay {
        display: none;
    }

    .hero-content {
        max-width: none;
    }
}

/* The scrim the heading is read against.

   On a wide screen the photograph is bright on its left, so dark text on it happened to
   be legible and this gradient was commented out. A phone has no left half: the layout
   collapses, the text lands over the worker and the truck, and the same dark text goes
   unreadable. The gradient is restored and turned with the layout — across on a wide
   screen, down on a narrow one, where the text is at the top and the photograph below. */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.92) 38%,
        rgba(255, 255, 255, 0.55) 58%,
        rgba(255, 255, 255, 0.05) 78%);
}

@media (min-width: 900px) {
    .hero-overlay {
        background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.95) 25%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0.05) 65%);
    }
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 560px;

    /* Fluid rather than fixed. The old 120px left padding did not shrink, so on a
       360px phone the block measured 419px and the heading was cut off at the screen
       edge. Written as clamp() rather than as another breakpoint because padding is a
       continuous quantity — a media query only moves the cliff, it does not remove it. */
    padding: clamp(28px, 6vw, 70px)
             clamp(20px, 5vw, 50px)
             clamp(28px, 5vw, 60px)
             clamp(20px, 9vw, 120px);
}

.hero-badge {
    display: inline-block;
    background-color: #eaf7ec;
    color: #2e7d32;
    font-size: calc(16px - var(--ka-trim, 0px)); /* UPDATED: Increased from 14px */
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.hero-title {
    /* Georgian sets wider than Latin at the same size, and the headline is two long
       words with a hard break between them, so it is the first thing to overflow. */
    font-size: clamp(26px, 6.5vw, 54px);
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 22px;
}

    .hero-title .highlight {
        color: #2e7d32;
    }

.hero-subtext {
    font-size: calc(22px - var(--ka-trim, 0px)); /* UPDATED: Increased from 18px */
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 38px;
    max-width: 480px;
}

.hero-features {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(17px - var(--ka-trim, 0px)); /* UPDATED: Increased from 15px */
    font-weight: 500;
    color: #1a1a1a;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px; /* same footprint as previous emoji size */
    height: 25px;
    color: #2e7d32; /* green to match site vibe */
}

    .feature-icon svg {
        width: 25px;
        height: 25px;
        stroke: #2e7d32;
    }

@media (max-width: 768px) {
    .hero {
        min-height: 640px;
    }
}









/* ===== Why Choose Us / How It Works Section ===== */
.why-how-section {
    display: flex;
    width: 100%;
}

/* ---------- LEFT: Why Choose Us ---------- */
.why-choose {
    flex: 1;
    background-image: url("/images/leaves.png");
    background-size: cover;
    background-position: center;
    background-color: #1e5e33;
    display: flex;
    align-items: center;
}

.why-choose-overlay {
    /* 70px a side does not fit a phone twice over; fluid so it keeps its generosity on
       a wide screen without pushing the panel past the viewport on a narrow one. */
    padding: clamp(32px, 6vw, 60px) clamp(20px, 6vw, 70px);
    max-width: 520px;
    /* Pushes content slightly inwards if needed, or margin: 0 auto; to center inside the half */
    margin: 0 auto;
}

.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

    .section-label.light {
        color: #8fd9a3;
    }

    .section-label.dark {
        color: #2e7d32;
    }

.why-title {
    font-size: calc(34px - var(--ka-trim, 0px));
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 44px;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.why-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff; /* Changed to solid white to make green icons pop */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d32; /* Turns the SVG icon green */
}

    /* Size for the new SVG icons */
    .why-icon svg {
        width: 22px;
        height: 22px;
    }

.why-text h4 {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.why-text p {
    font-size: 14px;
    color: #cfe8d6;
    line-height: 1.5;
    max-width: 340px;
}

/* ---------- RIGHT: How It Works ---------- */
.how-it-works {
    flex: 1;
    background-color: #f4f8f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px; /* Slight bump to vertical padding for breathing room */
}

.how-title {
    font-size: calc(32px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 70px;
}

.steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
    position: relative;
}

.step-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #2e7d32; /* Turns the SVG icon green */
}

/* Size for the new SVG icons */
.step-icon {
    width: 40px;
    height: 40px;
}

.step-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #2e7d32;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.step h4 {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.step p {
    font-size: 14px;
    color: #6a6a6a;
    line-height: 1.5;
}

/* Dotted connector line between steps */
.step-connector {
    width: 90px;
    border-top: 2px dotted #b7dfc0;
    margin-top: 45px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .why-how-section {
        flex-direction: column;
        min-height: auto;
    }

    .steps-row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .step-connector {
        display: none;
    }
}




/* ===== Package Suggestions Section ===== */
.package-suggestions-section {
    background-color: #f1f7f3; /* Light green background tint */
    padding: 70px 24px; /* Slightly increased section padding */
    width: 100%;
    box-sizing: border-box;
}

.package-container {
    max-width: 1400px; /* UPDATED: Expanded from 1280px for larger cards & wider gaps */
    margin: 0 auto;
    text-align: center;
}

.package-section-title {
    color: #2e7d32;
    font-size: calc(35px - var(--ka-trim, 0px)); /* UPDATED: Slightly larger header label */
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px; /* UPDATED: Increased gap between cards from 20px to 32px */
}

.package-card {
    background-color: #ffffff;
    border-radius: 20px; /* Slightly curvier corners for bigger card */
    /* 28px a side plus the gap does not fit a 320px screen once the section's own padding
       is taken off, and the cards ran 8px past the edge. Fluid, so the roominess survives
       on a wide screen without deciding the card's minimum width on a narrow one. */
    padding: clamp(20px, 5vw, 34px) clamp(16px, 5vw, 28px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 4vw, 22px); /* UPDATED: More space between icon and text */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    text-align: left;
    min-width: 0;
}

/* Green Icons */
.package-icon {
    flex-shrink: 0;
    width: 62px; /* UPDATED: Increased icon size from 50px */
    height: 62px;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .package-icon svg {
        width: 100%;
        height: 100%;
        stroke-width: 1.8px;
    }

.package-details {
    display: flex;
    flex-direction: column;
}

.package-name {
    font-size: calc(19px - var(--ka-trim, 0px)); /* UPDATED: Larger card title */
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}

.package-description {
    font-size: 14px; /* UPDATED: Larger body text */
    color: #555555;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.package-price {
    font-size: calc(26px - var(--ka-trim, 0px)); /* UPDATED: Larger price text */
    font-weight: 800;
    color: #2e7d32;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .package-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 650px) {
    .package-grid {
        grid-template-columns: 1fr;
    }
}








/* ===== How Payment Works Banner ===== */
.payment-works-section {
    background-color: #f1f7f3;
    width: 100%;
    padding: 40px 40px; /* Slightly increased padding for bigger images */
    box-sizing: border-box;
    overflow: hidden;
}

.payment-works-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* UPDATED: Increased wrapper width from 250px to 320px */
.payment-banner-img {
    flex: 0 0 320px;
    max-width: 320px;
    display: flex;
    align-items: center;
}

    /* UPDATED: Increased max-height from 140px to 220px */
    .payment-banner-img img,
    img.payment-img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 220px;
        object-fit: contain;
        display: block;
    }

.payment-img-left {
    justify-content: flex-start;
}

.payment-img-right {
    justify-content: flex-end;
}

.payment-works-content {
    text-align: center;
    flex: 1;
}

/* The kicker above the heading. It was set at 29px — near the heading's own 34px — which
   is what made the section read as its title printed twice at two sizes. Every other
   kicker on the site (.section-label, .process-badge) sits at 12–13px; this now matches. */
.payment-label {
    display: block;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.payment-title {
    font-size: clamp(24px, 4.5vw, 34px);
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.payment-subtext {
    font-size: calc(16px - var(--ka-trim, 0px));
    color: #4b5563;
    margin: 0 auto;
    max-width: 46ch;
    line-height: 1.6;
}

/* ----- The three steps ----- */

.payment-steps {
    list-style: none;
    margin: 22px auto 0;
    padding: 0;
    max-width: 52ch;
    display: grid;
    gap: 14px;
    text-align: left;
}

    .payment-steps li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: calc(15.5px - var(--ka-trim, 0px));
        line-height: 1.5;
        color: #374151;
    }

.payment-step-n {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: #e8f3ea;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* The one mistake that costs a client their payment being recognised, so it is set apart
   rather than left as a fourth step nobody reads down to. */
.payment-note {
    margin: 20px auto 0;
    max-width: 52ch;
    padding: 12px 16px;
    border-left: 3px solid #f59e0b;
    background-color: #fffbeb;
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #7c5a10;
    text-align: left;
}

/* Responsive Styles for Tablet & Mobile */
@media (max-width: 900px) {
    .payment-works-container {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .payment-banner-img {
        flex: unset;
        max-width: 100%;
        justify-content: center !important;
    }

        .payment-banner-img img,
        img.payment-img {
            max-height: 160px;
        }

    .payment-title {
        font-size: calc(28px - var(--ka-trim, 0px));
    }
}




















/* ===== Footer Section ===== */
.site-footer {
    background-color: #054529; /* Matches the dark green background */
    color: #ffffff;
    padding: 60px 20px 20px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* 5 Column Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 50px;
}

/* Headings */
.footer-col h4 {
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    margin-bottom: 24px;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Brand Column */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.brand-logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.brand-text h3 {
    font-size: calc(20px - var(--ka-trim, 0px));
    font-weight: 700;
    margin: 0 0 2px 0;
}

.brand-text p {
    font-size: 13px;
    color: #a3cbb6; /* Light greenish-gray text */
    margin: 0;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 12px;
}

    .footer-socials a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent circles */
        color: #ffffff;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

        .footer-socials a:hover {
            background-color: #00A65A;
        }

    .footer-socials svg {
        width: 16px;
        height: 16px;
    }

/* Link Columns */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .footer-links li a {
        color: #a3cbb6;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }

        .footer-links li a:hover {
            color: #ffffff;
        }

/* Contact Column */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .footer-contact-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: #a3cbb6;
    }

/* Green Contact Icons */
.footer-contact-icon {
    width: 18px;
    height: 18px;
    color: #00A65A; /* Matches the bright green from the screenshot */
    flex-shrink: 0;
}

/* Bottom Copyright Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    text-align: center;
}

    .footer-bottom p {
        font-size: 13px;
        color: #a3cbb6;
        margin: 0;
    }

/* Responsive Tablet */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 50px;
    }

    /* Make brand col span wider on tablet */
    .brand-col {
        grid-column: span 3;
    }
}

/* Responsive Mobile */
@media (max-width: 650px) {
    .footer-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .brand-col {
        grid-column: span 1;
    }
}




















/*ABOUT US SECTION*/

/* ===== What Do We Do Section ===== */
/* ===== What Do We Do Section ===== */
/* Same problem as the home hero, and the same answer. The text is laid straight onto the
   photograph with nothing between them. A wide screen crops the image so the truck sits
   to the right of the words; a phone crops to the centre and puts the truck directly
   behind them. The gradient is layered on the element rather than added as a markup
   element, and turns with the layout the way the hero's does. */
.what-we-do-section {
    background-image: linear-gradient(to bottom,
                          rgba(255, 255, 255, 0.96) 0%,
                          rgba(255, 255, 255, 0.90) 42%,
                          rgba(255, 255, 255, 0.45) 64%,
                          rgba(255, 255, 255, 0.05) 82%),
                      url('/images/CarWaste.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 520px;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 40px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

@media (min-width: 900px) {
    .what-we-do-section {
        background-image: linear-gradient(to right,
                              rgba(255, 255, 255, 0.97) 0%,
                              rgba(255, 255, 255, 0.90) 30%,
                              rgba(255, 255, 255, 0.40) 52%,
                              rgba(255, 255, 255, 0) 70%),
                          url('/images/CarWaste.png');
    }
}

.what-we-do-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.what-we-do-content {
    max-width: 600px;
}

/* Service Badge */
.service-badge {
    display: inline-block;
    background-color: #dcefdc;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 22px;
}

/* Heading & Paragraph */
.what-we-do-title {
    font-size: calc(52px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #0b2b18;
    line-height: 1.15;
    margin: 0 0 18px 0;
}

.what-we-do-description {
    font-size: calc(17px - var(--ka-trim, 0px));
    color: #4f6356;
    line-height: 1.6;
    margin: 0 0 45px 0;
}

/* Features Row */
.what-features-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.what-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Circle Icon Container */
.what-feature-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e0f2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b7e36;
    margin-bottom: 12px;
}

    .what-feature-circle svg {
        width: 26px;
        height: 26px;
    }

.what-feature-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #122117;
    white-space: nowrap;
}

/* Vertical Dividers */
.what-feature-divider {
    width: 1px;
    height: 50px;
    background-color: #d0e5d4;
    margin-top: 5px;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
    .what-we-do-section {
        padding: 60px 20px;
    }

    .what-we-do-title {
        font-size: calc(38px - var(--ka-trim, 0px));
    }

    .desktop-break {
        display: none;
    }

    .what-features-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* The labels are held on one line so that four of them read as a row across a wide
       screen. In a two-column grid on a phone there is no room for that: the longer
       Georgian labels ran past their cell and were clipped mid-word. Once the row has
       become a grid, wrapping is what keeps the words whole. */
    .what-feature-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .what-feature-divider {
        display: none;
    }
}


/* ===== How Do We Do It Section ===== */
.how-it-works-section {
    background-color: #f6faf6; /* Light greenish-white background */
    padding: 80px 20px;
    width: 100%;
    box-sizing: border-box;
}

.how-it-works-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Header Elements */
.how-it-works-header {
    text-align: center;
    margin-bottom: 50px;
}

.process-badge {
    display: inline-block;
    background-color: #dcefdc;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.how-it-works-title {
    font-size: calc(44px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #0b2b18;
    margin: 0;
}

/* Steps Row */
.steps-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 220px;
}

/* Circle Icon & Number Badge */
.step-circle-wrapper {
    position: relative;
    margin-bottom: 22px;
}

/* RENAME these three */
.about-step-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #dff2e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b3b24;
}

    .about-step-circle svg {
        width: 44px;
        height: 44px;
    }

.about-step-number {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #0b3b24;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.about-step-connector {
    flex: 1;
    max-width: 120px;
    height: 0;
    border-top: 3px dotted #83b08b;
    margin-top: 55px;
}

/* Step Typography */
.step-title {
    font-size: calc(18px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #2e7d32;
    margin: 0 0 8px 0;
}

.step-desc {
    font-size: 14px;
    color: #4b5d51;
    line-height: 1.45;
    margin: 0;
}

/* Responsive Layout */
@media (max-width: 992px) {
    .steps-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .step-connector {
        display: none; /* Hide dotted lines when wrapping */
    }

    .step-card {
        flex: 1 1 40%;
        max-width: 260px;
    }
}

@media (max-width: 600px) {
    .step-card {
        flex: 1 1 100%;
    }

    .how-it-works-title {
        font-size: calc(32px - var(--ka-trim, 0px));
    }
}










/*contact css*/

/* ===== Contact Page Layout ===== */
.contact-page {
    background-color: #f7f9f8;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
}

/* Hero Section */
.contact-hero {
    background-color: #065430; /* Solid deep green */
    color: #ffffff;
    padding: 50px 20px 140px 20px;
}

.contact-hero-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-hero-title {
    /* "დაგვიკავშირდით" is one unbreakable word: it cannot wrap, so at a fixed 46px it
       simply ran off the right of a 360px screen and took the page's scroll width with
       it. Sized against the viewport so the word always fits the screen it is on. */
    font-size: clamp(26px, 8vw, 46px);
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.contact-hero-subtitle {
    font-size: calc(18px - var(--ka-trim, 0px));
    color: #d1e7dd;
    margin: 0;
}

/* Overlapping Grid Layout */
.contact-content-container {
    max-width: 1200px;
    margin: -100px auto 60px auto;
    padding: 0 20px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Card General Styling */
.contact-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 30px;
}

.card-title {
    font-size: calc(24px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin: 0 0 24px 0;
}

/* Form Styling */
.form-row {
    margin-bottom: 20px;
}

.dual-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #065430;
    pointer-events: none;
}

.textarea-icon {
    top: 16px;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14.5px;
    color: #111827;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: #065430;
    box-shadow: 0 0 0 3px rgba(6, 84, 48, 0.1);
}

/* Select Styling */
.select-wrapper select {
    appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 14px;
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
}

.textarea-wrapper textarea {
    resize: vertical;
    min-height: 345px;
}

.btn-submit {
    width: 100%;
    background-color: #065430;
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: calc(16px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-submit:hover {
    background-color: #043d22;
}

/* Sidebar & Info Card */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.info-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #e8f5e9;
    color: #065430;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-circle svg {
    width: 20px;
    height: 20px;
}

.info-details {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.info-value {
    font-size: 14px;
    color: #4b5563;
    margin-top: 2px;
}

.info-subvalue {
    font-size: 13.5px;
    color: #4b5563;
    margin-top: 2px;
}

/* Live Chat Card */
.chat-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 380px;
}

.chat-header {
    background-color: #eaf5ec;
    padding: 16px 20px;
    border-bottom: 1px solid #e0efe2;
}

.chat-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #10b981;
}

.chat-title {
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.chat-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Chat Stream Body */
.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: #ffffff;
}

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 85%;
}

.msg-user {
    align-self: flex-end;
}

.msg-support {
    align-self: flex-start;
}

.support-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e8f5e9;
    color: #065430;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-avatar svg {
    width: 16px;
    height: 16px;
}

.msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    position: relative;
}

.msg-user .msg-bubble {
    background-color: #e8f5e9;
    color: #111827;
    border-bottom-right-radius: 2px;
}

.msg-support .msg-bubble {
    background-color: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 2px;
}

.msg-time {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
    text-align: right;
}

/* Chat Footer & Input */
.chat-footer {
    padding: 12px 16px;
    background-color: #ffffff;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-footer input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13.5px;
    outline: none;
}

.chat-footer input:focus {
    border-color: #065430;
}

.chat-footer button {
    background-color: #065430;
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.chat-footer button:hover {
    background-color: #043d22;
}

.chat-footer button svg {
    width: 16px;
    height: 16px;
}

/* ----- Support conversation -----
 *
 * The card used to be two hardcoded bubbles and an input that threw away what was typed.
 * These are the parts the real thread needs: an empty state, a way in for people who are
 * not signed in, screenshots inside a bubble, and the paperclip.
 */

.chat-gate,
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 26px 22px;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.55;
}

.chat-gate-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background-color: #065430;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

    .chat-gate-btn:hover {
        background-color: #043c22;
    }

.chat-gate-note {
    font-size: 12px;
    color: #9ca3af;
}

.chat-error {
    margin: 0 16px 10px 16px;
    padding: 9px 12px;
    border-radius: 10px;
    background-color: #fee2e2;
    color: #7f1d1d;
    font-size: 12.5px;
    line-height: 1.45;
}

/* Long words and pasted links must wrap rather than stretch the card. */
.msg-text {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.msg-shot img {
    display: block;
    max-width: 140px;
    max-height: 140px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.chat-form {
    gap: 8px;
}

/* The paperclip. A label wrapping a hidden file input, because the native control cannot
   be styled and reads badly beside a send button. */
.chat-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    color: #6b7280;
    cursor: pointer;
    background-color: #ffffff;
}

    .chat-attach:hover {
        border-color: #065430;
        color: #065430;
    }

    .chat-attach svg {
        width: 17px;
        height: 17px;
    }

/* Names what is about to be sent. Without it the only sign a screenshot was chosen is the
   file dialog having closed. */
.chat-picked {
    margin: 0 16px 12px 16px;
    font-size: 12px;
    color: #065430;
    line-height: 1.45;
}

.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;
}

/* ===== Support dock =====
 *
 * The chat button pinned to the right edge, and the panel it opens.
 *
 * Both sit at the same height: midway between the middle of the window and its foot, which
 * is low enough to stay clear of a page's own content and high enough not to be mistaken
 * for part of the footer. --dock-lift is that height expressed as a distance from the
 * bottom, so the button and the panel cannot drift apart.
 */
:root {
    /* Puts the centre of a 56px button at 75% of the window's height. */
    --dock-lift: calc(25vh - 28px);
    --dock-edge: 24px;
}

/* The lift above assumes a page whose content has margins for the button to sit beside.
   A phone has none — the content is the full width — so a button a quarter of the way up
   the window lands on top of it, and on the About page it covered a feature's label.

   Pushed into the very corner it stopped covering anything and started looking wedged
   against two edges at once. This sits it clear of the bottom without climbing back into
   the middle of the page: still the lowest thing on screen, still under a thumb, but
   floating rather than jammed. */
@media (max-width: 640px) {
    :root {
        --dock-lift: 90px;
        --dock-edge: 18px;
    }
}

.support-dock-btn {
    position: fixed;
    right: var(--dock-edge);
    bottom: var(--dock-lift);
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #1c7c3e;
    color: #ffffff;
    text-decoration: none;

    /* Noticeable without shouting: the ring lifts it off whatever it happens to be over,
       which on this site is as often a white card as a photograph. */
    box-shadow: 0 6px 18px rgba(6, 60, 34, 0.32), 0 0 0 4px rgba(255, 255, 255, 0.75);
    transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

    .support-dock-btn[hidden] {
        display: none;
    }

    .support-dock-btn:hover {
        background-color: #15642f;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(6, 60, 34, 0.38), 0 0 0 4px rgba(255, 255, 255, 0.85);
    }

    .support-dock-btn:focus-visible {
        outline: none;
        box-shadow: 0 6px 18px rgba(6, 60, 34, 0.32), 0 0 0 4px #ffffff, 0 0 0 7px #1c7c3e;
    }

    .support-dock-btn svg {
        width: 26px;
        height: 26px;
    }

/* The panel rises from the button's own height. max() keeps it off the bottom edge on a
   short window, where a quarter of the height is less than the margin it needs. */
.support-dock-panel {
    position: fixed;
    right: var(--dock-edge);
    bottom: max(var(--dock-edge), var(--dock-lift));
    z-index: 60;

    width: 360px;
    max-width: calc(100vw - (var(--dock-edge) * 2));
    animation: support-dock-in 0.16s ease-out;
}

    .support-dock-panel[hidden] {
        display: none;
    }

@keyframes support-dock-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Taller than the card on the contact page, and measured against the window rather than
   fixed, so the conversation gets whatever room the window has. */
.support-dock-card {
    height: min(480px, calc(100vh - max(var(--dock-edge), var(--dock-lift)) - 90px));
    min-height: 280px;
    border-radius: 16px;
    background-color: #ffffff;
    border: 1px solid #e0efe2;
    box-shadow: 0 18px 44px rgba(6, 60, 34, 0.28);
}

.support-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.support-dock-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: #0f7a45;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .support-dock-close:hover {
        background-color: #dbeee1;
        color: #054529;
    }

    .support-dock-close:focus-visible {
        outline: 2px solid #065430;
        outline-offset: 1px;
    }

    .support-dock-close svg {
        width: 16px;
        height: 16px;
    }

/* Holds whatever came back from the server. It is the flexing part of the card, so the
   message stream grows and the box around it does not. */
.support-dock-slot {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Nearly the full width on a phone, where 360px beside a 24px margin is most of the screen
   anyway and the rounded corners only waste it. */
@media (max-width: 480px) {
    :root {
        --dock-edge: 14px;
    }

    .support-dock-panel {
        left: var(--dock-edge);
        width: auto;
    }

    .support-dock-card {
        height: min(460px, calc(100vh - 130px));
    }
}

/* Responsive Styles */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .dual-row {
        grid-template-columns: 1fr;
    }

    .contact-content-container {
        margin-top: -60px;
    }
}













/* ===== Sign In Page ===== */
.signin-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f9f8;
    padding: 60px 20px;
}

.signin-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.signin-title {
    font-size: calc(26px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.signin-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 28px;
}

/* Role tabs */
.signin-role-tabs {
    display: flex;
    background-color: #f1f7f3;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 28px;
}

.signin-role-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.signin-role-tab-active {
    background-color: #065430;
    color: #ffffff;
}

/* Form */
.signin-form {
    text-align: left;
}

.signin-field {
    margin-bottom: 18px;
}

.signin-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.signin-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .signin-input:focus {
        border-color: #065430;
        box-shadow: 0 0 0 3px rgba(6, 84, 48, 0.1);
    }

.signin-error {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 12px;
}

.signin-submit-btn {
    width: 100%;
    background-color: #065430;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s ease;
}

    .signin-submit-btn:hover {
        background-color: #043d22;
    }












/* ===== User Dashboard ===== */
.user-dash-page {
    background-color: #f7f9f8;
    min-height: 100vh;
    padding: 40px 20px 60px 20px;
}

.user-dash-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Welcome Banner */
.user-dash-banner {
    background-color: #eaf5ec;
    border-radius: 18px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.user-dash-welcome-title {
    font-size: calc(32px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.user-dash-welcome-subtitle {
    font-size: calc(15px - var(--ka-trim, 0px));
    color: #4b5563;
}

.user-dash-banner-graphic {
    width: 320px;
    height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

.user-dash-truck-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops in tighter, cutting off the visible edge/border */
    object-position: center;
    display: block;
    mix-blend-mode: multiply;
    filter: brightness(1.08) contrast(1.05); /* pushes near-white background closer to pure white */
}

/* How to pay, and under which number.
   Two columns: the steps carry the page, the numbers sit beside them as a card the eye can
   return to. Below 900px the card drops under the steps rather than being squeezed — the
   number has to stay copyable at a glance, which a 120px column would not be. */
.user-dash-payment {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 24px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 20px;
}

.user-dash-payment-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #2e7d32;
    margin-bottom: 6px;
}

.user-dash-payment-title {
    font-size: calc(22px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.user-dash-payment-intro {
    font-size: calc(14.5px - var(--ka-trim, 0px));
    color: #4b5563;
    margin-bottom: 16px;
}

.user-dash-payment-steps {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

    .user-dash-payment-steps li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: calc(14.5px - var(--ka-trim, 0px));
        color: #374151;
    }

.user-dash-payment-step-n {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #eaf5ec;
    color: #2e7d32;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dash-payment-note {
    font-size: 13px;
    color: #6b7280;
    border-left: 3px solid #eaf5ec;
    padding-left: 12px;
}

/* The district's number */
.user-dash-ids {
    background-color: #f7f9f8;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    align-self: start;
}

.user-dash-ids-title {
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.user-dash-ids-note {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 14px;
}

.user-dash-id-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.user-dash-id-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.user-dash-id-district {
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
}

/* Tabular figures and a little tracking: this is a number somebody reads back digit by
   digit into a banking app, so the digits have to be evenly spaced and unambiguous. */
.user-dash-id-number {
    font-size: 18px;
    font-weight: 800;
    color: #2e7d32;
    letter-spacing: 0.6px;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.user-dash-id-missing {
    font-size: 13.5px;
    font-weight: 600;
    color: #b45309;
}

.user-dash-ids-hint {
    font-size: 12.5px;
    color: #6b7280;
}

/* Stat Cards Row */
.user-dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.user-dash-stat-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 24px;
}

.user-dash-stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.user-dash-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #eaf5ec;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .user-dash-stat-icon svg {
        width: 18px;
        height: 18px;
    }

.user-dash-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.user-dash-stat-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.user-dash-stat-value {
    font-size: calc(20px - var(--ka-trim, 0px));
    font-weight: 800;
}

.user-dash-value-positive {
    color: #2e7d32;
}

.user-dash-value-negative {
    color: #dc2626;
}

.user-dash-check-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #eaf5ec;
    color: #2e7d32;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dash-stat-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.user-dash-days-pill {
    display: inline-block;
    background-color: #eaf5ec;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 8px;
}

.user-dash-price-text {
    font-size: calc(18px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #2e7d32;
}

.user-dash-price-suffix {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* Bottom Row */
.user-dash-bottom-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
}

/* Live Chat Card */
.user-dash-chat-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 420px;
}

.user-dash-chat-header {
    background-color: #eaf5ec;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e0efe2;
}

.user-dash-chat-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #10b981;
    flex-shrink: 0;
}

.user-dash-chat-title {
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.user-dash-chat-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.user-dash-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: #ffffff;
}

.user-dash-chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 80%;
}

.user-dash-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.user-dash-msg-admin {
    align-self: flex-start;
}

.user-dash-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #eaf5ec;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .user-dash-chat-avatar svg {
        width: 16px;
        height: 16px;
    }

.user-dash-chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    position: relative;
}

.user-dash-msg-user .user-dash-chat-bubble {
    background-color: #eaf5ec;
    color: #111827;
    border-bottom-right-radius: 2px;
}

.user-dash-msg-admin .user-dash-chat-bubble {
    background-color: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 2px;
}

.user-dash-chat-time {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
    text-align: right;
}

.user-dash-chat-footer {
    padding: 12px 16px;
    background-color: #ffffff;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-dash-chat-input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13.5px;
    outline: none;
}

    .user-dash-chat-input:focus {
        border-color: #065430;
    }

.user-dash-chat-send-btn {
    background-color: #065430;
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

    .user-dash-chat-send-btn:hover {
        background-color: #043d22;
    }

    .user-dash-chat-send-btn svg {
        width: 16px;
        height: 16px;
    }

/* Last Pickup Card */
.user-dash-pickup-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 24px;
}

.user-dash-pickup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #2e7d32;
}

    .user-dash-pickup-header svg {
        width: 20px;
        height: 20px;
    }

.user-dash-pickup-label {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.user-dash-pickup-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-dash-pickup-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2e7d32;
    color: #ffffff;
    font-size: calc(20px - var(--ka-trim, 0px));
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-dash-pickup-icon-fail {
    background-color: #dc2626;
}

.user-dash-pickup-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-dash-pickup-date {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #2e7d32;
}

.user-dash-pickup-time {
    font-size: 13.5px;
    color: #4b5563;
}

.user-dash-pickup-note {
    font-size: 13.5px;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 1024px) {
    .user-dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-dash-bottom-row {
        grid-template-columns: 1fr;
    }
}

.user-dash-payment-alone {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .user-dash-payment {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
}

@media (max-width: 600px) {
    .user-dash-stats-row {
        grid-template-columns: 1fr;
    }

    .user-dash-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}






/* ===== Worker Dashboard ===== */
.worker-dash-page {
    background-color: #f7f9f8;
    min-height: 100vh;
    padding: 30px 20px;
}

.worker-dash-layout {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    align-items: stretch; /* was "start" � forces both columns to match height */
}

/* ---------- LEFT: Route Panel ---------- */
.worker-dash-route-panel {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.worker-dash-route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.worker-dash-route-title {
    font-size: calc(18px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
}

.worker-dash-stops-pill {
    background-color: #eaf5ec;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Says whether the numbers down the left are a walking order or just a count. */
.worker-dash-plan-note {
    font-size: 12.5px;
    color: #2e7d32;
    background-color: #eaf5ec;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    line-height: 1.45;
}

.worker-dash-plan-note-muted {
    color: #6b7280;
    background-color: #f4f5f5;
}

.worker-dash-stops-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.worker-dash-stop-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .worker-dash-stop-card:hover {
        border-color: #2e7d32;
        background-color: #f7fbf8;
    }

.worker-dash-stop-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #2e7d32;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.worker-dash-stop-info {
    flex: 1;
    min-width: 0;
}

.worker-dash-stop-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.worker-dash-stop-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
}

.worker-dash-next-badge {
    background-color: #dcfce7;
    color: #16a34a;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.worker-dash-stop-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.worker-dash-stop-icon {
    width: 13px;
    height: 13px;
    color: #9ca3af;
    flex-shrink: 0;
}

.worker-dash-stop-meta {
    margin-left: auto;
    font-weight: 600;
    color: #4b5563;
}

.worker-dash-stop-arrow {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 4px;
}

.worker-dash-scan-btn {
    width: 100%;
    background-color: #065430;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .worker-dash-scan-btn:hover {
        background-color: #043d22;
    }

    .worker-dash-scan-btn svg {
        width: 22px;
        height: 22px;
        color: #ffffff;
        flex-shrink: 0;
    }

.worker-dash-scan-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

    .worker-dash-scan-text strong {
        font-size: 14px;
        color: #ffffff;
        font-weight: 700;
    }

    .worker-dash-scan-text small {
        font-size: 12px;
        color: #d1e7dd;
    }

/* ---------- RIGHT: Map Panel ---------- */
.worker-dash-map-panel {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%; /* stretches to match the route panel's height */
}

.worker-dash-map-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.worker-dash-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worker-dash-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.worker-dash-dot-online {
    background-color: #10b981;
}

.worker-dash-dot-offline {
    background-color: #9ca3af;
}

.worker-dash-status-text {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.worker-dash-progress-label {
    font-size: 13px;
    color: #6b7280;
}

.worker-dash-progress-track {
    width: 100%;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.worker-dash-progress-fill {
    height: 100%;
    background-color: #2e7d32;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.worker-dash-map-placeholder {
    flex: 1;
    min-height: 480px;
    background-color: #eef2ef;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worker-dash-map-placeholder-text {
    text-align: center;
    color: #9ca3af;
}

    .worker-dash-map-placeholder-text svg {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }

    .worker-dash-map-placeholder-text p {
        font-size: 14px;
        font-weight: 600;
    }

.worker-dash-gmaps-btn {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .worker-dash-gmaps-btn:hover {
        border-color: #2e7d32;
        background-color: #f7fbf8;
    }

    .worker-dash-gmaps-btn svg {
        width: 20px;
        height: 20px;
        color: #2e7d32;
        flex-shrink: 0;
    }

.worker-dash-gmaps-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}

    .worker-dash-gmaps-text strong {
        font-size: 14px;
        color: #111827;
        font-weight: 700;
    }

    .worker-dash-gmaps-text small {
        font-size: 12px;
        color: #6b7280;
    }

.worker-dash-external-icon {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 1024px) {
    .worker-dash-layout {
        grid-template-columns: 1fr;
    }

    .worker-dash-map-placeholder {
        min-height: 360px;
    }
}












































/* ===== Register Page ===== */
.register-page {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f9f8;
    padding: 60px 20px;
}

.register-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 40px;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.register-title {
    font-size: calc(26px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.register-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.register-summary-error {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 12px;
}

.register-form {
    text-align: left;
}

.register-field {
    margin-bottom: 16px;
}

.register-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.register-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .register-input:focus {
        border-color: #065430;
        box-shadow: 0 0 0 3px rgba(6, 84, 48, 0.1);
    }

    .register-input.input-validation-error {
        border-color: #dc2626;
    }

.register-field-error {
    display: block;
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 5px;
}

.register-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.register-checkbox {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: #065430;
    flex-shrink: 0;
    cursor: pointer;
}

.register-checkbox-label {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.register-terms-link {
    background: none;
    border: none;
    padding: 0;
    color: #065430;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.register-terms-error {
    margin-top: 0;
    margin-bottom: 14px;
}

.register-submit-btn {
    width: 100%;
    background-color: #065430;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s ease;
}

    .register-submit-btn:hover {
        background-color: #043d22;
    }

.register-login-link {
    text-align: center;
    font-size: 13.5px;
    color: #6b7280;
    margin-top: 18px;
}

    .register-login-link a {
        color: #065430;
        font-weight: 600;
        text-decoration: none;
    }

/* ===== Terms Modal ===== */
.terms-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .terms-modal-overlay.terms-modal-open {
        display: flex;
    }

.terms-modal-box {
    background-color: #ffffff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.terms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.terms-modal-title {
    font-size: calc(17px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
}

.terms-modal-close {
    background: none;
    border: none;
    font-size: calc(22px - var(--ka-trim, 0px));
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.terms-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.6;
}

    .terms-modal-body p {
        margin-bottom: 12px;
    }

/* ===== Verify Email Page ===== */
.verify-page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f9f8;
    padding: 60px 20px;
}

.verify-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.verify-title {
    font-size: calc(24px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.verify-subtitle {
    font-size: 13.5px;
    color: #6b7280;
    margin-bottom: 26px;
}

.verify-summary-error {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 12px;
}

.verify-form {
    text-align: left;
}

.verify-field {
    margin-bottom: 20px;
}

.verify-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
    text-align: center;
}

.verify-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: calc(22px - var(--ka-trim, 0px));
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .verify-input:focus {
        border-color: #065430;
        box-shadow: 0 0 0 3px rgba(6, 84, 48, 0.1);
    }

    .verify-input.input-validation-error {
        border-color: #dc2626;
    }

.verify-field-error {
    display: block;
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 8px;
    text-align: center;
}

.verify-actions {
    margin-bottom: 14px;
}

.verify-submit-btn {
    width: 100%;
    background-color: #065430;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .verify-submit-btn:hover {
        background-color: #043d22;
    }

.verify-resend-form {
    margin-top: 4px;
}

.verify-resend-btn {
    width: 100%;
    background: none;
    border: 1px solid #e5e7eb;
    color: #065430;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    .verify-resend-btn:hover {
        border-color: #065430;
        background-color: #f7fbf8;
    }

/* ===== Forgot Password Page ===== */
.forgot-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f9f8;
    padding: 60px 20px;
}

.forgot-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.forgot-title {
    font-size: calc(24px - var(--ka-trim, 0px));
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.forgot-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.forgot-summary-error {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 12px;
}

.forgot-form {
    text-align: left;
}

.forgot-field {
    margin-bottom: 18px;
}

.forgot-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.forgot-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .forgot-input:focus {
        border-color: #065430;
        box-shadow: 0 0 0 3px rgba(6, 84, 48, 0.1);
    }

    .forgot-input.input-validation-error {
        border-color: #dc2626;
    }

.forgot-field-error {
    display: block;
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 5px;
}

.forgot-submit-btn {
    width: 100%;
    background-color: #065430;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: calc(15px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s ease;
}

    .forgot-submit-btn:hover {
        background-color: #043d22;
    }

.forgot-back-link {
    text-align: center;
    font-size: 13.5px;
    margin-top: 16px;
}

    .forgot-back-link a {
        color: #065430;
        font-weight: 600;
        text-decoration: none;
    }

/* ===== Sign In Page additions ===== */
.signin-field-error {
    display: block;
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 5px;
}

.signin-forgot-link {
    text-align: right;
    font-size: 13px;
    margin-bottom: 18px;
    margin-top: -4px;
}

    .signin-forgot-link a {
        color: #065430;
        font-weight: 600;
        text-decoration: none;
    }

.signin-register-link {
    text-align: center;
    font-size: 13.5px;
    color: #6b7280;
    margin-top: 18px;
}

    .signin-register-link a {
        color: #065430;
        font-weight: 600;
        text-decoration: none;
    }

/* =====================================================================
   Merged application shell
   Added when the front end was folded into Service.Web: the auth-aware
   navbar, status banners, the real-data dashboard states and the
   operator dashboard. Design tokens follow the rest of this file:
   white cards on #f7f9f8, 16px radius, #e5e7eb borders, #065430 primary.
   ===================================================================== */

/* ----- Navbar: brand is now a link, plus the sign-out control ----- */
a.navbar-brand {
    text-decoration: none;
    color: inherit;
}

.navbar-logout-form {
    display: inline-flex;
    margin: 0;
}

/* Outlined rather than filled: signing out is a secondary action and should
   not compete with the green CTA a signed-out visitor sees in the same slot. */
.navbar-logout-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .navbar-logout-btn:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #065430;
    }

/* ----- One-shot confirmation carried across a redirect ----- */
.status-banner {
    background-color: #eaf5ec;
    border: 1px solid #bbe5c7;
    color: #14532d;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
    text-align: left;
}

/* ----- Field hints under password and ID inputs ----- */
.register-field-hint,
.verify-field-hint,
.forgot-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    text-align: left;
}

.terms-modal-version {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 8px;
}

/* ----- Client dashboard: subscriber number and empty state ----- */
.user-dash-subscriber {
    margin-top: 10px;
    font-size: calc(15px - var(--ka-trim, 0px));
    color: #14532d;
}

    .user-dash-subscriber strong {
        font-size: calc(20px - var(--ka-trim, 0px));
        letter-spacing: 0.5px;
    }

.user-dash-subscriber-hint {
    color: #6b7280;
    font-size: 13px;
}

.user-dash-empty-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

    .user-dash-empty-card h2 {
        font-size: calc(20px - var(--ka-trim, 0px));
        margin-bottom: 12px;
        color: #111827;
    }

    .user-dash-empty-card p {
        color: #4b5563;
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 560px;
        margin: 0 auto 10px auto;
    }

.user-dash-empty-hint {
    color: #6b7280;
    font-size: 13.5px;
}

.user-dash-empty-btn {
    display: inline-block;
    margin-top: 18px;
    background-color: #065430;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}

/* List price struck through when a concession has reduced it. */
.user-dash-price-was {
    text-decoration: line-through;
    color: #9ca3af;
    font-weight: 400;
    margin-right: 6px;
}

/* ----- Client dashboard: message log ----- */
.user-dash-chat-empty {
    color: #6b7280;
    font-size: 13.5px;
    text-align: center;
    padding: 24px 0;
}

.user-dash-chat-subject {
    display: block;
    margin-bottom: 4px;
}

.user-dash-chat-contact-link {
    color: #065430;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

    .user-dash-chat-contact-link:hover {
        text-decoration: underline;
    }

/* ----- Client dashboard: additional addresses ----- */
.user-dash-properties-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}

.user-dash-properties-title {
    font-size: calc(16px - var(--ka-trim, 0px));
    margin-bottom: 14px;
    color: #111827;
}

.user-dash-properties-list {
    list-style: none;
}

    .user-dash-properties-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
    }

        .user-dash-properties-list li:last-child {
            border-bottom: none;
        }

.user-dash-property-meta {
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}

/* ----- Worker dashboard: empty rounds and stop states ----- */
.worker-dash-empty {
    padding: 40px 20px;
    text-align: center;
    color: #4b5563;
}

    .worker-dash-empty h3 {
        font-size: calc(17px - var(--ka-trim, 0px));
        color: #111827;
        margin-bottom: 10px;
    }

    .worker-dash-empty p {
        font-size: 14px;
        line-height: 1.6;
        max-width: 420px;
        margin: 0 auto;
    }

.worker-dash-stop-done {
    opacity: 0.55;
}

.worker-dash-done-badge {
    background-color: #e5e7eb;
    color: #4b5563;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* The crew must not collect from a paused, expired or disconnected address. */
.worker-dash-blocked-badge {
    background-color: #fee2e2;
    color: #b91c1c;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* The scan control is a button again now that it opens the camera in place; the map link
   is still an anchor and still needs its underline cleared. */
a.worker-dash-gmaps-btn {
    text-decoration: none;
}

.worker-dash-history-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: #065430;
    text-decoration: underline;
}

/* ----- QR scanner -----

   Full-screen on purpose. This is used one-handed, outdoors, in a stairwell, by someone
   holding a bin bag in the other hand — a dialog floating in the middle of a dashboard
   would be the wrong shape for every part of that. */

.worker-scan-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: #0b1220;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    /* The display above outranks what the hidden attribute asks for, so the closed state
       has to be spelled out. Without this the scanner covers the round the moment the page
       loads, before anyone has pressed anything. */
    .worker-scan-dialog[hidden] {
        display: none;
    }

/* Stops the page underneath scrolling behind the dialog on a phone. */
body.worker-scan-open {
    overflow: hidden;
}

.worker-scan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    color: #ffffff;
    flex-shrink: 0;
}

.worker-scan-heading {
    font-size: calc(16px - var(--ka-trim, 0px));
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.worker-scan-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: calc(32px - var(--ka-trim, 0px));
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.worker-scan-stage {
    position: relative;
    background-color: #000000;
    flex-shrink: 0;

    /* Tall enough to aim with, capped so the note and manual-entry fields stay on screen
       without scrolling on a short phone in landscape. */
    height: min(52vh, 420px);
}

.worker-scan-video {
    width: 100%;
    height: 100%;

    /* cover, not contain: black bars around a viewfinder make it harder to judge where the
       camera is actually pointed. */
    object-fit: cover;
    display: block;
}

/* Where to put the sticker. Drawn rather than described, because "centre the code in the
   frame" is a sentence nobody reads while working. */
.worker-scan-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(62vw, 240px);
    height: min(62vw, 240px);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.worker-scan-status {
    color: #e5e7eb;
    font-size: 13.5px;
    text-align: center;
    padding: 12px 18px 0;
    margin: 0;
    min-height: 20px;
}

.worker-scan-status-warn {
    color: #fbbf24;
}

.worker-scan-status-error {
    color: #fca5a5;
}

.worker-scan-dialog form {
    padding: 12px 18px 24px;
}

.worker-scan-field {
    margin-top: 12px;
}

.worker-scan-label {
    display: block;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 5px;
}

.worker-scan-input {
    width: 100%;
    padding: 11px 12px;

    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus, which
       shoves the viewfinder off screen mid-round. */
    font-size: calc(16px - var(--ka-trim, 0px));
    border-radius: 10px;
    border: 1px solid #374151;
    background-color: #111827;
    color: #f9fafb;
}

.worker-scan-manual-row {
    display: flex;
    gap: 8px;
}

.worker-scan-btn {
    border: none;
    border-radius: 10px;
    background-color: #065430;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ----- The verdict -----

   Covers everything. Two colours, one word each, readable at arm's length: this is the
   only thing on the screen that decides whether the waste gets taken. */

.worker-scan-verdict {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
    gap: 10px;
}

    /* Same reason as the dialog, and worse if missed: this panel has no background until a
       verdict picks one, so it shows as a bare "Next stop" button floating over the camera. */
    .worker-scan-verdict[hidden] {
        display: none;
    }

.worker-scan-verdict-collect {
    background-color: #047857;
}

.worker-scan-verdict-refuse {
    background-color: #b91c1c;
}

.worker-scan-verdict-title {
    color: #ffffff;
    font-size: clamp(26px, 8vw, 44px);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.1;
}

.worker-scan-verdict-body {
    color: #ffffff;
    font-size: calc(15px - var(--ka-trim, 0px));
    line-height: 1.55;
    max-width: 460px;
}

    .worker-scan-verdict-body p {
        margin: 6px 0;
    }

.worker-scan-verdict-done {
    margin-top: 18px;
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 15px 40px;
    font-size: calc(16px - var(--ka-trim, 0px));
    font-weight: 700;
    cursor: pointer;
    color: #111827;
}

/* ----- Client's collection history ----- */

.client-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-history-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f1;
    font-size: 13.5px;
}

    .client-history-row:last-child {
        border-bottom: none;
    }

.client-history-when {
    font-weight: 600;
    color: #111827;
    min-width: 160px;
}

.client-history-outcome {
    color: #374151;
}

.client-history-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.client-history-dot-yes {
    background-color: #047857;
}

.client-history-dot-no {
    background-color: #b91c1c;
}

.client-history-meta {
    color: #6b7280;
    font-size: 12px;
    margin-left: auto;
}

.user-dash-pickup-history {
    margin-top: 14px;
    border-top: 1px solid #eef2f1;
    padding-top: 12px;
}

    .user-dash-pickup-history summary {
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #065430;
    }

    .user-dash-pickup-history .client-history-list {
        margin-top: 8px;

        /* A long-standing client has years of these. Capped and scrolled so the card keeps
           its place in the layout instead of pushing everything below it off the page. */
        max-height: 320px;
        overflow-y: auto;
    }

/* ----- Worker's own history page ----- */

.worker-history-page {
    max-width: 900px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 22px;
}

.worker-history-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 18px;
    font-size: 13px;
}

    .worker-history-filter select {
        padding: 7px 10px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        font-size: 14px;
    }

.worker-history-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 12px 14px;
    background-color: #f7f9f8;
    border-radius: 12px;
    font-size: 13px;
    color: #374151;
}

    .worker-history-figures strong {
        font-size: calc(17px - var(--ka-trim, 0px));
        color: #065430;
        margin-right: 4px;
    }

.worker-history-day {
    margin-top: 22px;
}

.worker-history-date {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.worker-history-day-meta {
    margin: 3px 0 6px;
    font-size: 12.5px;
    color: #6b7280;
}

/* ----- Operator dashboard ----- */
.operator-dash-page {
    background-color: #f7f9f8;
    min-height: 100vh;
    padding: 40px 20px 60px 20px;
}

.operator-dash-container {
    max-width: 1200px;
    margin: 0 auto;
}

.operator-dash-header {
    margin-bottom: 24px;
}

.operator-dash-title {
    font-size: calc(28px - var(--ka-trim, 0px));
    color: #111827;
}

.operator-dash-subtitle {
    color: #6b7280;
    font-size: 14.5px;
    margin-top: 4px;
}

.operator-dash-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.operator-dash-stat-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.operator-dash-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.operator-dash-stat-value {
    font-size: calc(30px - var(--ka-trim, 0px));
    font-weight: 700;
    color: #065430;
}

.operator-dash-value-warn {
    color: #b91c1c;
}

.operator-dash-stat-desc {
    font-size: 13px;
    color: #6b7280;
}

.operator-dash-panel {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.operator-dash-panel-title {
    font-size: calc(16px - var(--ka-trim, 0px));
    color: #111827;
    margin-bottom: 18px;
}

.operator-dash-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.operator-dash-status-item {
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.operator-dash-status-active {
    background-color: #dcfce7;
    color: #14532d;
}

/* Amber carries over from what this tile used to be called: an unpaid client is the one
   that needs chasing. */
.operator-dash-status-inactive {
    background-color: #fef3c7;
    color: #78350f;
}

/* Blue rather than a warning colour — a client on hold is paid up and deliberate, so it
   should not sit on the same red-ward ramp as the ones who owe money. */
.operator-dash-status-paused {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.operator-dash-status-expired {
    background-color: #ffedd5;
    color: #7c2d12;
}

.operator-dash-status-disconnected {
    background-color: #fee2e2;
    color: #7f1d1d;
}

.operator-dash-status-count {
    font-size: calc(26px - var(--ka-trim, 0px));
    font-weight: 700;
}

.operator-dash-status-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.operator-dash-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.operator-dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 180px;
}

.operator-dash-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 6px;
}

.operator-dash-bar {
    width: 100%;
    min-height: 2px;
    background-color: #065430;
    border-radius: 4px 4px 0 0;
    transition: height 0.2s ease;
}

.operator-dash-bar-alt {
    background-color: #16a34a;
}

.operator-dash-bar-label {
    font-size: 11px;
    color: #9ca3af;
}

.operator-dash-links {
    list-style: none;
}

    .operator-dash-links li {
        padding: 8px 0;
    }

    .operator-dash-links a {
        color: #065430;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

        .operator-dash-links a:hover {
            text-decoration: underline;
        }

/* ----- Terms and privacy ----- */
.legal-page {
    background-color: #f7f9f8;
    min-height: 80vh;
    padding: 50px 20px 70px 20px;
}

.legal-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    max-width: 820px;
    margin: 0 auto;
}

.legal-title {
    font-size: calc(26px - var(--ka-trim, 0px));
    color: #111827;
    margin-bottom: 8px;
}

.legal-meta {
    color: #6b7280;
    font-size: 13.5px;
    margin-bottom: 24px;
}

    .legal-card p {
        font-size: 14.5px;
        line-height: 1.7;
        color: #374151;
        margin-bottom: 14px;
    }



/* ----- Validation feedback -----
   jQuery-unobtrusive stamps .input-validation-error on the offending input and
   .field-validation-error on its message span, both client-side and on a re-rendered
   POST. Styling them here means every form gets the same treatment without each view
   repeating it. */
.input-validation-error {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
}

    .input-validation-error:focus {
        outline-color: #dc2626;
    }

.field-validation-error {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: 12.5px;
    text-align: left;
}

/* The summary above the form, for errors that belong to no single field. */
.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .validation-summary-errors li {
        color: #dc2626;
        font-size: 13px;
        margin-bottom: 4px;
    }

.validation-summary-valid {
    display: none;
}



/* =====================================================================
   Worker route map
   ===================================================================== */

.worker-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ----- The two address inputs ----- */
.worker-map-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.worker-map-field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* Anchors the search results panel, which overlays the map below it. */
    position: relative;
}

/* ----- Search results under a map search box ----- */
.worker-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 4px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(4, 61, 34, 0.16);
    max-height: 260px;
    overflow-y: auto;

    /* Above the Leaflet panes, which the map pins itself to z-index 0 to stay under. */
    z-index: 20;
}

.worker-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

    .worker-search-result:hover,
    .worker-search-result:focus-visible {
        background-color: #eaf7ec;
    }

.worker-search-result-name {
    font-size: 13px;
    color: #111827;
    line-height: 1.35;
}

/* The distances are the reason the list exists, so they read as a value rather than as
   secondary detail: same weight as the name, in the brand green. */
.worker-search-result-distance {
    font-size: 12px;
    font-weight: 600;
    color: #065430;
}

.worker-search-message {
    padding: 10px;
    font-size: 12.5px;
    color: #6b7280;
}

.worker-map-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.worker-map-required {
    color: #b91c1c;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.worker-map-input-row {
    display: flex;
    gap: 6px;
}

.worker-map-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: #111827;
    background-color: #ffffff;
}

    .worker-map-input:focus {
        outline: 2px solid #065430;
        outline-offset: -1px;
    }

.worker-map-btn {
    border: none;
    border-radius: 8px;
    background-color: #065430;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
}

    .worker-map-btn:hover {
        background-color: #054025;
    }

.worker-map-icon-btn {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .worker-map-icon-btn svg {
        width: 17px;
        height: 17px;
        color: #065430;
    }

    .worker-map-icon-btn:hover {
        border-color: #065430;
    }

/* ----- Status line ----- */
.worker-map-status {
    font-size: 13px;
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0;
}

.worker-map-status-info,
.worker-map-status-busy {
    background-color: #eff6ff;
    color: #1e40af;
}

.worker-map-status-error {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* ----- The map itself ----- */
.worker-map-canvas {
    height: 380px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background-color: #eef2f0;
    z-index: 0; /* keeps Leaflet panes under the site header */
}

.worker-route-summary {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #065430;
    background-color: #eaf5ec;
    border-radius: 8px;
    padding: 9px 12px;
}

/* ----- Pins -----
   Drawn as HTML rather than images: it avoids shipping marker sprites and lets the
   customer name ride along with the pin. */
.map-pin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.map-pin-head {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Turned back upright, since the head it sits in is rotated -45deg. */
.map-pin-badge {
    transform: rotate(45deg);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
}

.map-pin-origin .map-pin-head {
    background-color: #2563eb;
}

.map-pin-stop .map-pin-head {
    background-color: #dc2626;
}

.map-pin-label {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #111827;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* ----- Chosen stops ----- */
.worker-selection {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    background-color: #ffffff;
}

.worker-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.worker-selection-clear {
    border: none;
    background: none;
    color: #b91c1c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0;
}

    .worker-selection-clear:hover {
        text-decoration: underline;
    }

.worker-selection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.worker-selection-empty {
    font-size: 13px;
    color: #9ca3af;
}

.worker-selection-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.worker-selection-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

    .worker-selection-text strong {
        font-size: 13px;
        color: #111827;
    }

    .worker-selection-text small {
        font-size: 11.5px;
        color: #6b7280;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.worker-selection-remove {
    flex: 0 0 auto;
    border: 1px solid #e5e7eb;
    background: none;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: calc(16px - var(--ka-trim, 0px));
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

    .worker-selection-remove:hover {
        border-color: #dc2626;
        color: #dc2626;
    }

/* ----- Stop cards become selectable ----- */
.worker-dash-stop-card {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .worker-dash-stop-card:hover {
        border-color: #065430;
    }

    .worker-dash-stop-card:focus-visible {
        outline: 2px solid #065430;
        outline-offset: 2px;
    }

.worker-dash-stop-selected {
    border-color: #065430;
    box-shadow: inset 3px 0 0 #065430;
    background-color: #f6fbf7;
}

/* ----- Google Maps button, before a route exists ----- */
.worker-dash-gmaps-disabled {
    opacity: 0.55;
    pointer-events: none;
}


/* ----- Contact form outcome and honeypot -----
 *
 * The form posts for real now: it used to preventDefault and drop what was typed.
 */

.contact-sent,
.contact-error {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.contact-sent {
    background-color: #eaf5ec;
    color: #14532d;
}

.contact-error {
    background-color: #fee2e2;
    color: #7f1d1d;
}

    .contact-error:empty {
        display: none;
    }

/* Off-screen rather than display:none — some bots skip hidden inputs but fill positioned
   ones, and a screen reader is told to ignore it by aria-hidden on the wrapper. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Screenshot viewer =====
 *
 * Opens a chat attachment over the page. Sitting on the backdrop rather than in the
 * conversation means the picture gets the whole window on a phone, where the chat panel
 * itself is only a few hundred pixels wide and a screenshot in it is unreadable.
 */
.shot-viewer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 32px;
    background-color: rgba(6, 26, 16, 0.92);
}

    .shot-viewer[hidden] {
        display: none;
    }

.shot-viewer-img {
    max-width: 100%;
    /* Leaves room for the close button above and the file name below, so a tall
       screenshot is never pushed under either. */
    max-height: calc(100% - 72px);
    object-fit: contain;
    border-radius: 10px;
    background-color: #ffffff;
}

.shot-viewer-name {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    text-align: center;
    word-break: break-all;
}

.shot-viewer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: calc(26px - var(--ka-trim, 0px));
    line-height: 1;
    cursor: pointer;
}

    .shot-viewer-close:hover {
        background-color: rgba(255, 255, 255, 0.24);
    }

    .shot-viewer-close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

/* The page behind must not scroll while the viewer is open, or dismissing it returns the
   reader somewhere other than where they were. */
body.shot-viewer-open {
    overflow: hidden;
}

/* ----- Recording a bin from the street ----- */

/* Sized for a gloved thumb on a phone held in one hand, and full width because on the
   round panel there is nothing to sit beside it. */
.worker-bin-capture {
    margin: 0 0 18px;
}

.worker-bin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid #0f5132;
    border-radius: 12px;
    background-color: #ffffff;
    color: #0f5132;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

    .worker-bin-btn:hover:not(:disabled) {
        background-color: #f0f7f2;
    }

    .worker-bin-btn:disabled {
        opacity: 0.65;
        cursor: default;
    }

    .worker-bin-btn:focus-visible {
        outline: 2px solid #0f5132;
        outline-offset: 2px;
    }

.worker-bin-status {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4b5563;
}

    /* Outdoors in daylight the wording carries the message, so the colour only reinforces
       it — a crew reading this at arm's length in sun should not have to tell two greys
       apart to know whether the bin was recorded. */
    .worker-bin-status[data-kind="ok"] {
        color: #0f5132;
        font-weight: 600;
    }

    .worker-bin-status[data-kind="warn"] {
        color: #92400e;
        font-weight: 600;
    }

/* The quieter of the two ways to record a bin. Same size and shape as the first, because
   it is an equal choice rather than a lesser one — only the fill says which is the usual
   case. */
.worker-bin-btn-quiet {
    margin-top: 8px;
    border-color: #d7e3da;
    color: #35603f;
    font-weight: 600;
}


/* The map pin for a bin being placed, and the button while placing is on. The pin itself
   is drawn by map-providers, which builds every marker as markup — Leaflet own default is
   an image it fetches at runtime, and the copy vendored here has no images folder, so a
   plain L.marker renders as a broken image with its alt text showing. */
/* A bin drawn as a bin.

   The numbered teardrop says "the third place you go". A container is not a place in a
   sequence, it is a thing standing on a pavement, and a map of them drawn as numbered pins
   reads as a map of stops. */
.map-bin {
    display: block;
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

    .map-bin svg {
        width: 100%;
        height: 100%;
    }

.map-bin-lid,
.map-bin-body {
    fill: #4b5563;
    stroke: #ffffff;
    stroke-width: 0.9;
}

.map-bin-ribs {
    stroke: #ffffff;
    stroke-width: 1.1;
    stroke-linecap: round;
    fill: none;
}

/* The crew member own bins in the house green, so the ones they can take back are the
   ones that look like theirs. Everything else stays grey and is only a position. */
.map-pin-bin-mine .map-bin-lid,
.map-pin-bin-mine .map-bin-body {
    fill: #0f5132;
}

.map-pin-bin-mine .map-bin {
    cursor: pointer;
}

    /* An empty label still draws its own box, so a map of bins came out dotted with blank
       white tabs. Removed rather than emptied. */
    .map-pin-bin .map-pin-label,
    .map-pin-bin-mine .map-pin-label:empty {
        display: none;
    }

.worker-bin-btn.is-active {
    background-color: #0f5132;
    border-color: #0f5132;
    color: #ffffff;
}

/* Footer links under a thumb.
 *
 * A 14px link is a 19px target. These sit in a column with room around them, so a miss
 * lands in the gap rather than on the wrong link — which is why this is padding and not a
 * redesign. The gap gives back most of what the padding takes, so the footer stays the
 * height it was. */
@media (pointer: coarse) {
    .footer-links {
        gap: 4px;
    }

        .footer-links li a {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
        }
}