/*
================================================================================
Clerkenwell Coupons - site.css
================================================================================
Purpose:      The single stylesheet for the v2.1 site.  Styles the one-page
              home (header, hero search, promise cards, steps, ranking example,
              extension band, guides, FAQ, small print, footer) and the 502/504
              service error pages.  Dark slate palette and Noto Sans carried
              over from v1.0; v2.1 adds v1.0's indigo panels and a warm sand
              accent so sections read as distinct, plus a pale dot pattern in
              the hero and ripple arcs behind the FAQ.
Last Updated: 2026-09-23

STRUCTURE:
1. CSS custom properties - colours, spacing, type scale
2. Reset / base
3. Layout primitives - container, sections, split
4. Header and mobile menu
5. Buttons, chips, badges
6. Hero and search
7. Promise cards and steps
8. Ranking example (code cards)
9. Extension band
10. Guides
11. FAQ
12. Small print and final CTA
13. Footer
14. Error pages
15. Mobile breakpoints

DEPENDENCIES:
- Loaded by: index.html, 502.html, 504.html
- Font families assumed: Noto Sans (Google Fonts), system sans-serif fallback

MAINTENANCE NOTES:
- All hex / rgba values live in :root.  No colour literals below it.
- Flat CSS, no preprocessor, no build step.
- --endpoint (#1a73e8) is the only button colour; keep one primary button per
  section.  --sand is for bullets and sub-headings only, never for buttons.
- Decoration is deliberately limited to the hero pattern and the FAQ arcs.
================================================================================
*/

/* ----------------------------------------------------------------
   1. CSS custom properties
   ---------------------------------------------------------------- */
:root {
    --bg: #0f172a;
    --bg-deep: #0b1222;
    --panel: #1e293b;
    --panel-border: #334155;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-bright: #f1f5f9;
    --endpoint: #1a73e8;
    --endpoint-hover: #1557b0;
    --endpoint-soft: rgba(26, 115, 232, 0.16);
    --endpoint-glow: rgba(26, 115, 232, 0.35);
    --endpoint-text: #7fb0ff;
    --indigo: #1a1a3b;
    --indigo-card: #24244f;
    --indigo-border: #303068;
    --sand: #d9bd8c;
    --sand-soft: rgba(217, 189, 140, 0.14);
    --top-pick: #34d399;
    --top-pick-soft: rgba(52, 211, 153, 0.14);
    --popular: #fbbf24;
    --popular-soft: rgba(251, 191, 36, 0.14);
    --white: #ffffff;
    --shadow: rgba(2, 6, 23, 0.45);
    --ripple: rgba(127, 176, 255, 0.07);

    --font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 14px;
    --radius-small: 8px;
    --container: 1120px;
    --container-narrow: 760px;
    --space-section: 96px;
    --space-tight: 56px;
}

