/* ═══════════════════════════════════════════════════════════════════════
   COUNTRY FLAGS FOR PHONE SELECTS
   ═══════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS AT ALL

   The obvious way to put a flag in a country picker is the emoji: 🇨🇴 +57.
   It does not work. Flag emoji are regional-indicator PAIRS, and Windows
   ships no glyphs for them — Segoe UI Emoji has every other emoji and no
   flags. Chrome falls back to rendering the two letters, which is why the
   control read "co +57" instead of showing anything resembling Colombia.
   No CSS fixes that; the glyph is simply absent from the OS.

   So the flag has to be an IMAGE. And that forces the second constraint:
   a native <select> renders text in its options and nothing else — no
   markup, no images, ever. You cannot put a flag inside <option>.

   The way through: draw the flag as a background on the SELECT itself and
   pick which one by what is currently selected. The closed control — the
   thing anyone actually looks at — shows a real flag on every platform.
   The open list stays text, which is also what the native iOS/Android
   pickers show regardless, so nothing is lost where it matters.

   NO JAVASCRIPT. :has() reads the checked option directly. Where it is
   unsupported the selector simply never matches, the flag never paints,
   and the control degrades to the country code alone — today's behaviour,
   not a broken one.

   Loaded AFTER storefront.css / site-colombia.css in both layouts, so
   select.cc-select beats select.sf-lo-i on source order at equal
   specificity, and beats Bootstrap's .form-select on specificity.

   ADDING A COUNTRY: add the <option>, add one :has() rule. Nothing else.
   ══════════════════════════════════════════════════════════════════════ */

select.cc-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Two layers, always in this order: flag left, chevron right. The chevron
       is redeclared here rather than inherited because setting background-image
       replaces the whole stack — a host stylesheet's arrow would be wiped out
       by the flag and the control would lose its dropdown affordance. */
    background-repeat: no-repeat, no-repeat;
    background-position: left 13px center, right 9px center;
    background-size: 23px 16px, 13px 13px;
    background-image: none,
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6058' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* ── FLAG INSTEAD OF THE DIAL CODE ────────────────────────────────
       The closed control shows the flag ALONE. The dial code is still in the
       DOM — it is the option's text, it is what posts, and it is what a screen
       reader announces — it is simply not painted, because colour is the only
       thing being removed.

       Hiding it any other way would break something: display:none on the
       option removes it from the list, font-size:0 collapses the control's
       line box, and text-indent moves the caret in some engines. Transparent
       text keeps the control a normal, focusable, keyboard-operable select
       that merely has nothing visible to draw. */
    color: transparent;
    text-shadow: none;

    /* Sized for a flag and a chevron, nothing else. Both hosts previously
       reserved ~7.5rem for "+57" and have been narrowed to match. */
    width: 4.75rem;
    min-width: 4.75rem;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    cursor: pointer;
}

/* The OPEN list is drawn by the browser, not by us, and it can only ever
   render text — a native <select> accepts no markup in <option>. So the
   dropdown keeps showing "+57" / "+1", which is the right outcome: the flag
   identifies the country at a glance, and the dial code is one tap away for
   anyone who does not recognise it. Colour is restored explicitly here
   because the option would otherwise inherit the transparent text above and
   the list would open blank. */
select.cc-select option {
    color: #1f2430;
    background: #fff;
}

/* ── COLOMBIA ────────────────────────────────────────────────────────────
   Yellow occupies the top HALF, blue and red a quarter each — not three
   equal bands. Drawn on a 6×4 grid so those proportions are exact. */
select.cc-select:has(option[value="+57"]:checked) {
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='6' height='4' fill='%23CE1126'/%3E%3Crect width='6' height='3' fill='%23003893'/%3E%3Crect width='6' height='2' fill='%23FCD116'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6058' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── UNITED STATES ───────────────────────────────────────────────────────
   Seven bands and a plain canton. The real flag has thirteen stripes and
   fifty stars; at 21px wide those render as grey mush, so this is the
   legible reduction rather than the accurate one. */
select.cc-select:has(option[value="+1"]:checked) {
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'%3E%3Crect width='13' height='7' fill='%23FFFFFF'/%3E%3Cpath fill='%23B22234' d='M0 0h13v1H0zM0 2h13v1H0zM0 4h13v1H0zM0 6h13v1H0z'/%3E%3Crect width='5.5' height='4' fill='%233C3B6E'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6058' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   COUNTRY TOGGLE — the flag buttons that replace the select
   ═══════════════════════════════════════════════════════════════════════
   Used by Views/Shared/_CountryToggle.cshtml. Palette-neutral on purpose:
   it renders inside ValoraFi's white Bootstrap forms AND the storefront's
   cream overlay, so it borrows currentColor and a translucent tint rather
   than naming either theme's variables. */

.cc-tog { display: inline-flex; gap: 6px; }

/* Visually hidden, NOT display:none — the radio must stay focusable and
   keyboard-operable, and arrow keys must still move between them. */
.cc-tog-r {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}

.cc-tog-l {
    display: block;
    width: 46px; height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .14);
    background-color: rgba(0, 0, 0, .02);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 18px;
    cursor: pointer;
    /* Unselected flags sit back so the chosen one reads first. */
    opacity: .45;
    filter: saturate(.7);
    transition: opacity .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.cc-tog-l:hover { opacity: .8; filter: saturate(.95); }

/* Selected: full colour, a ring in the host's own accent via currentColor. */
.cc-tog-r:checked + .cc-tog-l {
    opacity: 1;
    filter: none;
    border-color: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
    background-color: transparent;
}

/* Keyboard focus has to be visible on the LABEL, because the input it belongs
   to is the hidden one. Without this the control is unusable by keyboard —
   you can move through it and never see where you are. */
.cc-tog-r:focus-visible + .cc-tog-l {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cc-tog-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Same artwork as the select backgrounds above — see those comments for why
   the US flag is seven bands rather than thirteen. */
.cc-tog-l.cc-co {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='6' height='4' fill='%23CE1126'/%3E%3Crect width='6' height='3' fill='%23003893'/%3E%3Crect width='6' height='2' fill='%23FCD116'/%3E%3C/svg%3E");
}
.cc-tog-l.cc-us {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'%3E%3Crect width='13' height='7' fill='%23FFFFFF'/%3E%3Cpath fill='%23B22234' d='M0 0h13v1H0zM0 2h13v1H0zM0 4h13v1H0zM0 6h13v1H0z'/%3E%3Crect width='5.5' height='4' fill='%233C3B6E'/%3E%3C/svg%3E");
}

/* The flag is decorative — the country code beside it is the real label, and
   the select already carries an accessible name. Nothing is announced twice. */