/* ============================================================================
 * coupons.css — Clerkenwell Coupons, page-specific components.
 *
 * Loaded AFTER app.css + styles.css, so it inherits the shared brand shell
 * (header, hero, trust bar, operator strip, footer) and the shared search-bar /
 * suggestions styling.  This file adds only what is unique to the coupon
 * finder: the store grid, the store cards, the codes view, and the code cards.
 *
 * All colours resolve through the theme tokens defined in theme-dark.css /
 * theme-light.css (--bg, --panel, --panel-border, --text, --text-dim,
 * --text-bright, --endpoint, --best-border) so light and dark modes both render
 * correctly with no per-theme overrides here.
 * ========================================================================== */

/* --- Native controls follow the SITE theme, not the OS.  Without this the native
       <select> option-list highlight is drawn for the OS scheme and becomes
       unreadable when the site is in dark mode but the OS is light. ----------- */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* --- "Covers:" strip — the store names are clickable and populate the search. */
.op-strip-link {
    cursor: pointer;
    color: var(--text);
    transition: color 0.12s;
}

.op-strip-link:hover,
.op-strip-link:focus {
    color: var(--endpoint);
    text-decoration: underline;
    outline: none;
}

/* --- Country selector — filters the store lists (globals show everywhere). - */
.country-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 12px;
}

.country-bar__label {
    font-size: 13px;
    color: var(--text-dim);
}

.country-select {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    padding: 8px 34px 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.country-select:focus { outline: none; border-color: var(--endpoint); }

.country-select option { background: var(--panel); color: var(--text); }

/* --- Search wrapper — centres the shared .search-bar under the hero. ------- */
.coupon-search {
    max-width: 640px;
    margin: 4px auto 12px;
}

/* --- Browse dropdown — every store in the country, A-Z, for discovery. ------ */
.browse-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 26px;
}

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

.store-browse {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    max-width: 340px;
    padding: 8px 34px 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.store-browse:focus { outline: none; border-color: var(--endpoint); }

.store-browse option { background: var(--panel); color: var(--text); }

/* --- Store list view (popular grid + search matches). ---------------------- */
.stores-view {
    max-width: 940px;
    margin: 0 auto;
}

.stores-head {
    font-size: 18px;
    color: var(--text-bright);
    margin: 0 0 14px 2px;
    outline: none;
}

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

/* Store card is a <button>, so it must fully override the global button base
   (blue block, fixed 38px height) from app.css. */
.store-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 10px;
    padding: 14px 15px;
    height: auto;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}

.store-card:hover {
    border-color: var(--endpoint);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 30, 60, 0.12);
    background: var(--panel);
}

.store-card:active { transform: scale(0.99); }

.store-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.25;
}

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

/* Curated brands get a subtle accent bar so they read as "featured". */
.store-card--popular { border-left: 3px solid var(--endpoint); }

/* --- Codes view (one store's ranked codes). -------------------------------- */
.codes-view {
    max-width: 820px;
    margin: 0 auto;
}

.back-link {
    background: transparent;
    border: none;
    color: var(--text-dim);
    height: auto;
    padding: 4px 2px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.back-link:hover { background: transparent; color: var(--text-bright); }

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

.codes-title-row h2 {
    font-size: 24px;
    color: var(--text-bright);
    margin: 0;
    outline: none;
}

.codes-sub {
    font-size: 13px;
    color: var(--text-dim);
    margin: 4px 0 20px;
}

.codes-host {
    font-family: "Liberation Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
}

.codes-loading {
    color: var(--text-dim);
    font-size: 16px;
    padding: 12px 0 24px;
}

/* --- Code cards. ----------------------------------------------------------- */
.code-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 40px;
}

.code-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 14px 18px;
}

.code-main { min-width: 0; }

.code-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 6px;
    line-height: 1.35;
}

.code-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-dim);
}

.conf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.conf-high { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.conf-mid  { background: rgba(37, 96, 230, 0.18);  color: #7aa5ff; }
.conf-low  { background: rgba(148, 163, 184, 0.18); color: var(--text-dim); }

:root[data-theme="light"] .conf-high { color: #047857; }
:root[data-theme="light"] .conf-mid  { color: #1d4fc2; }

.code-source { color: var(--text-dim); }

.code-action {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* The code itself — monospaced, boxed, and selectable so a user can copy it by
   hand if they prefer. */
.code-value {
    font-family: "Liberation Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-bright);
    background: var(--bg);
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    padding: 7px 12px;
    user-select: all;
    white-space: nowrap;
}

/* Copy button + Visit-store link share one call-to-action look, overriding the
   global button base so they stay compact next to the code. */
.copy-btn,
.visit-store {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--endpoint);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    height: auto;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    white-space: nowrap;
}

.copy-btn:hover,
.visit-store:hover { background: #155ab9; }

.copy-btn.copied { background: var(--best-border); }

/* --- How-it-works section (reuses .how-grid / .how-card from app.css). ------ */
.how {
    max-width: 820px;
    margin: 44px auto 8px;
    padding: 0 4px;
}

.how h2 {
    font-size: 22px;
    color: var(--text-bright);
    margin: 0 0 18px;
    text-align: center;
}

/* --- Narrow viewports — stack the code card so the value + button wrap. ----- */
@media (max-width: 560px) {

    .code-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .code-action { justify-content: space-between; }

    .code-value { flex: 1; text-align: center; }

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

}