/* ==================================================================
   ZeozGig v2 - shared components (prefix zgv-) + site header and footer
   ------------------------------------------------------------------
   Linked from Views/Shared/_Layout.cshtml AFTER printmis-theme.css,
   the bootstrap bundle and the layout's inline <style>, so a rule here
   wins over an equal-specificity rule there. Tokens (--zgv-*) live in
   printmis-theme.css :root.

   Everything uses logical properties (inline-start/end) so the Arabic
   (dir="rtl") pages mirror without extra rules. Icons that point
   "forward" carry .zgv-flip.

   Sections
     1. Page frame + utilities
     2. Type
     3. Buttons and links
     4. Page head / section head
     5. Filter panel: search, select, segmented control, chips, label
     6. Count row, A-Z letter bar
     7. Card (+ media, plate, kicker, tints, pills, foot, skeleton), grid
     8. Surface, dark band, notice, empty state, note
     9. Header (.zg-navbar) - desktop, language picker, mobile panel
    10. Footer (.footer)
   ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Page frame + utilities                                           */
/* ------------------------------------------------------------------ */
/* Redesigned views set ViewBag.BodyClass = "zgv-body". */
body.zgv-body {
    background: var(--zgv-bg);
    color: var(--zgv-text);
}

.zgv-container {
    width: 100%;
    max-width: var(--zgv-container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Clears the fixed header (always var(--zg-bar-h) tall). */
.zgv-page {
    padding-top: calc(var(--zg-bar-h) + 40px);
    padding-bottom: 64px;
}

.zgv-section {
    margin-top: 48px;
}

.zgv-section:first-child {
    margin-top: 0;
}

@media (max-width: 575.98px) {
    .zgv-container { padding-inline: 16px; }
    .zgv-page { padding-top: calc(var(--zg-bar-h) + 32px); padding-bottom: 48px; }
    .zgv-section { margin-top: 40px; }
}

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

/* Arrows and chevrons that mean "forward" point the other way in Arabic. */
html[dir="rtl"] .zgv-flip {
    transform: scaleX(-1);
}

/* "Skip to content": off-screen until it receives keyboard focus. */
.zgv-skip {
    position: fixed;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 10010;
    padding: 10px 16px;
    border-radius: var(--zgv-radius-sm);
    background: var(--zgv-text);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.15s ease;
}

.zgv-skip:focus,
.zgv-skip:focus-visible {
    transform: none;
    color: #fff;
    outline: 3px solid var(--zgv-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 2. Type                                                             */
/* ------------------------------------------------------------------ */
.zgv-eyebrow {
    display: block;
    margin: 0 0 10px;
    font-family: var(--zg-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zgv-text-2);
}

.zgv-eyebrow--accent {
    color: var(--zgv-orange-on-dark);
}

.zgv-hero-title {
    margin: 0;
    font-family: var(--zg-font-ui);
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--zgv-text);
}

/* Brand accent text (the hero's second line). */
.zgv-accent {
    color: var(--zgv-orange-ink);
}

.zgv-hero-title > span,
.zgv-hero-title .zgv-accent {
    display: block;
    color: var(--zgv-orange-ink);
}

.zgv-h1 {
    margin: 0;
    font-family: var(--zg-font-ui);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--zgv-text);
}

/* Phones: a little smaller, so long single words (German compounds such as
   "Unternehmensverzeichnis") fit the column from 360px up. */
@media (max-width: 575.98px) {
    .zgv-h1 { font-size: clamp(1.625rem, 7.5vw, 1.9rem); }
}

/* Headings never push the page sideways: a word wider than the column
   breaks onto the next line instead (a soft hyphen in the text, U+00AD,
   still gives the nicer "Unternehmens- / verzeichnis" break). */
.zgv-hero-title,
.zgv-h1,
.zgv-h2,
.zgv-band-title {
    overflow-wrap: break-word;
}

.zgv-h2 {
    margin: 0;
    font-family: var(--zg-font-ui);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--zgv-text);
}

.zgv-h3 {
    margin: 0;
    font-family: var(--zg-font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zgv-text);
}

.zgv-lead {
    max-width: 40rem;
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--zgv-text-2);
}

.zgv-muted {
    color: var(--zgv-muted);
}

/* Arabic, Chinese and Hindi: no capitals to transform, and tracking either
   breaks letter joins (Arabic) or collides glyphs (Han). Arabic also needs
   more line height than the tight Latin display settings allow. */
html[dir="rtl"] .zgv-eyebrow,
html[lang="ar"] .zgv-eyebrow,
html[lang|="zh"] .zgv-eyebrow,
html[lang|="hi"] .zgv-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

html[dir="rtl"] :is(.zgv-hero-title, .zgv-h1, .zgv-h2, .zgv-h3, .zgv-band-title, .zgv-card-title),
html[lang="ar"] :is(.zgv-hero-title, .zgv-h1, .zgv-h2, .zgv-h3, .zgv-band-title, .zgv-card-title),
html[lang|="zh"] :is(.zgv-hero-title, .zgv-h1, .zgv-h2, .zgv-h3, .zgv-band-title, .zgv-card-title) {
    letter-spacing: 0;
}

html[dir="rtl"] .zgv-hero-title,
html[lang="ar"] .zgv-hero-title { line-height: 1.3; }

html[dir="rtl"] :is(.zgv-h1, .zgv-band-title),
html[lang="ar"] :is(.zgv-h1, .zgv-band-title) { line-height: 1.35; }

html[lang|="hi"] .zgv-hero-title { line-height: 1.2; }
html[lang|="hi"] :is(.zgv-h1, .zgv-band-title) { line-height: 1.25; }

