/* ==========================================================================
   TEC Date Shortcodes — Selector de zona horaria
   Estilos neutros, customizables via CSS custom properties.
   ========================================================================== */

.tec-ds-selector {
    --tec-ds-font-size:        0.9em;
    --tec-ds-radius:           4px;
    --tec-ds-border:           1px solid #ccc;
    --tec-ds-bg:               #fff;
    --tec-ds-bg-hover:         #f0f0f0;
    --tec-ds-bg-selected:      #e8f0fe;
    --tec-ds-color:            #333;
    --tec-ds-color-group:      #888;
    --tec-ds-shadow:           0 4px 12px rgba(0,0,0,.12);
    --tec-ds-dropdown-width:   260px;
    --tec-ds-dropdown-max-height: 280px;
    --tec-ds-z-index:          999;

    position: relative;
    display: inline-block;
    font-size: var(--tec-ds-font-size);
}

/* Trigger (botón) */
.tec-ds-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--tec-ds-bg);
    border: var(--tec-ds-border);
    border-radius: var(--tec-ds-radius);
    color: var(--tec-ds-color);
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s;
    white-space: nowrap;
}

.tec-ds-trigger:hover,
.tec-ds-trigger:focus {
    border-color: #888;
    outline: none;
}

.tec-ds-trigger[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.tec-ds-arrow {
    font-size: 0.8em;
    line-height: 1;
    transition: transform .15s;
}

.tec-ds-trigger[aria-expanded="true"] .tec-ds-arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.tec-ds-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tec-ds-z-index);
    width: var(--tec-ds-dropdown-width);
    background: var(--tec-ds-bg);
    border: var(--tec-ds-border);
    border-top: none;
    border-radius: 0 var(--tec-ds-radius) var(--tec-ds-radius) var(--tec-ds-radius);
    box-shadow: var(--tec-ds-shadow);
    overflow: hidden;
}

.tec-ds-dropdown[hidden] {
    display: none;
}

/* Buscador */
.tec-ds-search-wrap {
    padding: 8px;
    border-bottom: var(--tec-ds-border);
}

.tec-ds-search {
    width: 100%;
    padding: 5px 8px;
    border: var(--tec-ds-border);
    border-radius: var(--tec-ds-radius);
    font-size: inherit;
    font-family: inherit;
    color: var(--tec-ds-color);
    box-sizing: border-box;
    outline: none;
}

.tec-ds-search:focus {
    border-color: #888;
}

/* Lista */
.tec-ds-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: var(--tec-ds-dropdown-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Grupo label */
.tec-ds-optgroup-label {
    padding: 6px 10px 2px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--tec-ds-color-group);
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: none;
    user-select: none;
}

/* Opción */
.tec-ds-option {
    padding: 6px 14px;
    cursor: pointer;
    color: var(--tec-ds-color);
    transition: background .1s;
}

.tec-ds-option:hover,
.tec-ds-option.is-focused {
    background: var(--tec-ds-bg-hover);
}

.tec-ds-option.is-selected {
    background: var(--tec-ds-bg-selected);
    font-weight: 500;
}

/* Sin resultados */
.tec-ds-no-results {
    padding: 10px 14px;
    color: var(--tec-ds-color-group);
    font-style: italic;
    font-size: 0.9em;
}

/* Ocultar grupos vacíos durante búsqueda */
.tec-ds-optgroup-label.is-hidden,
.tec-ds-option.is-hidden {
    display: none;
}

/* Reset de estilos heredados del tema */
.tec-ds-trigger {
    border-color: #ccc !important;
    box-shadow: none !important;
    outline: none !important;
}

.tec-ds-trigger:hover,
.tec-ds-trigger:focus {
    border-color: #888 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Listado global de TEC */
.tec-ds-listado-display {
    display: none;
}

.tec-ds-listado-display.is-visible {
    display: block;
}

/* Cuando mostramos el clon convertido, ocultamos el bloque nativo de TEC */
.tribe-events-calendar-list__event-datetime-wrapper.tec-ds-hidden {
    display: none;
}

.tec-ds-selector--global {
    --tec-ds-dropdown-width: 280px;
}