/**
 * Savvy Signature Country Selector — v4.0.0
 * All rules use !important to prevent WordPress theme CSS from overriding them.
 *
 * v4 changes:
 *  • Trigger button is always a fixed 40×40 px circle — no text label visible.
 *  • .savvy-cs-switcher__text is visually hidden on ALL viewports (sr-only).
 *  • .savvy-cs-switcher__caret is removed from the button.
 *  • Dropdown still shows full country name.
 */

/* ═══════════════════════════════════════════════════════
   FIRST-VISIT POPUP OVERLAY
   ═══════════════════════════════════════════════════════ */

#savvy-cs-overlay {
    display:                 none !important;
    position:                fixed !important;
    top:                     0 !important;
    right:                   0 !important;
    bottom:                  0 !important;
    left:                    0 !important;
    background:              rgba(10, 20, 35, 0.82) !important;
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index:                 2147483647 !important;
    justify-content:         center !important;
    align-items:             center !important;
    padding:                 20px !important;
    box-sizing:              border-box !important;
    touch-action:            none !important;
    margin:                  0 !important;
    border:                  none !important;
    border-radius:           0 !important;
    float:                   none !important;
    clear:                   both !important;
    max-width:               none !important;
}

/* ═══════════════════════════════════════════════════════
   POPUP CARD
   ═══════════════════════════════════════════════════════ */

.savvy-cs-popup {
    background:    #ffffff !important;
    border-radius: 24px !important;
    padding:       48px 44px 44px !important;
    max-width:     440px !important;
    width:         100% !important;
    text-align:    center !important;
    box-shadow:    0 32px 64px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.12) !important;
    animation:     savvyPopupIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position:      relative !important;
    margin:        0 auto !important;
    float:         none !important;
    border:        none !important;
}

