/*
    Delago: zakładki Polska / Hiszpania na stronie startowej (wariant B)
    Ładowane tylko na stronie głównej (inc/hiszpania.php).
*/

/* ------------------------------------------------------------------ */
/* Zakładki nad wyszukiwarką                                            */
/* Selektory z #slider .widgets, bo szablon bazowy styluje <button>     */
/* globalnie (obramowanie 2px, padding, font 15px).                     */

#slider .widgets .widget > .delago-es-tabs {
    display: flex;
    gap: 4px;
    align-self: flex-start;
    width: auto;
    margin: 0 0 0 2.4%; /* równo z polami wyszukiwarki (padding .asariplug_sengine) */
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    text-align: left;
    text-shadow: none;
}

#slider .widgets .delago-es-tabs > .delago-es-tab {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 6px 6px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: none;
    color: var(--color-text);
    background-color: var(--color-white);
    box-shadow: none;
    opacity: 0.92;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}

#slider .widgets .delago-es-tabs > .delago-es-tab:hover {
    color: var(--color-text);
    background-color: var(--color-white);
    opacity: 1;
}

#slider .widgets .delago-es-tabs > .delago-es-tab.is-active,
#slider .widgets .delago-es-tabs > .delago-es-tab.is-active:hover {
    color: var(--color-text-on-1, #ffffff);
    background-color: var(--color-1);
    opacity: 1;
}

#slider .widgets .delago-es-tabs > .delago-es-tab:focus {
    outline: none;
}

#slider .widgets .delago-es-tabs > .delago-es-tab:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.delago-es-flag {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 1px;
    background: linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%);
    box-shadow: 0 0 0 1px #00000022;
    flex: none;
}

.delago-es-new {
    padding: 3px 5px 2px;
    border-radius: 2px;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #ffffff;
    background-color: var(--color-1);
}

#slider .widgets .delago-es-tabs > .delago-es-tab.is-active .delago-es-new {
    color: var(--color-1);
    background-color: #ffffff;
}

/* pasek wyszukiwarki pod zakładkami: prosty lewy górny róg */
#slider .widgets .widget > .delago-es-tabs + .asariplug_sengine {
    border-top-left-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Hiszpański film w tle                                                */

/* Start strony w trybie Hiszpania (klasa z inline skryptu w <head>):
   polski film ukryty od pierwszej klatki, w tle plakat hiszpański. */
html.delago-es-boot #slider {
    background: #000000 var(--delago-es-poster) center / cover no-repeat;
}

html.delago-es-boot #slider > ul._slider {
    visibility: hidden;
}

.delago-es-media {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000000 var(--delago-es-poster) center / cover no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

#slider.delago-es .delago-es-media {
    opacity: 1;
}

.delago-es-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* film pokazywany dopiero, gdy naprawdę gra (wcześniej plakat) */
.delago-es-media.is-playing video {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .delago-es-media,
    .delago-es-media video {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Wyszukiwarka w trybie Hiszpania                                      */

.delago-es-locbox .asariplug_sengine_locAuto_input,
.delago-es-locbox .asariplug_sengine_locaAuto_proposed,
.delago-es-locbox .asariplug_sengine_locaAuto_selected,
.delago-es-locbox .f_location_locality_mapTrigger,
.delago-es-locbox .f_location_locality_mapSelected {
    display: none !important;
}

.delago-es-region {
    position: relative;
}

.delago-es-region::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-text-a, #00000080);
    transform: translateY(-50%);
    pointer-events: none;
}

.delago-es-region-select {
    padding-right: 32px !important;
    cursor: pointer;
}

.delago-es-region-static {
    font-weight: 600;
    cursor: default;
}

.delago-es-hidden {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Plakietka "Nowość" (link do podstrony Hiszpania)                     */

.delago-es-ribbon {
    position: absolute;
    top: 200px;
    right: 0;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--color-1);
    box-shadow: 0 6px 20px -8px #000000;
    transition: opacity 0.3s, transform 0.3s;
}

.delago-es-ribbon:hover,
.delago-es-ribbon:focus {
    color: #ffffff;
    transform: translateX(-4px);
}

#slider.delago-es .delago-es-ribbon {
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Telefon                                                              */

@media (max-width: 767px) {

    #slider .widgets .widget > .delago-es-tabs {
        width: 100%;
        margin-left: 0;
        gap: 3px;
    }

    #slider .widgets .delago-es-tabs > .delago-es-tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 14px 8px;
        font-size: 12px;
    }

    .delago-es-ribbon {
        top: auto;
        bottom: 72px;
        padding: 9px 12px 9px 10px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }
}