/* ----------------------------------------------------------------
   2. Reset / base
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17.5px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--text-bright);
    line-height: 1.2;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--endpoint);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--text-bright);
}

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

ul, ol {
    margin: 0;
    padding: 0;
}

:focus-visible {
    outline: 3px solid var(--endpoint);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--endpoint);
    color: var(--white);
    border-radius: var(--radius-small);
}

.skip-link:focus {
    top: 12px;
}

.muted {
    color: var(--text-dim);
    font-size: 1rem;
}

/* ----------------------------------------------------------------
   3. Layout primitives
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--space-section) 0;
}

.section--tight {
    padding: var(--space-tight) 0;
}

.section--panel {
    background: var(--bg-deep);
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
}

.section__title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.8em;
}

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

.eyebrow {
    color: var(--endpoint-text);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.6em;
}

.card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 24px;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* ----------------------------------------------------------------
   4. Header and mobile menu
   ---------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--indigo);
    border-bottom: 1px solid var(--indigo-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-bright);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.wordmark:hover {
    color: var(--text-bright);
}

.wordmark__icon {
    border-radius: 6px;
}

.wordmark__accent {
    color: var(--endpoint-text);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--text-bright);
}

.site-nav .site-nav__ext {
    padding: 8px 16px;
    border: 1px solid var(--indigo-border);
    border-radius: 999px;
}

.site-nav .site-nav__ext:hover {
    border-color: var(--endpoint);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.mobile-menu-toggle__bar {
    display: block;
    height: 2px;
    background: var(--text-bright);
    border-radius: 2px;
}

/* ----------------------------------------------------------------
   5. Buttons, chips, badges
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
    background: var(--endpoint);
    color: var(--white);
}

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

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

.btn--small {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn--large {
    padding: 16px 28px;
    font-size: 1.05rem;
}

.chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.95rem;
    text-decoration: none;
}

.chip:hover {
    border-color: var(--endpoint);
    color: var(--text-bright);
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge--top {
    background: var(--top-pick-soft);
    color: var(--top-pick);
}

.badge--popular {
    background: var(--popular-soft);
    color: var(--popular);
}

.badge--plain {
    background: var(--endpoint-soft);
    color: var(--endpoint-text);
}

/* ----------------------------------------------------------------
   6. Hero and search
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 88px;
    background:
        radial-gradient(900px 420px at 50% -10%, var(--endpoint-glow), transparent 70%),
        var(--bg);
    text-align: center;
}

/* Pale scatter of brand-coloured dots in mixed sizes, faded out towards
   the search box so it never competes with the headline. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 24px 32px, var(--endpoint) 0 7px, transparent 8px),
        radial-gradient(circle at 118px 58px, var(--top-pick) 0 11px, transparent 12px),
        radial-gradient(circle at 64px 126px, var(--popular) 0 4px, transparent 5px),
        radial-gradient(circle at 150px 150px, var(--sand) 0 9px, transparent 10px),
        radial-gradient(circle at 176px 12px, var(--endpoint-text) 0 3px, transparent 4px);
    background-size: 196px 196px;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to bottom, var(--white) 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, var(--white) 0%, transparent 85%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    max-width: 860px;
}

.hero h1 {
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.45em;
}

.hero__lead {
    max-width: 640px;
    margin: 0 auto 36px;
    color: var(--text-dim);
    font-size: 1.15rem;
}

.search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 680px;
    margin: 0 auto;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: 0 20px 50px var(--shadow);
}

.search:focus-within {
    border-color: var(--endpoint);
}

.search__icon {
    position: absolute;
    left: 24px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--text-dim);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.search__input {
    flex: 1;
    min-width: 0;
    padding: 14px 14px 14px 48px;
    background: transparent;
    border: 0;
    color: var(--text-bright);
    font-family: inherit;
    font-size: 1.05rem;
}

.search__input::placeholder {
    color: var(--text-dim);
}

.search__input:focus {
    outline: none;
}

.popular {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px auto 0;
    max-width: 720px;
}

.popular__label {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-right: 4px;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 40px;
    margin-top: 48px;
    list-style: none;
    color: var(--text-dim);
    font-size: 1rem;
}

.trust-row strong {
    color: var(--text-bright);
    font-size: 1.25rem;
    margin-right: 4px;
}

/* ----------------------------------------------------------------
   7. Promise cards and steps
   ---------------------------------------------------------------- */
.promise {
    background: var(--indigo);
    border-top: 1px solid var(--indigo-border);
    border-bottom: 1px solid var(--indigo-border);
}

.promise .card {
    background: var(--indigo-card);
    border-color: var(--indigo-border);
}

.promise__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
}

.promise__item h3 {
    font-size: 1.1rem;
}

.promise__item p {
    margin: 0;
    color: var(--text-dim);
    font-size: 1rem;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    counter-reset: none;
}

.step {
    position: relative;
    padding: 8px 8px 0;
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    margin-bottom: 16px;
    background: var(--endpoint-soft);
    color: var(--endpoint);
    border-radius: 50%;
    font-weight: 800;
}

.step:nth-child(2) .step__num {
    background: var(--top-pick-soft);
    color: var(--top-pick);
}

.step:nth-child(3) .step__num {
    background: var(--sand-soft);
    color: var(--sand);
}

.step h3 {
    font-size: 1.2rem;
}

.step p {
    margin: 0;
    color: var(--text-dim);
}

/* ----------------------------------------------------------------
   8. Ranking example (code cards)
   ---------------------------------------------------------------- */
.label-list {
    list-style: none;
    margin: 24px 0;
}

.label-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
}

.label-list .badge {
    min-width: 104px;
    text-align: center;
}

.example {
    margin: 0;
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    box-shadow: 0 30px 60px var(--shadow);
}

.example__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.example__store {
    color: var(--text-bright);
    font-weight: 800;
    font-size: 1.1rem;
}

.example__meta {
    color: var(--text-dim);
    font-size: 0.92rem;
}

.code-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
}

.code-card--top {
    border-color: var(--endpoint);
}

.code-card__title {
    margin: 6px 0 0;
    color: var(--text-bright);
    font-weight: 700;
}