/* ------------------------------------------------------------------ */
/* 3. Buttons and links                                                */
/* ------------------------------------------------------------------ */
.zgv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--zgv-radius-sm);
    background: transparent;
    color: var(--zgv-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.zgv-btn:hover,
.zgv-btn:focus {
    text-decoration: none;
}

/* Keyboard focus everywhere in this file: an opaque 2px outline in
   --zgv-focus (at least 3:1 on white, the grey panels and the soft
   surfaces); .zgv-band turns it white. */
.zgv-btn:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
}

.zgv-btn > i {
    font-size: 0.875em;
    line-height: 1;
}

.zgv-btn--sm {
    height: 34px;
    padding-inline: 14px;
    font-size: 0.8125rem;
}

/* Orange with dark text: white on this orange fails contrast. */
.zgv-btn--primary {
    background: var(--zgv-orange);
    border-color: var(--zgv-orange);
    color: var(--zgv-text);
}

.zgv-btn--primary:hover,
.zgv-btn--primary:focus {
    background: var(--zgv-orange-hover);
    border-color: var(--zgv-orange-hover);
    color: var(--zgv-text);
}

.zgv-btn--primary:active {
    background: var(--zgv-orange-active);
    border-color: var(--zgv-orange-active);
}

.zgv-btn--dark {
    background: var(--zgv-text);
    border-color: var(--zgv-text);
    color: #fff;
}

.zgv-btn--dark:hover,
.zgv-btn--dark:focus {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}

.zgv-btn--outline {
    background: #fff;
    border-color: var(--zgv-line);
    color: var(--zgv-text);
}

.zgv-btn--outline:hover,
.zgv-btn--outline:focus {
    background: var(--zgv-bg-soft);
    border-color: #cbd5e1;
    color: var(--zgv-text);
}

/* For the dark band. */
.zgv-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--zgv-text);
}

.zgv-btn--light:hover,
.zgv-btn--light:focus {
    background: var(--zgv-bg-panel);
    border-color: var(--zgv-bg-panel);
    color: var(--zgv-text);
}

.zgv-btn--ghost-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.zgv-btn--ghost-light:hover,
.zgv-btn--ghost-light:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    color: #fff;
}

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

.zgv-btn:disabled,
.zgv-btn.is-disabled,
.zgv-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* "Browse all requests ->": strong text link with a trailing arrow
   (<i class="fa-solid fa-arrow-right zgv-flip"></i>). */
.zgv-link-strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zgv-text);
    text-decoration: none;
    white-space: nowrap;
}

.zgv-link-strong:hover,
.zgv-link-strong:focus {
    color: var(--zgv-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zgv-link-strong > i {
    font-size: 0.75em;
    transition: transform 0.15s ease;
}

.zgv-link-strong:hover > i { transform: translateX(2px); }
html[dir="rtl"] .zgv-link-strong > i.zgv-flip { transform: scaleX(-1); }
html[dir="rtl"] .zgv-link-strong:hover > i.zgv-flip { transform: scaleX(-1) translateX(2px); }

/* Inline text link (inside notes and paragraphs). */
.zgv-link {
    color: var(--zgv-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.3);
    text-underline-offset: 3px;
}

.zgv-link:hover,
.zgv-link:focus {
    color: var(--zgv-text);
    text-decoration-color: currentColor;
}

.zgv-link-strong:focus-visible,
.zgv-link:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------------------------------------------------------------------ */
/* 4. Page head / section head                                         */
/* ------------------------------------------------------------------ */
/* The action button sits level with the h1 (mockups 3 and 4), not down at
   the lead line. */
.zgv-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}

.zgv-page-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.zgv-page-head-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zgv-page-head > .zgv-btn {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .zgv-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 22px;
    }

    .zgv-page-head-actions { width: 100%; }

    .zgv-page-head > .zgv-btn,
    .zgv-page-head-actions > .zgv-btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

.zgv-sec-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.zgv-sec-head-text {
    flex: 1 1 18rem;
    min-width: 0;
}

.zgv-sec-head .zgv-eyebrow {
    margin-bottom: 6px;
}

.zgv-sec-head > .zgv-link-strong {
    flex: 0 0 auto;
    padding-bottom: 3px;
}

/* ------------------------------------------------------------------ */
/* 5. Filter panel                                                     */
/* ------------------------------------------------------------------ */
.zgv-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--zgv-bg-panel);
    border-radius: var(--zgv-radius-lg);
}

.zgv-panel > * {
    min-width: 0;
}

/* A full-width row inside the panel (e.g. the location input that opens
   under "Near a location"). */
.zgv-panel-row {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.zgv-label {
    display: block;
    margin: 0 0 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zgv-text);
}

/* Search: <div class="zgv-search"><i class="fa-solid fa-magnifying-glass"></i>
   <input class="zgv-input" type="search" aria-label="..."></div> */
.zgv-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.zgv-search > i,
.zgv-search > .zgv-search-ico {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: var(--zgv-subtle);
    pointer-events: none;
}

.zgv-input {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-sm);
    box-shadow: none;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--zgv-text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zgv-search > .zgv-input {
    padding-inline-start: 40px;
}

/* --zgv-muted (4.8:1): on Requests and A-Z the placeholder is the only
   visible label of the search field. */
.zgv-input::placeholder {
    color: var(--zgv-muted);
    opacity: 1;
}

.zgv-input:hover {
    border-color: #cbd5e1;
}

/* A 2px edge in the focus colour (border + 1px ring), 5:1 on white. */
.zgv-input:focus,
.zgv-select:focus {
    outline: none;
    border-color: var(--zgv-focus);
    box-shadow: 0 0 0 1px var(--zgv-focus);
}

