/* ==========================================================
   FINTECHOISIS | GPIR
   Country Intelligence Engine — regional directory, status
   badges and country-page data components. Reusable across
   all regions (APAC now; LATAM/Africa/Europe/Americas/GCC
   intended to reuse the same classes later).
========================================================== */

/* ----------------------------------------------------------
   STATUS BADGES (ACTIVE / BUILDING / COMING SOON)
---------------------------------------------------------- */

.country-status{

    display:inline-flex;

    align-items:center;

    padding:2px 9px;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    border-radius:999px;

    line-height:1.6;

}

.country-status--active{

    color:#1F7A4D;

    background:rgba(63,167,108,.14);

    border:1px solid rgba(63,167,108,.35);

}

.country-status--building{

    color:var(--hero-navy, #0F2747);

    background:rgba(200,162,74,.16);

    border:1px solid rgba(200,162,74,.4);

}

.country-status--coming-soon{

    color:var(--color-grey, #5E636E);

    background:rgba(94,99,110,.1);

    border:1px solid rgba(94,99,110,.25);

}

.country-status--crosslink{

    color:#1F5AA8;

    background:rgba(31,90,168,.1);

    border:1px solid rgba(31,90,168,.3);

}

/* ----------------------------------------------------------
   DATA-PENDING TAG (used inside cards / dashboards where a
   figure is not yet sourced — never a fabricated number)
---------------------------------------------------------- */

.data-pending{

    display:inline-block;

    padding:2px 8px;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.03em;

    color:var(--color-grey, #5E636E);

    background:rgba(94,99,110,.08);

    border:1px dashed rgba(94,99,110,.35);

    border-radius:6px;

}

/* ----------------------------------------------------------
   REGION-CARD COMPACT COUNTRY DIRECTORY
   (used inside the homepage region-card grid, e.g. #region-apac)
---------------------------------------------------------- */

.region-subgroup-label{

    display:block;

    grid-column:1 / -1;

    margin:14px 0 0;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--color-primary, #B8863B);

}

.region-subgroup-label:first-of-type{

    margin-top:10px;

}

.region-country-directory{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:2px 14px;

    margin:10px 0 4px;

    padding-top:10px;

    border-top:1px solid var(--hero-light-border, rgba(15,39,71,.12));

}

.region-country-directory-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:6px;

    padding:5px 0;

    font-size:12.5px;

    min-width:0;

    border-bottom:1px dashed rgba(94,99,110,.16);

}

a.region-country-directory-item{

    color:var(--hero-navy, #0F2747);

    font-weight:600;

}

a.region-country-directory-item:hover{

    color:var(--color-primary, #B8863B);

}

span.region-country-directory-item{

    color:var(--color-grey-light, #A5ABB3);

}

.region-country-directory-item .country-status{

    flex-shrink:0;

    font-size:9px;

    padding:1px 6px;

}

/* ----------------------------------------------------------
   SEPA COUNTRY ROW — flag + name + currency + status
   (used in the compact homepage region-card directory and can
   be reused by any future region needing flag/currency display)
---------------------------------------------------------- */

.region-country-directory-item--sepa{

    flex-direction:column;

    align-items:flex-start;

    gap:3px;

    padding:7px 0;

}

.sepa-item-row{

    display:flex;

    align-items:center;

    gap:6px;

    width:100%;

}

.sepa-item-row .flag-icon{

    width:16px;

    height:auto;

    border-radius:2px;

    flex-shrink:0;

    box-shadow:0 0 0 1px rgba(15,39,71,.08);

}

.sepa-item-name{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.sepa-item-currency{

    padding-left:22px;

    font-size:11px;

    color:var(--color-grey-light, #A5ABB3);

    font-weight:500;

}

/* ----------------------------------------------------------
   SEPA CLASSIFICATION GROUP SUMMARY — compact homepage-card
   rollup so a 41-country directory never becomes a giant list
   on the region-grid overview (full list lives on the
   dedicated pages/regions/europe.html directory page)
---------------------------------------------------------- */

.sepa-group-summary{

    padding:8px 0;

    min-width:0;

    border-bottom:1px dashed rgba(94,99,110,.16);
}

.sepa-group-summary-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;
}

.sepa-group-label{

    font-size:12.5px;

    font-weight:700;

    min-width:0;

    overflow-wrap:break-word;

    color:var(--hero-navy, #0F2747);
}

.sepa-group-count{

    font-size:11px;

    font-weight:600;

    color:var(--color-grey, #5E636E);
}

.sepa-group-flags{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:5px;
}

.sepa-group-flags .flag-icon{

    width:18px;

    height:auto;

    border-radius:2px;

    box-shadow:0 0 0 1px rgba(15,39,71,.08);
}

.sepa-group-more{

    font-size:10.5px;

    font-weight:700;

    color:var(--color-grey-light, #A5ABB3);

    margin-left:2px;
}

.sepa-group-more--link{

    color:var(--color-primary, #B8863B);

    text-decoration:none;

    margin-left:0;
}

.sepa-group-more--link:hover{

    text-decoration:underline;
}

/* ----------------------------------------------------------
   SEPA DIRECTORY TILE — flag, currency and classification
   chips inside the full pages/regions/europe.html tiles
---------------------------------------------------------- */

.tile-flag-row{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:2px;

}

.tile-flag-row .flag-icon{

    width:20px;

    height:auto;

    border-radius:2px;

    flex-shrink:0;

    box-shadow:0 0 0 1px rgba(15,39,71,.08);
}

.tile-flag-row h3{

    margin:0;

}

/* ----------------------------------------------------------
   MINIATURE FLAG MODIFIER — used for Africa's 55-country
   directory, where the sheer country count means the flag
   must stay a small identification cue, not a visual anchor.
   Country name stays the dominant element; currency is
   secondary; the flag is visually subordinate to both.
---------------------------------------------------------- */

.tile-flag-row--mini .flag-icon{

    width:18px;
}

.sepa-item-row--mini .flag-icon{

    width:16px;
}

@media (max-width:640px){

    .tile-flag-row--mini .flag-icon{

        width:16px;
    }

    .sepa-item-row--mini .flag-icon{

        width:15px;
    }

    .sepa-group-flags .flag-icon{

        width:16px;
    }
}

.tile-currency-line{

    display:block;

    margin:2px 0 6px;

    font-size:12.5px;

    font-weight:700;

    color:var(--hero-navy, #0F2747);

}

.tile-currency-line small{

    margin-left:4px;

    font-weight:600;

    color:var(--color-grey, #5E636E);

}

.classification-chips{

    display:flex;

    flex-wrap:wrap;

    gap:4px;

    margin:6px 0 8px;

}

.classification-chip{

    display:inline-block;

    padding:2px 7px;

    font-size:9.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.03em;

    color:var(--hero-navy, #0F2747);

    background:rgba(15,39,71,.06);

    border:1px solid rgba(15,39,71,.12);

    border-radius:5px;
}

.region-directory-link{

    display:inline-block;

    margin-top:10px;

    font-size:13px;

    font-weight:700;

    color:var(--color-primary, #B8863B);

}

/* ----------------------------------------------------------
   FULL REGIONAL DIRECTORY PAGE (pages/regions/*.html)
---------------------------------------------------------- */

.directory-search{

    position:relative;

    max-width:360px;

    margin:0 0 28px;

}

.directory-search input{

    width:100%;

    padding:11px 16px;

    font-size:14px;

    font-family:inherit;

    color:var(--hero-navy, #0F2747);

    background:var(--hero-light-card, #FFFFFF);

    border:1px solid var(--hero-light-border, rgba(15,39,71,.16));

    border-radius:10px;

}

.directory-search input:focus{

    outline:none;

    border-color:var(--color-primary, #B8863B);

}

.directory-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:14px;

    /* Region pages repeat this grid once per sub-region (up to five times
       on Africa, up to 55 tiles total). Deferring the groups further down
       the page keeps a dense region page as cheap to first-render as a
       sparse one. */
    content-visibility:auto;

    contain-intrinsic-size:auto 400px;

}

.directory-tile{

    display:block;

    padding:16px 18px;

    background:var(--hero-light-card, #FFFFFF);

    border:1px solid var(--hero-light-border, rgba(15,39,71,.12));

    border-radius:12px;

}

a.directory-tile{

    transition:border-color .15s ease, transform .15s ease;

}

a.directory-tile:hover{

    border-color:var(--color-primary, #B8863B);

    transform:translateY(-2px);

}

span.directory-tile{

    opacity:.65;

}

.directory-tile-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;

}

.directory-tile h3{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:var(--hero-navy, #0F2747);

}

.directory-tile p{

    margin:0;

    font-size:12.5px;

    line-height:1.5;

    color:var(--hero-light-body, #4B5563);

}

.directory-tile[hidden]{

    display:none;

}

.directory-empty-state{

    padding:24px 0;

    font-size:14px;

    color:var(--color-grey, #5E636E);

}

.americas-latam-note{

    padding:16px 18px;

    margin:0 0 8px;

    background:rgba(31,90,168,.06);

    border:1px dashed rgba(31,90,168,.3);

    border-radius:10px;
}

.americas-latam-note p{

    margin:0;

    font-size:13px;

    line-height:1.6;

    color:var(--hero-navy, #0F2747);
}

.americas-latam-note a{

    color:#1F5AA8;

    font-weight:700;
}

/* ----------------------------------------------------------
   COUNTRY PAGE — DIASPORA INDICATOR PANEL
---------------------------------------------------------- */

.diaspora-panel{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));

    gap:16px;

    margin:16px 0;

}

.diaspora-indicator{

    padding:18px 20px;

    background:var(--hero-light-card, #FFFFFF);

    border:1px solid var(--hero-light-border, rgba(15,39,71,.12));

    border-radius:12px;

}

.diaspora-indicator strong{

    display:block;

    font-size:24px;

    font-weight:800;

    color:var(--hero-navy, #0F2747);

}

.diaspora-indicator span{

    display:block;

    margin-top:4px;

    font-size:12.5px;

    color:var(--hero-light-body, #4B5563);

}

.data-source-line{

    margin-top:14px;

    font-size:11.5px;

    color:var(--color-grey, #5E636E);

}

.data-source-line strong{

    color:var(--hero-navy, #0F2747);

    font-weight:700;

}

.stat-delta-up{

    display:inline-block;

    margin-left:6px;

    font-size:11px;

    font-weight:700;

    color:#1F7A4D;

}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 900px){

    .directory-grid{

        grid-template-columns:repeat(2, 1fr);

    }

}

@media (max-width: 640px){

    .region-country-directory{

        grid-template-columns:1fr;

    }

    .directory-grid{

        grid-template-columns:1fr;

    }

}