@keyframes savvyPopupIn {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.savvy-cs-globe-icon {
    width:           72px !important;
    height:          72px !important;
    margin:          0 auto 20px !important;
    background:      linear-gradient(135deg, #56B3C2 0%, #2E4E73 100%) !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    box-shadow:      0 8px 24px rgba(62, 108, 132, 0.35) !important;
    border:          none !important;
    padding:         0 !important;
}

.savvy-cs-globe-icon svg {
    width:  36px !important;
    height: 36px !important;
    color:  #fff !important;
    fill:   none !important;
}

.savvy-cs-popup h2 {
    font-size:      22px !important;
    font-weight:    700 !important;
    color:          #0f1f30 !important;
    margin:         0 0 8px !important;
    line-height:    1.3 !important;
    letter-spacing: -0.3px !important;
    padding:        0 !important;
    text-transform: none !important;
    border:         none !important;
    background:     none !important;
}

.savvy-cs-popup p {
    font-size:   14px !important;
    color:       #6b7280 !important;
    margin:      0 0 32px !important;
    line-height: 1.6 !important;
    padding:     0 !important;
    background:  none !important;
    border:      none !important;
}

.savvy-cs-buttons {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   12px !important;
    margin:                0 !important;
    padding:               0 !important;
    list-style:            none !important;
}

.savvy-cs-btn {
    display:          flex !important;
    flex-direction:   column !important;
    align-items:      center !important;
    gap:              10px !important;
    padding:          20px 16px !important;
    border:           1.5px solid #e8edf2 !important;
    border-radius:    16px !important;
    background:       #f8fafc !important;
    cursor:           pointer !important;
    outline:          none !important;
    width:            100% !important;
    box-sizing:       border-box !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action:     manipulation !important;
    position:         relative !important;
    overflow:         hidden !important;
    text-decoration:  none !important;
    text-align:       center !important;
    transition:       border-color 0.22s ease, background 0.22s ease,
                      transform 0.22s ease, box-shadow 0.22s ease !important;
    float:            none !important;
    margin:           0 !important;
    line-height:      1 !important;
}

.savvy-cs-btn:hover,
.savvy-cs-btn:focus-visible {
    border-color: #56B3C2 !important;
    background:   #fff !important;
    transform:    translateY(-3px) !important;
    box-shadow:   0 12px 28px rgba(86,179,194,0.22) !important;
}

.savvy-cs-btn:active {
    transform:  translateY(0px) !important;
    box-shadow: 0 4px 12px rgba(86,179,194,0.15) !important;
}

.savvy-cs-flag {
    font-size:   38px !important;
    line-height: 1 !important;
    position:    relative !important;
    z-index:     1 !important;
    display:     block !important;
    margin:      0 !important;
    padding:     0 !important;
    background:  none !important;
    border:      none !important;
}

.savvy-cs-country-name {
    font-size:      13px !important;
    font-weight:    600 !important;
    color:          #1f2937 !important;
    letter-spacing: 0.2px !important;
    position:       relative !important;
    z-index:        1 !important;
    display:        block !important;
    margin:         0 !important;
    padding:        0 !important;
    background:     none !important;
    border:         none !important;
    text-transform: none !important;
    text-decoration: none !important;
}

@media (max-width: 380px) {
    .savvy-cs-popup       { padding: 32px 20px 28px !important; border-radius: 20px !important; }
    .savvy-cs-buttons     { grid-template-columns: 1fr !important; }
    .savvy-cs-btn         { flex-direction: row !important; padding: 16px 20px !important; gap: 14px !important; }
    .savvy-cs-flag        { font-size: 28px !important; }
    .savvy-cs-country-name { font-size: 14px !important; }
}

@media (max-width: 600px) {
    .savvy-cs-popup { max-width: calc(100vw - 32px) !important; }
}


/* ═══════════════════════════════════════════════════════
   GLOBE TRIGGER BUTTON
   Fixed 40×40 px circle — shows ONLY flag/globe emoji.
   Country name is screen-reader only (visually hidden).
   ═══════════════════════════════════════════════════════ */

.savvy-cs-switcher {
    display:  inline-flex !important;
    position: relative !important;
    margin:   0 !important;
    padding:  0 !important;
    border:   none !important;
    background: none !important;
    float:    none !important;
}

#savvy-cs-switcher-btn {
    /* Fixed circle — same size on every viewport */
    display:                     inline-flex !important;
    align-items:                 center !important;
    justify-content:             center !important;
    width:                       40px !important;
    height:                      40px !important;
    min-width:                   40px !important;
    min-height:                  40px !important;
    padding:                     0 !important;
    gap:                         0 !important;

    background:                  rgba(46,78,115,0.07) !important;
    border:                      1.5px solid rgba(46,78,115,0.18) !important;
    border-radius:               50% !important;
    cursor:                      pointer !important;
    color:                       #1f2937 !important;
    outline:                     none !important;
    white-space:                 nowrap !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action:                manipulation !important;
    user-select:                 none !important;
    -webkit-user-select:         none !important;
    box-shadow:                  none !important;
    text-decoration:             none !important;
    transition:                  background 0.2s ease, border-color 0.2s ease,
                                 transform 0.15s ease, box-shadow 0.2s ease !important;
    margin:                      0 !important;
    float:                       none !important;
    position:                    relative !important;
    z-index:                     2 !important;
    -webkit-appearance:          none !important;
    appearance:                  none !important;
}

#savvy-cs-switcher-btn:hover {
    background:   rgba(46,78,115,0.12) !important;
    border-color: rgba(46,78,115,0.32) !important;
    box-shadow:   0 2px 10px rgba(46,78,115,0.1) !important;
}

#savvy-cs-switcher-btn:active {
    transform: scale(0.93) !important;
}

/* Mobile menu open state (white on dark header) */
.mobile-header.open #savvy-cs-switcher-btn {
    background:   rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.38) !important;
    color:        #fff !important;
}

.mobile-header.open #savvy-cs-switcher-btn:hover {
    background:   rgba(255,255,255,0.24) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* Flag / globe inside the button */
.savvy-cs-switcher__flag {
    font-size:   20px !important;
    line-height: 1 !important;
    display:     block !important;
    margin:      0 !important;
    padding:     0 !important;
    background:  none !important;
    border:      none !important;
}

/* Country name — visually hidden on ALL screen sizes, accessible to screen readers */
.savvy-cs-switcher__text {
    position:   absolute !important;
    width:      1px !important;
    height:     1px !important;
    padding:    0 !important;
    margin:     -1px !important;
    overflow:   hidden !important;
    clip:       rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:     0 !important;
}