.code-card__terms {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.code-card__code {
    padding: 6px 10px;
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.example__caption {
    margin-top: 10px;
    color: var(--text-dim);
    font-size: 0.88rem;
    text-align: center;
}

/* ----------------------------------------------------------------
   9. Extension band
   ---------------------------------------------------------------- */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    padding: 44px 48px;
    background: linear-gradient(120deg, var(--endpoint-soft), var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

.cta-band__title {
    font-size: 1.6rem;
    font-weight: 800;
}

.cta-band p {
    margin: 0;
    color: var(--text-dim);
    max-width: 560px;
}

/* ----------------------------------------------------------------
   10. Guides
   ---------------------------------------------------------------- */
.guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.guide-toc a {
    padding: 8px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.97rem;
    text-decoration: none;
}

.guide-toc a:hover {
    border-color: var(--endpoint);
}

.guide {
    padding: 40px 0;
    border-top: 1px solid var(--panel-border);
}

.guide__title {
    font-size: 1.5rem;
    font-weight: 800;
    max-width: 820px;
}

.guide > p {
    max-width: 820px;
}

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

.guide h4 {
    color: var(--sand);
    font-size: 1.12rem;
    margin-bottom: 12px;
}

.ticks {
    list-style: none;
}

.ticks li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.52em;
    width: 11px;
    height: 11px;
    background: var(--sand);
    border-radius: 50%;
}

.numbered {
    padding-left: 22px;
}

.numbered li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.numbered li::marker {
    color: var(--sand);
    font-weight: 700;
}

.fixes {
    margin: 0;
}

.fixes dt {
    color: var(--text-bright);
    font-weight: 700;
}

.fixes dd {
    margin: 0 0 10px;
    color: var(--text-dim);
}

.callout {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--sand-soft);
    border-left: 3px solid var(--sand);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    color: var(--text-bright);
    max-width: 820px;
}

.retailers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    margin-top: 16px;
}

.retailers p {
    color: var(--text-dim);
    font-size: 0.98rem;
}

.retailers a {
    color: var(--endpoint-text);
    font-size: 0.97rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------
   11. FAQ
   ---------------------------------------------------------------- */
/* Concentric ripple arcs rising from the top-right corner.  The only
   decorative motif outside the hero; kept faint behind the questions. */
#faq {
    position: relative;
    overflow: hidden;
}

#faq::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -260px;
    width: 620px;
    height: 620px;
    background: repeating-radial-gradient(circle, transparent 0 34px, var(--ripple) 34px 37px);
    border-radius: 50%;
    pointer-events: none;
}

#faq .container {
    position: relative;
}

.faq details {
    border-bottom: 1px solid var(--panel-border);
}

.faq summary {
    position: relative;
    padding: 20px 52px 20px 0;
    color: var(--text-bright);
    font-weight: 700;
    font-size: 1.08rem;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    background: var(--endpoint);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
}

.faq summary:hover::after {
    background: var(--endpoint-hover);
}

.faq details[open] summary::after {
    content: "\2212";
}

.faq details p {
    margin: 0;
    padding: 0 52px 20px 0;
    color: var(--text-dim);
}

/* ----------------------------------------------------------------
   12. Small print and final CTA
   ---------------------------------------------------------------- */
.small-print h3 {
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.small-print .ticks li {
    font-size: 1rem;
    color: var(--text-dim);
}

.small-print__contact {
    margin-top: 24px;
}

.final-cta {
    border-top: 1px solid var(--panel-border);
}

/* ----------------------------------------------------------------
   13. Footer
   ---------------------------------------------------------------- */
.site-footer {
    padding: 64px 0 32px;
    background: var(--bg-deep);
    border-top: 1px solid var(--panel-border);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 32px;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__heading {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.site-footer__col a {
    color: var(--text);
    text-decoration: none;
    font-size: 1rem;
}

.site-footer__col a:hover {
    color: var(--endpoint-text);
}

.site-footer__legal {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--panel-border);
    color: var(--text-dim);
    font-size: 0.92rem;
}

.site-footer__legal p {
    margin: 0;
}

/* ----------------------------------------------------------------
   14. Error pages
   ---------------------------------------------------------------- */
.error-page {
    display: flex;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

.error-page h1 {
    font-size: 2rem;
}

.error-page p {
    color: var(--text-dim);
}

/* ----------------------------------------------------------------
   15. Mobile breakpoints
   ---------------------------------------------------------------- */
@media (max-width: 960px) {

    .promise__grid,
    .retailers {
        grid-template-columns: repeat(2, 1fr);
    }

    .split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 760px) {

    :root {
        --space-section: 64px;
        --space-tight: 40px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 20px;
        background: var(--indigo);
        border-bottom: 1px solid var(--indigo-border);
    }

    .site-header.menu-open .site-nav {
        display: flex;
    }

    .site-nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--indigo-border);
    }

    .site-nav .site-nav__ext {
        margin-top: 12px;
        text-align: center;
    }

    .hero {
        padding: 64px 0 56px;
    }

    .search {
        flex-direction: column;
    }

    .search__icon {
        top: 34px;
    }

    .search__btn {
        width: 100%;
    }

    .steps,
    .guide__cols,
    .promise__grid,
    .retailers {
        grid-template-columns: 1fr;
    }

    .cta-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 28px 24px;
    }

    .code-card {
        grid-template-columns: 1fr auto;
    }

    .code-card .btn {
        display: none;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   VOUCHER FINDER - the live app grafted onto the v2.1 page
   ==========================================================================
   Everything below styles the DOM that coupons.js renders: the type-ahead
   under the hero search, the country / browse selects, the store grid, and
   the results header.  The code cards themselves reuse the design's own
   .code-card / .badge / .btn rules, so a real code renders exactly like the
   illustrated example further down the page.
   ========================================================================== */

/* ---- Type-ahead under the hero search ---------------------------------- */

.suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
    box-shadow: 0 20px 50px var(--shadow);
    text-align: left;
}

.suggestions.open {
    display: block;
}

.suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--panel-border);
}