.zgv-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Chrome/Safari's clear button, redrawn in the palette's slate instead of
   the browser's blue. It sits at the inline end, so RTL needs nothing. */
.zgv-input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-inline-start: 8px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.zgv-input[type="search"]::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Native <select> with its own chevron. */
.zgv-select {
    display: block;
    flex: 0 1 auto;
    height: 44px;
    min-width: 180px;
    max-width: 100%;
    margin: 0;
    padding-block: 0;
    padding-inline: 14px 36px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--zgv-text);
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zgv-select:hover {
    border-color: #cbd5e1;
}

html[dir="rtl"] .zgv-select {
    background-position: left 14px center;
}

/* Segmented control: <div class="zgv-seg" role="group">
   <button type="button" class="zgv-seg-btn" aria-pressed="true">...</button>...</div>
   Default track = panel grey with a white active pill. Inside .zgv-panel
   (already grey) the track turns white and the active pill dark. */
.zgv-seg {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    background: var(--zgv-bg-panel);
    border-radius: var(--zgv-radius);
}

.zgv-seg-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--zgv-radius-sm);
    background: transparent;
    color: var(--zgv-text-2);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.zgv-seg-btn > i {
    font-size: 0.8125rem;
}

.zgv-seg-btn:hover {
    color: var(--zgv-text);
}

.zgv-seg-btn.is-active,
.zgv-seg-btn[aria-pressed="true"],
.zgv-seg-btn[aria-selected="true"] {
    background: #fff;
    color: var(--zgv-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* Offset 0: the outline fills the 2px gap between buttons and stays inside
   the track's 3px padding. */
.zgv-seg-btn:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 0;
}

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

.zgv-seg--block > .zgv-seg-btn {
    flex: 1 1 0;
    min-width: 0;
}

.zgv-panel .zgv-seg,
.zgv-seg--light {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--zgv-line);
}

.zgv-panel .zgv-seg {
    min-height: 44px;
}

.zgv-panel .zgv-seg-btn.is-active,
.zgv-panel .zgv-seg-btn[aria-pressed="true"],
.zgv-panel .zgv-seg-btn[aria-selected="true"],
.zgv-seg--light > .zgv-seg-btn.is-active,
.zgv-seg--light > .zgv-seg-btn[aria-pressed="true"],
.zgv-seg--light > .zgv-seg-btn[aria-selected="true"] {
    background: var(--zgv-text);
    color: #fff;
    box-shadow: none;
}

/* Small outlined chips (industry strip). <button> or <a>. */
.zgv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zgv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-sm);
    background: #fff;
    color: var(--zgv-text-2);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.zgv-chip:hover,
.zgv-chip:focus {
    border-color: #cbd5e1;
    background: var(--zgv-bg-soft);
    color: var(--zgv-text);
    text-decoration: none;
}

.zgv-chip.is-active,
.zgv-chip[aria-pressed="true"] {
    border-color: var(--zgv-text);
    color: var(--zgv-text);
}

.zgv-chip:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    /* 16px stops iOS from zooming the page when a field gets focus. */
    .zgv-input,
    .zgv-select { font-size: 16px; }
}

/* Below the 1200px frame the search plus every filter rarely fits one row
   in every language, and the last filter used to drop alone to a second
   row. So the search takes the first row and the filters share the next. */
@media (min-width: 560px) and (max-width: 1199.98px) {
    .zgv-panel > .zgv-search { flex-basis: 100%; }
}

/* Narrow tablets: the segmented controls stretch to fill their row (also
   when a long translation still wraps one onto a row of its own). */
@media (min-width: 560px) and (max-width: 899.98px) {
    .zgv-panel > .zgv-seg { flex: 1 1 auto; }
}

@media (max-width: 559.98px) {
    .zgv-panel > .zgv-search { flex-basis: 100%; }
    .zgv-panel > .zgv-select { flex: 1 1 140px; min-width: 0; }
    /* A segmented control shares a row with a select when both fit (fewer
       rows above the results), otherwise it fills a row of its own. */
    .zgv-panel > .zgv-seg { flex: 1 1 auto; }
    /* Labels too long for half a phone row (German "In der Naehe eines
       Ortes") wrap onto two centred lines inside the button. */
    .zgv-panel > .zgv-seg > .zgv-seg-btn {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 8px;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
    }
    .zgv-panel-row > .zgv-search { flex-basis: 100%; }
    .zgv-panel-row > .zgv-select { flex: 1 1 140px; min-width: 0; }
}

/* Where supported, a select is as wide as its current label, so it only
   shares a row when that label fits in full (no clipped "All industries"). */
@supports (field-sizing: content) {
    @media (max-width: 559.98px) {
        .zgv-panel > .zgv-select {
            field-sizing: content;
            flex: 1 1 0;
            min-width: auto;
        }
    }
}

/* ------------------------------------------------------------------ */
/* 6. Count row, A-Z letter bar                                        */
/* ------------------------------------------------------------------ */
.zgv-countrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    margin: 18px 0 12px;
}

.zgv-count {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zgv-text);
}

.zgv-countrow-note {
    font-size: 0.75rem;
    color: var(--zgv-muted);
}

/* <div class="zgv-letters" role="group">
     <button type="button" class="zgv-letter zgv-letter--all" aria-pressed="true">All</button>
     <button type="button" class="zgv-letter" aria-pressed="false">A</button> ...
     <button type="button" class="zgv-letter" disabled>Q</button> ... # </div> */
.zgv-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 18px 0 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--zgv-line);
    list-style: none;
}

