/* ================================================================
   page-producing-country-select.css  –  Compliance Checker
   Per-page styles for the producing-country selector page
   (/select_exporter).
   ================================================================ */

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

.map-and-list-container {
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(20px, 2.5vw, 60px);
/* Match the member-state select's hero offset (20px top margin) so
   the two pages have identical spacing between the hero and the
   map+list area. */
margin: 20px auto 0;
padding: 0 20px;
width: 100%;
max-width: min(95%, 2200px);
}

.map-container {
    flex: 1;
    min-width: 0;
    aspect-ratio: 2/1;
    height: 701;
    display: flex;
    justify-content: center;
    align-items: center;
}


#world-map {
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
}

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

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

#countries #non-deforestation_countries path {
    fill: var(--ae-darkblue);
    fill-opacity: 1;
    stroke: var(--ae-green);
    stroke-width: 2;
    display: inline;
    enable-background: new;
}

/* Non-producer countries */
path.is-non-producer {
    pointer-events: none;
}

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

/* 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. Mirrors
   the same widget on the member-state select page. */
.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.on {
    background: var(--ae-lightgreen);
    color: black;
    font-weight: bold;
    cursor: pointer;
}

path.on {
    filter: brightness(85%);
}

.country-list > ul {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Spacing between items */
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
     2xl  ≥ 1536px   large monitors — country 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);
    }
}