/* Caret — hidden (button is icon-only) */
.savvy-cs-switcher__caret {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════
   PORTAL DROPDOWN  — appended to <body> by JS
   ═══════════════════════════════════════════════════════ */

#savvy-cs-dropdown-portal {
    position:        fixed !important;
    z-index:         2147483646 !important;
    min-width:       190px !important;
    background:      #ffffff !important;
    border-radius:   16px !important;
    border:          1px solid rgba(0,0,0,0.09) !important;
    box-shadow:      0 16px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06) !important;
    padding:         6px !important;
    overflow:        hidden !important;
    margin:          0 !important;
    float:           none !important;
    list-style:      none !important;

    opacity:         0 !important;
    visibility:      hidden !important;
    transform:       translateY(-8px) scale(0.97) !important;
    pointer-events:  none !important;
    transition:      opacity 0.2s ease, visibility 0.2s ease,
                     transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

#savvy-cs-dropdown-portal.savvy-open {
    opacity:        1 !important;
    visibility:     visible !important;
    transform:      translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

#savvy-cs-dropdown-portal ul {
    list-style:  none !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
}

#savvy-cs-dropdown-portal li {
    list-style:  none !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
}

#savvy-cs-dropdown-portal li + li {
    border-top: 1px solid #f3f4f6 !important;
}

.savvy-cs-dropdown-option {
    display:                     flex !important;
    align-items:                 center !important;
    gap:                         12px !important;
    width:                       100% !important;
    padding:                     11px 14px !important;
    background:                  transparent !important;
    border:                      none !important;
    border-radius:               10px !important;
    cursor:                      pointer !important;
    text-align:                  left !important;
    box-sizing:                  border-box !important;
    margin:                      0 !important;
    outline:                     none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action:                manipulation !important;
    user-select:                 none !important;
    -webkit-user-select:         none !important;
    -webkit-appearance:          none !important;
    appearance:                  none !important;
    transition:                  background 0.15s ease !important;
    text-decoration:             none !important;
    float:                       none !important;
    line-height:                 1 !important;
    box-shadow:                  none !important;
}

.savvy-cs-dropdown-option:hover,
.savvy-cs-dropdown-option:focus-visible {
    background: #f0f9fb !important;
}

.savvy-cs-dropdown-option:active {
    background: #e0f2f6 !important;
}

.savvy-dropdown-flag {
    font-size:       24px !important;
    line-height:     1 !important;
    flex-shrink:     0 !important;
    display:         block !important;
    margin:          0 !important;
    padding:         0 !important;
    background:      none !important;
    border:          none !important;
    width:           auto !important;
    height:          auto !important;
}

/* Country name is ALWAYS visible in the dropdown */
.savvy-dropdown-name {
    display:        block !important;
    font-size:      15px !important;
    font-weight:    600 !important;
    color:          #111827 !important;
    line-height:    1.2 !important;
    margin:         0 !important;
    padding:        0 !important;
    background:     none !important;
    border:         none !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: 0.1px !important;
}

.savvy-dropdown-sub {
    display: none !important;
}

.savvy-cs-dropdown-option.savvy-active {
    background: #f0fafb !important;
}

.savvy-cs-dropdown-option.savvy-active .savvy-dropdown-name {
    color: #2E4E73 !important;
}

.savvy-check {
    width:           20px !important;
    height:          20px !important;
    min-width:       20px !important;
    background:      linear-gradient(135deg, #56B3C2, #2E4E73) !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    margin-left:     auto !important;
    border:          none !important;
    padding:         0 !important;
    opacity:         0 !important;
    transform:       scale(0.5) !important;
    transition:      opacity 0.18s ease, transform 0.18s ease !important;
    box-shadow:      none !important;
}

.savvy-cs-dropdown-option.savvy-active .savvy-check {
    opacity:   1 !important;
    transform: scale(1) !important;
}

.savvy-check svg {
    width:   10px !important;
    height:  10px !important;
    display: block !important;
    fill:    none !important;
    stroke:  #ffffff !important;
    margin:  0 !important;
    padding: 0 !important;
}