.zgv-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: var(--zgv-radius-sm);
    background: transparent;
    color: var(--zgv-text-2);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.zgv-letter--all {
    padding-inline: 12px;
}

.zgv-letter:hover:not(:disabled) {
    background: var(--zgv-bg-panel);
    color: var(--zgv-text);
}

.zgv-letter.is-active,
.zgv-letter[aria-pressed="true"],
.zgv-letter.is-active:hover,
.zgv-letter[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--zgv-text);
    color: #fff;
}

.zgv-letter:disabled,
.zgv-letter[aria-disabled="true"] {
    color: var(--zgv-subtle);
    background: transparent;
    cursor: default;
    opacity: 0.75;
}

.zgv-letter:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 0;
}

/* ------------------------------------------------------------------ */
/* 7. Card                                                             */
/* ------------------------------------------------------------------ */
/* The whole card is one <a class="zgv-card">. Listing cards start with
   .zgv-card-media; request cards do not. */
.zgv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius);
    box-shadow: var(--zgv-shadow-card);
    color: var(--zgv-text);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.zgv-card:hover,
a.zgv-card:focus {
    color: var(--zgv-text);
    text-decoration: none;
}

a.zgv-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--zgv-shadow-card-hover);
    transform: translateY(-1px);
}

.zgv-card:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
    border-color: var(--zgv-orange);
}

/* Photo band: cover image, or the seller-logo plate when there is none.
   Sellers upload text-heavy adverts in any shape (mostly square), so the
   whole image is shown, letterboxed on the soft panel, never cropped. */
.zgv-card-media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    background: var(--zgv-bg-soft);
    border-bottom: 1px solid var(--zgv-line-soft);
    overflow: hidden;
}

.zgv-card-media > img,
.zgv-card-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zgv-card-plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    background: linear-gradient(180deg, var(--zgv-bg-soft) 0%, var(--zgv-bg-panel) 100%);
    color: var(--zgv-subtle);
}

.zgv-card-plate > .zgv-card-logo,
.zgv-card-logo {
    display: block;
    width: 64px;
    height: 64px;
    padding: 6px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius);
    box-shadow: var(--zgv-shadow-card);
}

.zgv-card-plate > span {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zgv-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zgv-card-plate > i {
    font-size: 1.75rem;
    color: var(--zgv-subtle);
}

.zgv-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
}

.zgv-card-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 4px;
}

/* Icon tile; colour from .zgv-tint-N (N = zgvTint(sectorKey)). */
.zgv-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--zgv-radius-sm);
    background: var(--zgv-tint-0-bg);
    color: var(--zgv-tint-0-fg);
    font-size: 0.75rem;
    line-height: 1;
}

.zgv-tint-0 { background: var(--zgv-tint-0-bg); color: var(--zgv-tint-0-fg); }
.zgv-tint-1 { background: var(--zgv-tint-1-bg); color: var(--zgv-tint-1-fg); }
.zgv-tint-2 { background: var(--zgv-tint-2-bg); color: var(--zgv-tint-2-fg); }
.zgv-tint-3 { background: var(--zgv-tint-3-bg); color: var(--zgv-tint-3-fg); }
.zgv-tint-4 { background: var(--zgv-tint-4-bg); color: var(--zgv-tint-4-fg); }
.zgv-tint-5 { background: var(--zgv-tint-5-bg); color: var(--zgv-tint-5-fg); }

.zgv-card-cat {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--zgv-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zgv-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--zgv-bg-panel);
    color: var(--zgv-text-2);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Text colours are a step darker than the tints so 11px type passes AA. */
.zgv-pill--buyer {
    background: var(--zgv-tint-0-bg);
    color: #2449b8;
}

.zgv-pill--seller {
    background: var(--zgv-orange-soft);
    color: #b03f12;
}

.zgv-pill--own {
    background: var(--zgv-text);
    color: #fff;
}

/* Two pills side by side (e.g. "Buyer" + "My post"). */
.zgv-card-pills {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 4px;
    margin-inline-start: auto;
}

/* In a card's kicker the pill (or pill group) sits at the inline end. */
.zgv-card-kicker > .zgv-pill {
    margin-inline-start: auto;
}

.zgv-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-family: var(--zg-font-ui);
    font-size: 0.975rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--zgv-text);
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.zgv-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--zgv-text-2);
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Clamped, so the clip cannot be padded out (the hidden third line would
   show): Arabic needs 1.7 to keep the dots under the last line. */
html[dir="rtl"] .zgv-card-title,
html[lang="ar"] .zgv-card-title { line-height: 1.7; }
html[dir="rtl"] .zgv-card-desc,
html[lang="ar"] .zgv-card-desc { line-height: 1.7; }
html[lang|="hi"] .zgv-card-title { line-height: 1.5; }
html[lang|="hi"] .zgv-card-desc { line-height: 1.65; }

/* Sits at the bottom of the body so cards in a row line up. */
.zgv-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--zgv-muted);
}

.zgv-card-meta > i {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--zgv-subtle);
}

.zgv-card-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zgv-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 41px;
    padding: 10px 16px;
    border-top: 1px solid var(--zgv-line-soft);
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--zgv-muted);
}

.zgv-card-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.zgv-card-foot > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.zgv-card-foot i {
    font-size: 0.75rem;
    color: var(--zgv-subtle);
}

.zgv-card-price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zgv-text);
}

/* One-line card text clips so it can end in "...", but its line box is
   shorter than the glyphs: the dots and kasras under Arabic letters ("Global"
   lost the dots of its final yeh), Devanagari marks and Latin descenders were cut.
   Padding moves the clip edge out and the equal negative margin keeps every
   box where it was. (Index.cshtml clips the "Closes ..." text: i + span.) */
