/* Country / region switcher (header button + full-screen dialog). */

/* Same height as the header's btn-sm buttons; the margin offsets the
   surrounding .nav's ms-n1 so the gap matches the one between them. */
.country-trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    margin-inline-start: .75rem;
    padding: 0 .85rem;
    border: 1px solid #d7dde2;
    border-radius: .75rem;
    background: #f7f6ff;
    color: #33354d;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
.country-trigger:hover,
.country-trigger:focus-visible { border-color: #8c7dee; color: #33354d; }
/* flagcdn's 40x30 images are waving flags with a transparent background,
   so they get no frame. */
.country-flag,
.country-switcher .country-option img {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    object-fit: contain;
}
.country-trigger .country-globe { font-size: 1.1rem; color: #8c7dee; }
.country-trigger-text { white-space: nowrap; }
.country-trigger-separator { color: #9397ad; margin: 0 .1rem; }

/* The purged theme CSS has no .modal-xl / .modal-fullscreen-* / scrollable
   variants, so the dialog's size and scrolling are defined here. */
.country-switcher .modal-dialog { width: calc(100% - 2rem); max-width: 1140px; margin: 1.75rem auto; }
.country-switcher .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
}
/* The theme pulls .modal-body out with negative side margins and gives
   .btn-close negative margins; both are reset so the title, the close
   button, the search field and the footer share the same edges. */
.country-switcher .modal-body { margin: 0; overflow-y: auto; }
.country-switcher .btn-close { margin: 0; margin-inline-start: auto; padding: 0; }
.country-switcher .modal-header { padding: 1.25rem 1.75rem; border-bottom: 0; }
.country-switcher .modal-body { padding: 0 1.75rem 1.25rem; }
.country-switcher .modal-footer { padding: .75rem 1.75rem; border-top: 1px solid #eef0f3; justify-content: flex-start; }
.country-switcher .country-search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: .5rem;
    border-radius: .75rem;
    background-color: #fff;
    box-shadow: 0 0 0 .5rem #fff;
}
.country-switcher .country-region-title {
    margin: 1.25rem 0 .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eef0f3;
    color: #8c7dee;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.country-switcher .country-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .125rem 1.25rem;
    margin: 0;
}
.country-switcher .country-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: .5rem;
    color: #33354d;
    font-size: .875rem;
    text-decoration: none;
}
.country-switcher .country-option:hover,
.country-switcher .country-option:focus-visible { background: #f1effe; color: #33354d; }
.country-switcher .country-option.active { background: #f1effe; font-weight: 600; }
.country-switcher .country-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-switcher .country-language { color: #9397ad; font-size: .7rem; font-weight: 500; }
.country-switcher .country-currency { margin-inline-start: auto; padding-inline-start: .5rem; color: #576071; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.country-switcher .country-other { width: 100%; }
.country-switcher .country-other .ai-globe { font-size: 1.1rem; color: #8c7dee; }
.country-switcher .country-empty { margin: 1.5rem 0; color: #576071; text-align: center; }

@media (max-width: 991.98px) {
    .country-switcher .modal-dialog { width: 100vw; max-width: none; height: 100%; margin: 0; }
    .country-switcher .modal-content { height: 100%; max-height: none; border-radius: 0; }
    .country-switcher .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .country-trigger { min-height: 36px; margin-inline-start: .5rem; padding: 0 .55rem; }
    .country-switcher .modal-header,
    .country-switcher .modal-footer { padding-inline: 1rem; }
    .country-switcher .modal-body { padding: 0 1rem 1rem; }
    .country-switcher .country-grid { grid-template-columns: minmax(0, 1fr); }
}