/* ──────────────────────────────────────────────────────────────────
 * remvo-country.css | v3.0 — clean rewrite
 *
 * Corridor picker and waitlist screens. Rebuilt from scratch after v2.x
 * accumulated dangling selectors and orphan rules from iterative patches
 * that never should have compounded on top of each other.
 *
 * Key bug that v3 fixes: a dangling
 *   .remvo-country-section:first-child
 * selector left behind on the line above .remvo-country-row turned the
 * base row rule into a descendant selector. Rows only got layout inside
 * the first section, so everything below "Available now" rendered as
 * unstyled inline text.
 *
 * Structure below:
 *   1. Tokens
 *   2. Brand wordmark (modal header)
 *   3. Search
 *   4. List container
 *   5. Group headers (sticky)
 *   6. Rows (all sections, one rule)
 *   7. Active-section prominence
 *   8. Highlighted row
 *   9. Waitlist form
 *  10. Confirmation
 *  11. Corridor line (deposit modal)
 *  12. Scrollbar hiding
 *  13. Mobile
 *  14. Reduced motion
 *
 * Shell (.remvo-modal-overlay / .remvo-modal / etc) is reused from
 * remvo-modal.css. Everything here is additive and scoped.
 * ────────────────────────────────────────────────────────────────── */

:root {
    --rv-gold:      #C9A84C;
    --rv-gold-soft: rgba(201, 168, 76, 0.10);
    --rv-gold-line: rgba(201, 168, 76, 0.30);
    --rv-hair:      rgba(255, 255, 255, 0.07);
    --rv-quiet:     rgba(255, 255, 255, 0.45);
}


/* ── Brand wordmark ────────────────────────────────────────────── */
.remvo-brand {
    display: inline-flex;
    align-items: center;
}
.remvo-brand-wordmark {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--rv-gold);
    line-height: 1;
}
[data-remvo-country-modal] .remvo-brand-wordmark {
    font-size: 17px;
}


/* ── Search ────────────────────────────────────────────────────── */
.remvo-country-search-wrap {
    position: relative;
    margin: 0 0 .6rem 0;
}
.remvo-country-search {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 .8rem 0 2rem;
    border-radius: 8px;
    border: 1px solid var(--rv-hair);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-family: inherit;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.remvo-country-search:focus {
    border-color: var(--rv-gold-line);
    background: rgba(255, 255, 255, 0.06);
}
.remvo-country-search::placeholder {
    color: var(--rv-quiet);
}
/* Search glyph, drawn in CSS so the markup stays clean. */
.remvo-country-search-wrap::before {
    content: '';
    position: absolute;
    left: .7rem;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 1.5px solid var(--rv-quiet);
    border-radius: 50%;
    pointer-events: none;
}
.remvo-country-search-wrap::after {
    content: '';
    position: absolute;
    left: 1.42rem;
    top: 50%;
    width: 5px;
    height: 1.5px;
    margin-top: 3px;
    background: var(--rv-quiet);
    transform: rotate(45deg);
    pointer-events: none;
}


/* ── List container ────────────────────────────────────────────── */
.remvo-country-list {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 0 .5rem 0;
    border-radius: 10px;
    border: 1px solid var(--rv-hair);
    box-shadow: inset 0 -14px 14px -14px rgba(0, 0, 0, 0.55);
}

.remvo-country-loading,
.remvo-country-empty {
    padding: 1.1rem;
    text-align: center;
    font-size: .78rem;
    color: var(--rv-quiet);
}
.remvo-country-empty {
    display: none;
    padding: .4rem 0 .2rem 0;
}


/* ── Rows ──────────────────────────────────────────────────────── */
/* Flat list, one rule for every row. Grouped sections and status chips
   were removed deliberately — showing "not available" or "coming soon"
   up-front kills the waitlist funnel, since users who see the answer do
   not click, and we never capture the demand signal. */
.remvo-country-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: 46px;
    padding: 0 .85rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rv-hair);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: inherit;
    transition: background .12s ease;
}
.remvo-country-row:last-child {
    border-bottom: 0;
}
.remvo-country-row:hover,
.remvo-country-row:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}
.remvo-country-row:focus-visible {
    box-shadow: inset 2px 0 0 var(--rv-gold);
}

.remvo-country-name {
    font-size: .84rem;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Highlighted row ───────────────────────────────────────────── */
/* Auto-suggestion from last known location. Subtle by design: a wrong
   guess (VPN, borrowed device) should not misdirect a payment choice. */
.remvo-country-row.remvo-is-highlighted {
    background: var(--rv-gold-soft);
    box-shadow: inset 2px 0 0 var(--rv-gold);
}
.remvo-country-row.remvo-is-highlighted .remvo-country-name {
    color: var(--rv-gold);
    font-weight: 600;
}


/* ── Waitlist form ─────────────────────────────────────────────── */
.remvo-field {
    margin: 0 0 .8rem 0;
}
.remvo-field-label {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rv-quiet);
    margin: 0 0 .35rem 0;
}
.remvo-input-plain {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 .85rem;
    border-radius: 8px;
    border: 1px solid var(--rv-hair);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-family: inherit;
    font-size: .86rem;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.remvo-input-plain:focus {
    border-color: var(--rv-gold-line);
    background: rgba(255, 255, 255, 0.06);
}


/* ── Confirmation ──────────────────────────────────────────────── */
.remvo-country-done {
    text-align: center;
    padding: .4rem 0 .2rem 0;
}
.remvo-country-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rv-gold-soft);
    border: 1px solid var(--rv-gold-line);
    color: var(--rv-gold);
    margin: 0 0 .85rem 0;
}
.remvo-country-done-mark svg {
    width: 20px;
    height: 20px;
}
.remvo-country-done .remvo-modal-subtitle {
    margin-bottom: 0;
}


/* ── Corridor line (deposit modal) ─────────────────────────────── */
/* States which country this deposit routes through and the local
   currency. Verifiable before commit, not just on Remvo's page. */
.remvo-corridor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0 0 .9rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.remvo-corridor-country  { color: rgba(255, 255, 255, 0.55); }
.remvo-corridor-sep      { color: var(--rv-gold-line); }
.remvo-corridor-currency { color: var(--rv-gold); }


/* ── Scrollbar hiding ──────────────────────────────────────────── */
/* Firefox reserves a gutter for scrollbar-width: thin no matter how
   it is coloured, so the only way to reclaim that space is `none`.
   The sticky group headers already signal that the list scrolls, and
   the inset shadow on .remvo-country-list reinforces it. */
.remvo-country-list,
.remvo-modal-overlay .remvo-modal {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.remvo-country-list::-webkit-scrollbar,
.remvo-modal-overlay .remvo-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Country modal itself never scrolls — only the list inside does. */
[data-remvo-country-modal] .remvo-modal {
    overflow: hidden;
}


/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .remvo-country-list {
        max-height: 260px;
    }
    .remvo-country-row {
        height: 44px;
        padding: 0 .75rem;
    }
    .remvo-country-name {
        font-size: .82rem;
    }
}


/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .remvo-country-search,
    .remvo-country-row,
    .remvo-input-plain {
        transition: none;
    }
}