.zgv-card-cat,
.zgv-card-meta > span,
.zgv-card-foot > span:first-child,
.zgv-card-foot > span > i + span,
.zgv-card-plate > span {
    padding-block: 0.4em;
    margin-block: -0.4em;
}

@media (prefers-reduced-motion: reduce) {
    .zgv-card,
    .zgv-btn,
    .zgv-link-strong > i { transition: none; }
    a.zgv-card:hover { transform: none; }
}

/* Skeleton card while a list loads (show 4-8):
   <div class="zgv-card is-skeleton" aria-hidden="true">
     [<div class="zgv-card-media"></div>]
     <div class="zgv-card-body">
       <div class="zgv-card-kicker"><span class="zgv-skel zgv-skel--ico"></span><span class="zgv-skel zgv-skel--cat"></span></div>
       <span class="zgv-skel zgv-skel--title"></span>
       <span class="zgv-skel zgv-skel--line"></span>
       <span class="zgv-skel zgv-skel--short"></span>
     </div>
     <div class="zgv-card-foot"><span class="zgv-skel zgv-skel--foot"></span><span class="zgv-skel zgv-skel--foot-end"></span></div>
   </div>
   Put aria-busy="true" on the grid and a .zgv-sr-only "Loading..." text near it. */
.zgv-card.is-skeleton {
    pointer-events: none;
    box-shadow: none;
}

/* As tall as a real card body (2-line title, 2-line excerpt, location);
   Arabic and Hindi set those lines taller (see the card title rules). */
.zgv-card.is-skeleton .zgv-card-body {
    gap: 10px;
    min-height: 181px;
}

html[dir="rtl"] .zgv-card.is-skeleton .zgv-card-body,
html[lang="ar"] .zgv-card.is-skeleton .zgv-card-body { min-height: 198px; }
html[lang|="hi"] .zgv-card.is-skeleton .zgv-card-body { min-height: 190px; }

/* One row of skeletons at each grid width (4 / 3 / 2), so the page does not
   jump up by a whole row when a short list arrives. The :has() rules sit
   apart because a browser without :has() drops a whole selector list that
   contains it; there the hidden card's empty <li> only adds one row gap. */
.zgv-grid > li:nth-child(n+5) > .zgv-card.is-skeleton,
.zgv-grid > .zgv-card.is-skeleton:nth-child(n+5) {
    display: none;
}

.zgv-grid > li:nth-child(n+5):has(> .zgv-card.is-skeleton) {
    display: none;
}

@media (max-width: 1099.98px) {
    .zgv-grid > li:nth-child(n+4) > .zgv-card.is-skeleton,
    .zgv-grid > .zgv-card.is-skeleton:nth-child(n+4) {
        display: none;
    }

    .zgv-grid > li:nth-child(n+4):has(> .zgv-card.is-skeleton) {
        display: none;
    }
}

@media (max-width: 859.98px) {
    .zgv-grid > li:nth-child(n+3) > .zgv-card.is-skeleton,
    .zgv-grid > .zgv-card.is-skeleton:nth-child(n+3) {
        display: none;
    }

    .zgv-grid > li:nth-child(n+3):has(> .zgv-card.is-skeleton) {
        display: none;
    }
}

.zgv-skel,
.zgv-card.is-skeleton .zgv-card-media {
    background-color: #e8edf3;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: zgvShimmer 1.4s ease-in-out infinite;
}

.zgv-skel {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 10px;
    border-radius: 4px;
}

.zgv-skel--ico { width: 26px; height: 26px; border-radius: var(--zgv-radius-sm); }
.zgv-skel--cat { width: 42%; height: 10px; }
.zgv-skel--title { width: 86%; height: 14px; margin-bottom: 2px; }
.zgv-skel--line { width: 100%; }
.zgv-skel--short { width: 58%; }
.zgv-skel--foot { width: 38%; }
.zgv-skel--foot-end { width: 22%; }

@keyframes zgvShimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .zgv-skel,
    .zgv-card.is-skeleton .zgv-card-media { animation: none; }
}

/* Grid: 4 / 3 / 2 / 1 columns. Works on <div> or <ul> (li children). */
.zgv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zgv-grid > li {
    display: flex;
    min-width: 0;
}

.zgv-grid > li > .zgv-card {
    flex: 1 1 auto;
}

/* Empty / error states and other full-row items span every column. */
.zgv-grid > .zgv-empty,
.zgv-grid > .zgv-grid-full {
    grid-column: 1 / -1;
}

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

@media (min-width: 860px) {
    .zgv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .zgv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* 8. Surface, dark band, notice, empty state, note                    */
/* ------------------------------------------------------------------ */
/* Soft panel with a border (the hero's search card, Pricing's left card). */
.zgv-surface {
    background: var(--zgv-bg-soft);
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-lg);
    padding: 16px;
}

.zgv-surface--lg {
    padding: 20px;
}

/* Dark band: <section class="zgv-band"><div>eyebrow + .zgv-band-title</div>
   <div><p class="zgv-band-text"></p><div class="zgv-band-actions">...</div></div></section> */
.zgv-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 40px 44px;
    background: var(--zgv-band);
    border-radius: var(--zgv-radius-lg);
    color: #fff;
}

.zgv-band .zgv-eyebrow {
    color: var(--zgv-band-text);
}

.zgv-band .zgv-eyebrow--accent {
    color: var(--zgv-orange-on-dark);
}

.zgv-band-title {
    margin: 0;
    font-family: var(--zg-font-ui);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
}

