/**
 * ================================================================
 * TOP COUNTRIES — IPHONE-STYLE EMOJI FLAGS
 * ================================================================
 * Premium country section with native Unicode emoji flags
 * Optimized for iPhone rendering with system emoji fonts
 * ================================================================
 */

/* ================================================================
   COUNTRY HEADER — IMPROVED LAYOUT & ALIGNMENT
   ================================================================ */

.bc-sb-country__header {
    display: grid !important;
    grid-template-columns: 24px 1fr auto 16px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: var(--sb-surface) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 120ms ease !important;
    border: none !important;
    font-family: inherit !important;
}

.bc-sb-country__header:hover {
    background: var(--sb-surface-2) !important;
}

.bc-sb-country__header:active {
    background: var(--sb-surface-3) !important;
    transition-duration: 50ms !important;
}

/* Active country state */
.bc-sb-country--active .bc-sb-country__header,
.bc-sb-country--expanded .bc-sb-country__header {
    background: var(--sb-surface-2) !important;
}

/* ================================================================
   COUNTRY FLAG EMOJI — NATIVE IPHONE RENDERING
   ================================================================ */

.bc-sb-country__icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Native emoji rendering */
    font-size: 20px !important;
    line-height: 1 !important;
    
    /* System emoji fonts (iPhone-native) */
    font-family: 
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI Emoji",
        "Apple Color Emoji",
        "Noto Color Emoji",
        sans-serif !important;
    
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Remove old flag image styles */
.bc-sb-flag {
    display: none !important;
}

/* ================================================================
   COUNTRY NAME — PREMIUM TYPOGRAPHY
   ================================================================ */

.bc-sb-country__name {
    flex: 1 !important;
    min-width: 0 !important;
    
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
    letter-spacing: 0.01em !important;
    
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    text-align: left !important;
}

.bc-sb-country--active .bc-sb-country__name {
    color: var(--sb-primary) !important;
}

/* ================================================================
   COUNTRY COUNT — RIGHT-ALIGNED BADGE
   ================================================================ */

.bc-sb-country__count {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    
    min-width: 32px !important;
    height: 22px !important;
    padding: 0 8px !important;
    
    background: var(--sb-surface-2) !important;
    border-radius: 11px !important;
    
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--sb-text-2) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    
    flex-shrink: 0 !important;
}

.bc-sb-country--active .bc-sb-country__count {
    background: var(--sb-primary-soft) !important;
    color: var(--sb-primary) !important;
}

/* ================================================================
   CHEVRON — SUBTLE DISCLOSURE INDICATOR
   ================================================================ */

.bc-sb-country__chevron {
    width: 14px !important;
    height: 14px !important;
    color: var(--sb-text-3) !important;
    flex-shrink: 0 !important;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bc-sb-country--expanded .bc-sb-country__chevron {
    transform: rotate(90deg) !important;
}

/* ================================================================
   MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 767px) {
    .bc-sb-country__header {
        height: 46px !important;
        padding: 0 14px !important;
        gap: 9px !important;
    }
    
    .bc-sb-country__icon {
        font-size: 19px !important;
    }
    
    .bc-sb-country__name {
        font-size: 13px !important;
    }
    
    .bc-sb-country__count {
        font-size: 11px !important;
        min-width: 28px !important;
        height: 20px !important;
        padding: 0 7px !important;
    }
    
    .bc-sb-country__chevron {
        width: 13px !important;
        height: 13px !important;
    }
}

/* ================================================================
   DESKTOP REFINEMENTS
   ================================================================ */

@media (min-width: 1024px) {
    .bc-sb-country__header {
        height: 42px !important;
    }
    
    .bc-sb-country__icon {
        font-size: 18px !important;
    }
}

/* ================================================================
   TOUCH TARGETS (iOS GUIDELINES)
   ================================================================ */

.bc-sb-country__header {
    /* Ensure minimum 44px touch target */
    min-height: 44px !important;
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.bc-sb-country__header:focus-visible {
    outline: 2px solid var(--sb-primary) !important;
    outline-offset: -2px !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .bc-sb-country__header {
        border-bottom: 1px solid var(--sb-border) !important;
    }
    
    .bc-sb-country__count {
        border: 1px solid var(--sb-border) !important;
    }
}

/* ================================================================
   DIVIDER IMPROVEMENTS
   ================================================================ */

.bc-sb-divider {
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--sb-text-3) !important;
    
    background: var(--sb-bg) !important;
    border-top: 1px solid rgba(255,255,255,.03) !important;
    border-bottom: 1px solid rgba(255,255,255,.03) !important;
}

/* ================================================================
   COUNTRY SECTION BORDERS
   ================================================================ */

.bc-sb-country {
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.bc-sb-country:last-child {
    border-bottom: none !important;
}

/* ================================================================
   PERFORMANCE
   ================================================================ */

.bc-sb-country__header {
    /* Prevent layout shift */
    contain: layout style !important;
}

.bc-sb-country__icon {
    /* GPU acceleration for emoji rendering */
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .bc-sb-country__header,
    .bc-sb-country__chevron {
        transition: none !important;
    }
    
    .bc-sb-country--expanded .bc-sb-country__chevron {
        transform: none !important;
    }
}