.suggestion-item:last-child {
    border-bottom: 0;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: var(--endpoint-soft);
}

.suggestion-item .crs {
    color: var(--text-dim);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ---- Coverage aids: country + A-Z browse ------------------------------- */

.browse-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 680px;
    margin: 14px auto 0;
}

.browse-bar__label {
    color: var(--text-dim);
    font-size: 0.95rem;
}

.browse-bar__select {
    max-width: 260px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

.browse-bar__select:focus-visible {
    outline: 2px solid var(--endpoint-text);
    outline-offset: 2px;
}

/* ---- The results section ------------------------------------------------ */

.section--results {
    padding-top: var(--space-tight);
    padding-bottom: var(--space-tight);
    background: var(--bg-deep);
    border-bottom: 1px solid var(--panel-border);
}

.back-link {
    margin-bottom: 20px;
}

.codes-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.codes-title-row h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-bright);
}

.codes-sub {
    margin: 6px 0 24px;
    color: var(--text-dim);
    font-size: 0.98rem;
}

.codes-host {
    font-family: var(--mono);
}

.codes-loading {
    padding: 28px 0;
    color: var(--text-dim);
}

/* ---- Store grid ---------------------------------------------------------- */

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.store-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.store-card:hover {
    border-color: var(--endpoint-text);
    background: var(--endpoint-soft);
}

.store-card--popular {
    border-color: var(--indigo-border);
}

.store-name {
    font-weight: 700;
    color: var(--text-bright);
}

.store-codes {
    color: var(--text-dim);
    font-size: 0.88rem;
}

/* ---- Empty and error states --------------------------------------------- */

.empty {
    grid-column: 1 / -1;
    padding: 32px 20px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-small);
    color: var(--text-dim);
    text-align: center;
}

.empty h3 {
    margin: 0 0 6px;
    color: var(--text-bright);
    font-size: 1.05rem;
}

/* ---- Code-card extras the illustration does not need -------------------- */

/* A code the validator confirmed dead: kept visible but plainly spent. */
.code-card--inactive {
    opacity: 0.55;
}

.code-card--inactive .code-card__code {
    text-decoration: line-through;
}

.code-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.badge--dead {
    background: var(--panel);
    color: var(--text-dim);
}

.code-expiry {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.code-expiry.urgent {
    color: var(--popular);
    font-weight: 700;
}

/* The copy button confirms in place rather than moving anything. */
.btn.copied {
    background: var(--top-pick);
    border-color: var(--top-pick);
    color: var(--indigo);
}

/* A chip is now a button that drives the search, so it needs the reset. */
.chip {
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 640px) {

    .store-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .browse-bar__select {
        max-width: 100%;
        flex: 1 1 100%;
    }

}

/* ==========================================================================
   LEGAL PAGES - the full privacy policy and terms
   ==========================================================================
   These stay real pages at their original URLs (the Chrome Web Store listing
   links to the privacy policy), so they need readable long-form rules that
   the single-page design never required.
   ========================================================================== */

.legal h1 {
    margin: 0 0 6px;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-bright);
}

.legal .last-updated {
    margin: 0 0 32px;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.legal h2 {
    margin: 40px 0 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-bright);
}

.legal h3 {
    margin: 28px 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-bright);
}

.legal p,
.legal li {
    color: var(--text);
    line-height: 1.7;
}

.legal p {
    margin: 0 0 14px;
}

.legal ul,
.legal ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal li {
    margin-bottom: 10px;
}

.legal li::marker {
    color: var(--sand);
}

.legal strong {
    color: var(--text-bright);
}

.legal a {
    color: var(--endpoint-text);
}