/* One line per span: "Your next customer." / "Your next supplier." */
.zgv-band-title > span {
    display: block;
}

.zgv-band-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zgv-band-text);
}

.zgv-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.zgv-band a:not(.zgv-btn) {
    color: #fff;
}

/* On the navy band the focus outline is white (16:1). */
.zgv-band :focus-visible {
    outline-color: #fff;
}

@media (max-width: 859.98px) {
    .zgv-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 32px 28px;
    }
}

@media (max-width: 575.98px) {
    .zgv-band { padding: 28px 20px; }
    .zgv-band-actions > .zgv-btn { flex: 1 1 100%; }
}

/* Notice: <div class="zgv-notice"><i class="fa-solid fa-circle-info"></i>
   <div><strong class="zgv-notice-title">...</strong><p class="zgv-notice-text">...</p></div></div> */
.zgv-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--zgv-orange-soft);
    border: 1px solid var(--zgv-orange-soft-line);
    border-radius: var(--zgv-radius);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--zgv-text-2);
}

.zgv-notice > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 0.9375rem;
    color: var(--zgv-orange-ink);
}

.zgv-notice-title {
    display: block;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zgv-text);
}

.zgv-notice-text {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--zgv-text-2);
}

/* Empty state / error state:
   <div class="zgv-empty [zgv-empty--error]" role="status"><i class="fa-regular fa-folder-open"></i>
   <p class="zgv-empty-title">...</p><p class="zgv-empty-text">...</p><a class="zgv-btn zgv-btn--primary">...</a></div> */
.zgv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    background: #fff;
    border: 1px dashed var(--zgv-line);
    border-radius: var(--zgv-radius-lg);
    text-align: center;
    color: var(--zgv-text-2);
}

.zgv-empty > i,
.zgv-empty-ico {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1;
    color: var(--zgv-subtle);
}

.zgv-empty--error > i {
    color: var(--zgv-tint-5-fg);
}

.zgv-empty-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zgv-text);
}

.zgv-empty-text {
    max-width: 32rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--zgv-text-2);
}

.zgv-empty .zgv-btn {
    margin-top: 8px;
}

/* The line under a grid. */
.zgv-note {
    margin: 14px 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--zgv-muted);
}

.zgv-note a {
    color: var(--zgv-text-2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zgv-note a:hover {
    color: var(--zgv-text);
}

/* ------------------------------------------------------------------ */
/* 9. Header                                                           */
/* ------------------------------------------------------------------ */
/* Fixed, white, exactly var(--zg-bar-h) tall (other views clear it by
   that amount). A 3px navy strip runs along the top inside the height.
   The card-expiry script sets .zg-navbar's `top` when its bar shows. */
.zg-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    height: var(--zg-bar-h);
    padding: 0 24px;
    background: #fff;
    border-top: 3px solid var(--zgv-band);
    border-bottom: 1px solid var(--zgv-line);
    box-shadow: none;
    font-family: var(--zg-font-ui);
}

/* Not positioned: the mobile panel (absolute) measures from .zg-navbar. */
.zg-navbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: calc(var(--zgv-container) - 48px);
    height: 100%;
    margin: 0 auto;
}

/* The two outer slots take equal flex so the nav is centred on the bar. */
.zg-nav-side {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.zg-nav-side--start {
    position: relative;
    z-index: 1002;
}

.zg-nav-side--end {
    position: relative;
    z-index: 1002;
    justify-content: flex-end;
}

/* Wordmark: "zeoz" in ink, "GIG." in brand orange. dir="ltr" on the link
   keeps the full stop at the end on Arabic pages. */
.zg-brand {
    display: inline-block;
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--zgv-text);
    text-decoration: none;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.zg-brand:hover,
.zg-brand:focus {
    color: var(--zgv-text);
    text-decoration: none;
}

.zg-brand span {
    color: var(--zgv-orange-ink);
}

.zg-brand:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Centre nav (desktop). Links stretch to the bar's full height so the
   active rule sits on the bar's bottom border. */
.zg-mobile-panel {
    flex: 0 1 auto;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
    min-width: 0;
}

.zg-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--zgv-text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.zg-nav-link:hover,
.zg-nav-link:focus {
    color: var(--zgv-text);
    text-decoration: none;
}

.zg-nav-link.is-active {
    color: var(--zgv-text);
}

.zg-nav-link.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--zgv-orange);
}

.zg-nav-link:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: -8px;
    border-radius: 8px;
}

/* Account copies for the mobile panel; hidden on wide screens. */
.zg-panel-auth {
    display: none;
}

/* End slot: "Sign in" text link, primary button, profile, language. */
.zgv-nav-signin {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--zgv-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zgv-text-2);
    text-decoration: none;
    white-space: nowrap;
}

.zgv-nav-signin:hover,
.zgv-nav-signin:focus {
    color: var(--zgv-text);
    text-decoration: none;
}

.zgv-nav-signin:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 0;
}

.zg-nav-side--end > .zgv-btn {
    flex: 0 0 auto;
}

/* "My Profile": outline button with the member's logo/avatar. */
.zgv-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--zgv-bg-panel);
    color: var(--zgv-muted);
    font-size: 0.6875rem;
}

.zgv-avatar > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.zg-profile-btn.zgv-btn {
    padding-inline: 8px 12px;
}

/* Unread messages (shown by the poller; .zg-nav-unread-link / .zg-msg-count
   are also driven by Dashboard.cshtml). */
.zg-nav-unread-link {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    border-radius: var(--zgv-radius-sm);
    color: var(--zgv-text-2);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.zg-nav-unread-link:hover,
.zg-nav-unread-link:focus {
    background: var(--zgv-bg-panel);
    color: var(--zgv-text);
    text-decoration: none;
}

.zg-nav-unread-link:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 0;
}

