/*--------------------------------------------------------------
# Country Selector — Dropdown
#
# Styled <select> dropdown integrated into the event filter bar.
# On desktop (≥768px): compact field inside the filter grid row.
# On mobile (<768px): full-width dropdown above the accordion toggle.
# Matches the TicketSystem Tango Noir Material-dark design.
--------------------------------------------------------------*/

/* ── Container ── */
.tev-country-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 20px;
    margin-bottom: 4px;
    animation: tev-country-fade-in 0.4s ease-out both;
}

/* Section label */
.tev-country-selector__label {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ts-mediumgrey-text);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tev-country-selector:focus-within .tev-country-selector__label {
    color: var(--md-sys-color-primary, var(--ts-gold));
}

/* ── Dropdown wrapper (holds the select + flag preview) ── */
.tev-country-selector__field {
    position: relative;
    flex: 0 1 280px;
    min-width: 200px;
    max-width: 340px;
}

/* ── The <select> itself ── */
.tev-country-selector__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline, var(--ts-border-color));
    border-radius: var(--ts-radius);
    color: var(--ts-lightgrey);
    padding: 12px 44px 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    line-height: 1.3;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        border-width 0.15s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
    box-shadow: none;
}

.tev-country-selector__select option {
    background-color: var(--ts-surface-8, #303030);
    color: var(--ts-lightgrey);
    padding: 8px 12px;
    font-size: 0.95rem;
}

/* Focus → Gold outlined 2px */
.tev-country-selector__select:focus {
    border: 2px solid var(--md-sys-color-primary, var(--ts-gold));
    padding: 11px 43px 11px 15px; /* compensate 1px extra border */
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

/* Hover */
.tev-country-selector__select:hover {
    border-color: var(--ts-gold);
}

/* ── Custom dropdown arrow ── */
.tev-country-selector__field::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ts-gold);
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.tev-country-selector__field:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

/* ── Auto-detected indicator ── */
.tev-country-selector__detected {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ts-gold);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tev-country-selector__detected.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateX(0);
}

.tev-country-selector__detected-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ts-gold);
    flex-shrink: 0;
}

/* ── Entrance Animation ── */
@keyframes tev-country-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Desktop Integration — Country selector inside the filter grid
   ==========================================================================

   STRATEGY
   --------
   The multiselect buttons (Categorías, Ubicación) render as <button> elements
   which get their gold look from theme-core.css's ultra-high-specificity global
   button reset (7 × :not() = specificity 0,7,1).

   The country selector is a native <select>, so it misses that rule. We
   explicitly apply the same gold palette and dimensions here.

   The filter fields (Categorías, Ubicación) are wrapped in <label> elements
   which get an implicit `margin-bottom: 4px` from theme-core's global label
   style. Our container is a <div>, so we add the same margin for alignment
   since the grid row uses `align-items: flex-end`.
   ========================================================================== */

@media (min-width: 768px) {

    /* ── Container reset ──
       Filter fields (<label class="tc-event-filter__field">) are 90.2px tall:
         label (19.2px) + margin-bottom (8px) + button (56px) + margin-bottom (4px from theme-core label rule) = ~87.2px
         (actual measured: 90.2px due to gap/intrinsic spacing)
       We must match this total height for label alignment.
       90.2px = label (19.2px) + margin-bottom (8px) + select (56px) + container-margin (4px)
    */
    .tev-country-selector.tev-country-selector--inline {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;            /* Match <label class="tc-event-filter__field"> flex gap */
        padding: 0;
        margin: 0 0 4px;    /* Match <label> implicit margin from theme-core */
        animation: none;
        order: -1;           /* First in the grid row */
    }

    /* ── Label — matches plugin-overrides.css .tc-event-filter__label ──
       Live computed: fontSize=12px, margin=0 0 8px, height=19.2px */
    .tev-country-selector--inline .tev-country-selector__label {
        display: block;
        margin: 0 0 8px;
        font-size: 0.75rem;  /* 12px — matches live filter labels */
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ts-mediumgrey-text);
    }

    /* ── Field wrapper fills grid column ── */
    .tev-country-selector--inline .tev-country-selector__field {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: 100%;
        margin-top: 1px;    /* Match multiselect button's margin-top: 1px */
    }

    /* ── Select — gold, matching the ACTUAL live multiselect button ──
       Live computed values from the <button> elements:
         height: 56px, borderRadius: 8px, fontSize: 15.2px (0.95rem),
         padding: 12px 32px, fontWeight: 600, letterSpacing: 1px,
         textTransform: uppercase, bg: rgb(198, 166, 100)
    */
    .tev-country-selector--inline .tev-country-selector__select {
        width: 100%;
        height: 56px !important;     /* Exact match to multiselect button */
        background-color: var(--ts-gold, #C6A664) !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 8px !important; /* Match live button rounding */
        color: var(--ts-black, #121212) !important;
        padding: 12px 44px 12px 16px !important;
        font-size: 0.95rem;           /* 15.2px — match live buttons */
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        box-shadow: var(--ts-shadow-1, 0 1px 3px rgba(0,0,0,0.3));
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .tev-country-selector--inline .tev-country-selector__select option {
        background-color: var(--ts-surface-8, #2c2c2c);
        color: var(--ts-lightgrey, #e0e0e0);
        text-transform: none;
        letter-spacing: normal;
    }

    .tev-country-selector--inline .tev-country-selector__select:hover {
        background-color: #E8C37E !important;
        box-shadow: var(--ts-shadow-2, 0 3px 6px rgba(0,0,0,0.3));
        transform: translateY(-2px);
    }

    .tev-country-selector--inline .tev-country-selector__select:focus {
        background-color: var(--ts-gold, #C6A664) !important;
        border: none !important;
        padding: 12px 44px 12px 16px !important;
        box-shadow: 0 0 0 4px rgba(198, 166, 100, 0.4);
        outline: none;
    }

    /* Dropdown arrow — dark on gold background */
    .tev-country-selector--inline .tev-country-selector__field::after {
        border-top-color: var(--ts-black, #121212);
    }

    /* Detected badge — hidden on desktop inline to save vertical space */
    .tev-country-selector--inline .tev-country-selector__detected {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile Adjustments — Full-width above the accordion toggle
   ========================================================================== */

@media (max-width: 767px) {
    .tev-country-selector {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 0 16px;
    }

    .tev-country-selector__field {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .tev-country-selector__select {
        padding: 10px 40px 10px 14px;
        font-size: 0.9rem;
    }

    .tev-country-selector__select:focus {
        padding: 9px 39px 9px 13px;
    }

    .tev-country-selector__label {
        font-size: 0.7rem;
    }

    .tev-country-selector__detected {
        font-size: 0.68rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .tev-country-selector {
        animation: none;
    }

    .tev-country-selector__detected {
        transition-duration: 0.01s;
    }
}