/* ================================================================
   page-member-state-select.css  –  Compliance Checker
   Per-page styles for the EU member state selector page
   (/select_member_state).
   ================================================================ */

    body {
        margin: 0;
    }

    .container {
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }


    .map-container {
        flex: 1 1 0;
        min-width: 0;
        /* Cap the map's width:
             1440 →  864px (60vw)
             1920 → 1152px (60vw)
             2560 → 1536px (60vw)
             3840 → 1800px (capped, 60vw of 3840 is 2304) */
        max-width: clamp(480px, 60vw, 1800px);
    }
    .map-container svg {
        width: 100%;
        height: auto;
        display: block;
    }
    .map-and-list-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(20px, 2.5vw, 60px);
        margin: 20px auto 0;
        width: 100%;
        max-width: min(95%, 2200px);
    }


    #countries #eu27 path {
        fill: var(--ae-lightgreen);
        fill-opacity: 1;
        stroke: var(--ae-green);
        stroke-width: 8;
    }

    #countries #eu27 path:hover {
        filter: brightness(85%);
    }

    g #gb path {
        display: inline;
        fill: var(--ae-darkblue);
        fill-opacity: 1;
        stroke: var(--ae-green);
        stroke-width: 8;
        enable-background: new;
    }

    #non-eu27 path {
        fill: var(--ae-darkblue);
        fill-opacity: 1;
        stroke: var(--ae-green);
        stroke-width: 8;
        display: inline;
    }

    /* Single-column scrollable list*/
    .country-list {
        width: clamp(300px, 18vw, 480px);
        height: clamp(600px, 45vw, 900px);
        overflow-y: auto;
    }

    /* Direct-child selectors (`> ul > li`) so these row rules don't
       bleed into the Sort-by commodity dropdown's own <li> options,
       which also live inside .country-list (in the sticky header). */
    .country-list > ul {
        display: flex;
        flex-direction: column;
        gap: 5px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Sticky search header at the top of .country-list. The outer
       .country-search is a rectangular white backing that covers the
       full container width — list items scrolling underneath are
       fully hidden, not just behind the pill's bounding box. The
       inner .country-search__pill carries the pill-shape + border. */
    .country-search {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--white);
        padding-bottom: 8px;
    }
    .country-search__pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--white);
        border: 1px solid var(--color-input-border, #ddd);
        border-radius: var(--radius-pill);
    }
    .country-search__icon {
        color: var(--color-muted, #888);
        font-size: 13px;
        flex-shrink: 0;
    }
    .country-search__input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: var(--ae-black);
    }
    .country-search__input::placeholder {
        color: var(--color-muted, #888);
    }
    .country-search__pill:focus-within {
        border-color: var(--ae-darkblue);
    }

    .country-list > ul > li {
        padding: 8px 12px;
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .country-list > ul > li.on,
    .country-list > ul > li:hover {
        background: var(--ae-lightgreen);
        color: black;
        font-weight: bold;
    }

    /* colour of country in map when hovering over the country names */
    #eu27 path.on {
        filter: brightness(85%);
    }


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
     2xl  ≥ 1536px   large monitors — list rows grow with viewport
   ================================================================ */

/* === 2xl  (≥ 1536px, large monitors) =========================== */
@media (min-width: 1536px) {
    .country-list > ul > li {
        padding: clamp(8px, 0.8vw, 14px) clamp(12px, 1.2vw, 22px);
        font-size: clamp(14px, 1vw, 18px);
    }
}