.zg-msg-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 1rem;
    color: inherit;
}

.zg-msg-count {
    position: absolute;
    top: -7px;
    inset-inline-end: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: content-box;
    pointer-events: none;
    /* "99+" must not turn into "+99" on Arabic pages. */
    direction: ltr;
    unicode-bidi: isolate;
}

.zg-msg-count:empty {
    display: none;
}

/* Language picker (#zgLangSelect / #zgLangBtn / .zg-lang-option are wired
   by the layout's language script). Compact "EN v". */
.zg-lang-select {
    position: relative;
    flex: 0 0 auto;
}

.zg-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    margin: 0;
    padding: 0 9px 0 10px;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-sm);
    background: #fff;
    color: var(--zgv-text-2);
    font-family: var(--zg-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zg-lang-btn:hover {
    background: var(--zgv-bg-soft);
    border-color: #cbd5e1;
    color: var(--zgv-text);
}

.zg-lang-btn:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
}

.zg-lang-code {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0.04em;
}

.zg-lang-caret {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--zgv-muted);
    transition: transform 0.15s ease;
}

.zg-lang-select.is-open .zg-lang-caret {
    transform: rotate(180deg);
}

.zg-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 1003;
    display: none;
    min-width: 12.5rem;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.zg-lang-select.is-open .zg-lang-menu {
    display: block;
    animation: zgvMenuIn 0.14s ease-out;
}

.zg-lang-menu-label {
    display: block;
    padding: 6px 10px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zgv-muted);
}

html[dir="rtl"] .zg-lang-menu-label,
html[lang|="zh"] .zg-lang-menu-label,
html[lang|="hi"] .zg-lang-menu-label {
    letter-spacing: 0;
    text-transform: none;
}

.zg-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--zgv-radius-sm);
    background: transparent;
    color: var(--zgv-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

.zg-lang-option:hover {
    background: var(--zgv-bg-soft);
}

.zg-lang-option.is-current {
    background: var(--zgv-bg-panel);
    font-weight: 700;
}

.zg-lang-option:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: -2px;
}

.zg-lang-abbr {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--zgv-muted);
}

.zg-lang-option.is-current .zg-lang-abbr {
    color: var(--zgv-text);
}

@keyframes zgvMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Signed in (.zg-navbar--auth): five links plus three actions do not fit a
   strictly centred row at laptop widths, so the nav takes the space between
   the logo and the actions and centres itself there. Between 1180px and
   1380px the links tighten and "My Profile" shows only the avatar (the text
   stays for screen readers). */
