/* ================================================================
   page-member-state-detail.css
   Page-specific styles for /country (EU member-state detail page).
   What used to live in this file but was actually shared across
   the detail pages has been hoisted out:

     • Tab bar, body strip, sidebar, panel, stat cards, info
       tooltip, commodity-card tile grid       → page-detail-body.css
     • Trade-flows table + supplier + share    → components/table-trade-flows.css
     • Donut chart-section family              → page-detail-donut-chart.css

   What's left here is genuinely member-state-only:

     1. Print-only AidEnvironment logo (.print-logo)
     2. Import summary wrapper (.import-summary) — transparent
        wrapper around the .cc-commodity-card tile grid on the
        Overview tab; sets the orange info accent.
     3. Download confirmation modal (.modal__*) — the HTML / PDF
        download flow specific to the member-state page.

   Files this depends on
   ─────────────────────
     • page-header.css                   .cc-detail-breadcrumb*, .cc-detail-hero*
     • page-detail-body.css              every shared detail chrome class
     • components/table-trade-flows.css  .cc-table--trade-flows + cells
     • page-detail-donut-chart.css       .chart-section family
     • components/table-base.css         .cc-table* chassis
     • dropdown.css                      .cc-detail-combo* combobox
   ================================================================ */


/* === PRINT-ONLY ELEMENTS ========================================
   The AidEnvironment logo at the top of #report-section only appears
   in the downloaded PDF/HTML version. Hide it on the live web page;
   print.css (loaded with media="print") re-enables it for printing. */
.print-logo {
    display: none;
}


/* === IMPORT SUMMARY WRAPPER =====================================
   Transparent wrapper around the .cc-commodity-card tile grid in
   the Overview tab. No own background — each tile inside the grid
   is its own stat-card-style surface. Width + centring come from
   the parent .cc-detail-panel wrapper. */
.import-summary {
    margin: 0;
}


/* === MODAL (HTML / PDF download confirmation) ===================
   Restyled to match the site's design language: white card surface,
   dark-teal heading, muted body text, and pill buttons whose colour
   logic mirrors the global .btn-teal / .btn-yellow classes. */

.modal__overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--ae-black) 55%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.modal__content {
    position: relative;          /* anchor for .modal__close in top-right */
    background: var(--white);
    color: var(--ae-black);
    padding: var(--space-xl);
    border-radius: var(--radius-card);
    width: 90%;
    max-width: 680px;
    box-shadow: var(--shadow-card);
    text-align: left;
    font-family: var(--font-body);
}

/* Top-right close button. Same light-grey-as-pill aesthetic as
   .modal__btn--cancel below — picks up the .cs-clear-location-btn
   colour family. Clicking it routes to the same closeModal() handler
   that the click-outside-overlay already uses. */
.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.modal__close:hover,
.modal__close:focus-visible {
    background: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    color: var(--white);
    outline: none;
}

.modal__content h2 {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    color: var(--ae-darkblue);
    font-size: var(--fs-h2);
    line-height: 1.15;
}

.modal__content p {
    color: var(--text-muted);
    margin: 0 0 var(--space-lg);
    line-height: 1.55;
}

/* Two-row layout: PDF + HTML side-by-side on top, Cancel underneath
   (and visually smaller via reduced vertical padding). */
.modal__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.modal__actions-primary {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

/* Shared base — pill, transitions, typography. Each variant only
   overrides its background / border / colour. */
.modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: -0.5px;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-base),
                background var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

/* De-emphasised cancel — mirrors the .cs-clear-location-btn pattern
   on the case-studies rail: light-grey outline + transparent fill at
   rest, light-grey fill + white text on hover. Body font (not
   NexaBold) so the label sits visually centred inside the pill;
   NexaBold has tall cap height + extra leading which previously made
   "Cancel" read slightly high. */
.modal__btn--cancel {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 7px 14px;
    background: transparent;
    color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    border-width: 1px;
    border-color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
}
.modal__btn--cancel:hover {
    background: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    color: var(--white);
    border-color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
}

/* Secondary action — interactive HTML download (matches .btn-yellow). */
.modal__btn--html {
    background: var(--ae-orange);
    color: var(--ae-black);
}
.modal__btn--html:hover {
    background: transparent;
    border-color: var(--ae-orange);
    color: var(--ae-orange);
}

/* Primary action — PDF (matches .btn-teal). */
.modal__btn--pdf {
    background: var(--ae-darkblue);
    color: var(--white);
}
.modal__btn--pdf:hover {
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}