@media (min-width: 1180px) {
    .zg-navbar--auth .zg-nav-side--start,
    .zg-navbar--auth .zg-nav-side--end {
        flex: 0 0 auto;
    }

    .zg-navbar--auth .zg-mobile-panel {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (min-width: 1180px) and (max-width: 1379.98px) {
    .zg-navbar--auth .zg-nav-link { padding-inline: 9px; }
    .zg-navbar--auth .zg-nav-link.is-active::after { inset-inline: 9px; }
    .zg-navbar--auth .zg-profile-btn.zgv-btn { padding-inline: 6px; }

    .zg-navbar--auth .zg-profile-btn .zg-profile-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Hamburger (CSS-only: #zgHamburger checkbox + label + sibling panel). */
.zg-hamburger-chk,
.zg-hamburger-btn {
    display: none;
}

/* ---- Up to 1179.98px: nav moves into a drop-down panel under the bar ---- */
@media (max-width: 1179.98px) {
    /* The real control: an invisible checkbox laid exactly over the drawn
       icon (the label beside it is aria-hidden), so taps, clicks and
       screen-reader touch exploration all land on it. It measures from
       .zg-navbar, whose end padding (24px; 16px on phones) less the
       label's -8px end margin puts the icon 16px (8px) from the edge.
       Space/Enter toggle it; the layout script keeps aria-expanded. */
    .zg-hamburger-chk {
        display: block;
        position: absolute;
        top: 50%;
        inset-inline-end: 16px;
        z-index: 1003;
        width: 40px;
        height: 40px;
        margin: -20px 0 0;
        padding: 0;
        border: 0;
        border-radius: var(--zgv-radius-sm);
        opacity: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    .zg-hamburger-btn {
        order: 3;
        position: relative;
        z-index: 1002;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        margin: 0 -8px 0 0;
        margin-inline: 0 -8px;
        border-radius: var(--zgv-radius-sm);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease;
    }

    .zg-hamburger-btn:hover,
    .zg-hamburger-chk:hover + .zg-hamburger-btn {
        background: var(--zgv-bg-panel);
    }

    .zg-hamburger-chk:focus-visible + .zg-hamburger-btn {
        outline: 2px solid var(--zgv-focus);
        outline-offset: 2px;
    }

    .zg-hamburger-btn span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--zgv-text);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .zg-hamburger-chk:checked + .zg-hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .zg-hamburger-chk:checked + .zg-hamburger-btn span:nth-child(2) { opacity: 0; }
    .zg-hamburger-chk:checked + .zg-hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .zg-nav-side {
        flex: 1 1 auto;
    }

    .zg-nav-side--start {
        flex: 0 1 auto;
    }

    /* The panel hangs from the bar's bottom edge (so it follows the bar when
       the card-expiry strip pushes it down) and fills the rest of the screen,
       less the strip's height (--zg-expiry-h, set by the layout's script). */
    .zg-mobile-panel {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        z-index: 1001;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: calc(100vh - var(--zg-bar-h) - var(--zg-expiry-h, 0px));
        height: calc(100dvh - var(--zg-bar-h) - var(--zg-expiry-h, 0px));
        padding: 8px 24px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    .zg-hamburger-chk:checked ~ .zg-mobile-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .zg-mobile-panel .zg-nav-link {
        flex: 0 0 auto;
        padding: 15px 12px;
        border-bottom: 1px solid var(--zgv-line-soft);
        font-size: 1rem;
        color: var(--zgv-text);
    }

    .zg-mobile-panel .zg-nav-link:hover {
        background: var(--zgv-bg-soft);
    }

    .zg-mobile-panel .zg-nav-link.is-active {
        color: var(--zgv-text);
        font-weight: 700;
    }

    .zg-mobile-panel .zg-nav-link.is-active::after {
        inset-inline: 0 auto;
        top: 12px;
        bottom: 12px;
        width: 3px;
        height: auto;
        border-radius: 2px;
    }

    .zg-mobile-panel .zg-nav-link:focus-visible {
        outline-offset: -2px;
        border-radius: 4px;
    }

    /* No page scrolling behind the open menu. */
    html:has(.zg-hamburger-chk:checked) {
        overflow: hidden;
    }
}

@media (max-width: 1179.98px) and (prefers-reduced-motion: reduce) {
    .zg-mobile-panel { transition: none; transform: none; }
}

/* ---- Below 768px: account buttons leave the bar for the panel ---- */
@media (max-width: 767.98px) {
    .zg-nav-side--end > .zgv-nav-signin,
    .zg-nav-side--end > .zgv-nav-cta,
    .zg-nav-side--end > .zg-profile-btn {
        display: none;
    }

    .zg-panel-auth {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .zg-navbar { padding-inline: 16px; }
    .zg-hamburger-chk { inset-inline-end: 8px; }
    .zg-mobile-panel { padding-inline: 16px; }
    .zg-brand { font-size: 1.375rem; }
}

/* Chat pages keep the bar; nothing else to change for body.zg-chat-active. */

/* ------------------------------------------------------------------ */
/* 10. Footer                                                          */
/* ------------------------------------------------------------------ */
/* .footer, .zg-lang-bar and .zg-socials-bar keep their names: Chat, Chats
   and Site.css hide them by those names. */
.footer.zgv-footer {
    flex-shrink: 0;
    padding: 0;
    background: var(--zgv-bg-soft);
    border-top: 1px solid var(--zgv-line);
    text-align: start;
    color: var(--zgv-text-2);
    font-family: var(--zg-font-ui);
}

/* The old footer language row stays in the markup but is not shown. */
.zg-lang-bar {
    display: none;
}

/* Brand left, links + socials right. When the links fit on one line beside
   the brand, the brand column grows and pushes them flush to the end edge
   (mockup 2). When they don't, the whole links block drops below the brand
   and starts at the start edge, rows reading start-aligned, instead of
   wrapping into ragged end-aligned rows with a lone link. */
.zgv-footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px 48px;
    padding-block: 36px 28px;
}

.zgv-footer-brand {
    flex: 1 0 auto;
}

.zgv-footer-brand .zg-brand {
    font-size: 1.375rem;
}

.zgv-footer-tagline {
    max-width: 22rem;
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--zgv-text-2);
}

.zgv-footer-side {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

/* Inline links (not flex items) so that a list which has to wrap is
   balanced into even lines instead of nine links and one on its own. */
.zgv-footer-links {
    margin: -4px 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    list-style: none;
    text-wrap: balance;
}

/* 18px margin + the space between the tags = the 22px column gap. */
.zgv-footer-links a {
    display: inline-block;
    margin-block: 4px;
    margin-inline-end: 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zgv-text-2);
    text-decoration: none;
    white-space: nowrap;
}

.zgv-footer-links a:last-child {
    margin-inline-end: 0;
}

.zgv-footer-links a:hover,
.zgv-footer-links a:focus {
    color: var(--zgv-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zgv-footer-links a:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Social icons: small, outlined, neutral. */
.zg-socials-bar.zgv-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    background: none;
    overflow: visible;
}

.zgv-socials .zg-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--zgv-line);
    border-radius: var(--zgv-radius-sm);
    background: #fff;
    color: var(--zgv-text-2);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.zgv-socials .zg-social-link svg {
    width: 14px;
    height: 14px;
}

.zgv-socials .zg-social-link:hover,
.zgv-socials .zg-social-link:focus {
    border-color: #cbd5e1;
    background: var(--zgv-bg-panel);
    color: var(--zgv-text);
}

.zgv-socials .zg-social-link:focus-visible {
    outline: 2px solid var(--zgv-focus);
    outline-offset: 2px;
}

.zgv-footer-bottom {
    border-top: 1px solid var(--zgv-line);
    padding-block: 14px 18px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--zgv-muted);
    text-align: center;
}

.zgv-footer-bottom p {
    margin: 0;
}

.zgv-footer-sep {
    margin-inline: 6px;
}

@media (max-width: 767.98px) {
    .zgv-footer-main {
        flex-direction: column;
        gap: 22px;
        padding-block: 28px 24px;
    }

    .zgv-footer-side {
        width: 100%;
    }

    .zgv-footer-links {
        margin-block: -3px;
    }

    /* Taller rows so each link is an easy tap target (6px between rows,
       about 18px between links). */
    .zgv-footer-links a {
        margin-block: 3px;
        margin-inline-end: 14px;
        padding-block: 3px;
    }

    /* The two statements stack instead of running on with a dot. */
    .zgv-footer-bottom p > span { display: block; }
    .zgv-footer-sep { display: none !important; }
}