/* ============================================================
   shared.css — STATE-ONLY (nie LAYOUT)
   Reguły: 1) tylko stany interaktywne; layout w compiled.css/inline
           2) wyłącznie selektory klas (.js-*)
           3) .bg-video BEZ position/width/height (sizing inline w helperze)
   ============================================================ */

/* ============================================================
   REBRANDING: granat (główny) + czerwień (akcent)
   Nadpisuje oryginalny niebieski #3B82F6: tła -> granat, tekst/obramowania -> czerwień.
   ============================================================ */
:root {
    --wh-navy: #15315E;
    --wh-navy-dark: #0E2342;
    --wh-red: #D21F3C;
    --wh-red-dark: #B0182F;
}
/* Tła niebieskie -> granat */
.bg-\[\#3B82F6\] { background-color: var(--wh-navy) !important; }
.bg-\[\#3B82F6\]\/10 { background-color: color-mix(in srgb, var(--wh-navy) 10%, transparent) !important; }
.bg-\[\#3B82F6\]\/20 { background-color: color-mix(in srgb, var(--wh-navy) 20%, transparent) !important; }
.hover\:bg-\[\#3B82F6\]:hover { background-color: var(--wh-navy) !important; }
.hover\:bg-\[\#2563EB\]:hover { background-color: var(--wh-navy-dark) !important; }
.hover\:bg-\[\#2563eb\]:hover { background-color: var(--wh-navy-dark) !important; }
.hover\:bg-blue-600:hover { background-color: var(--wh-navy-dark) !important; }
.border-blue-500 { border-color: var(--wh-navy) !important; }
/* Akcenty tekstu/obramowań niebieskie -> czerwień (czytelne na jasnym i ciemnym) */
.text-\[\#3B82F6\] { color: var(--wh-red) !important; }
.hover\:text-\[\#3B82F6\]:hover { color: var(--wh-red) !important; }
.group-hover\:text-\[\#3B82F6\]:is(:where(.group):hover *) { color: var(--wh-red) !important; }
.selection\:text-\[\#3B82F6\] ::selection,
.selection\:text-\[\#3B82F6\]::selection { color: var(--wh-red) !important; }
.border-\[\#3B82F6\] { border-color: var(--wh-red) !important; }

/* Przyciski rezerwacji -> czerwień (poza kontenerami-linkami .wh-wrap) */
a[href^="https://rezerwacja.warsawhostelcentrum"]:not(.wh-wrap) {
    background-color: var(--wh-red) !important;
    color: #fff !important;
    border-color: var(--wh-red) !important;
}
a[href^="https://rezerwacja.warsawhostelcentrum"]:not(.wh-wrap):hover {
    background-color: var(--wh-navy) !important;
}
/* Sekcja „pokoje" (tło -> granat): ciemny tekst zamieniamy na jasny (poza białym filtrem) */
#rooms .text-gray-900:not(.js-room-filter) { color: #fff !important; }
#rooms .text-gray-800 { color: rgba(255,255,255,.92) !important; }
/* Ikony w granatowych kółkach/kwadratach -> białe (czytelność) */
.bg-\[\#3B82F6\] svg.text-gray-900,
.bg-\[\#3B82F6\].text-gray-900 svg { color: #fff !important; }

/* Helpery akcentu czerwonego */
.wh-cta-red { background-color: var(--wh-red) !important; color: #fff !important; }
.wh-cta-red:hover { background-color: var(--wh-navy) !important; }
.wh-icon-red { background-color: var(--wh-red) !important; color: #fff !important; }
.wh-underline-red { background-color: var(--wh-red) !important; }

/* ====== Accordion (FAQ) ====== */
.js-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
}

/* ====== Body scroll lock ====== */
body.mobile-menu-open,
body.modal-open { overflow: hidden; }

/* ====== Hero slideshow (jeśli użyte) ====== */
.js-hero-slide {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.js-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ====== Modal (WhatsApp / Location / Booking panel / Lightbox) ====== */
.js-modal { display: none; }
.js-modal.is-open { display: flex; }

/* Panel wysuwany z prawej (booking) — animacja przy otwarciu. Animation odpala
   się przy zmianie display (inaczej niż transition), więc slide działa za każdym razem. */
@keyframes wh-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
.js-modal.is-open .js-slide-panel { animation: wh-slide-in-right 0.35s ease both; }

/* ====== Mobile menu overlay ====== */
.js-mobile-menu { display: none; }
.js-mobile-menu.is-open { display: flex; }

/* ====== Tabs ====== */
.js-tab-content { display: none; }
.js-tab-content.is-active { display: block; }

/* ====== Back to top ====== */
.js-back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.js-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Header scroll ====== */
.js-scroll-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* ====== Sticky panel collapse ====== */
.js-sticky-panel { transition: transform 0.3s ease; }
.js-sticky-panel.is-collapsed { transform: translateX(calc(100% - 40px)); }

/* ====== Marquee (motion x infinite -> CSS) ====== */
@keyframes wh-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.js-marquee-track {
    display: flex;
    min-width: max-content;
    animation: wh-marquee 20s linear infinite;
}

/* ====== iframe responsive ====== */
iframe:not(.bg-video):not([data-bg-video]) { max-width: 100%; }

/* ====== .bg-video FIX ======
   object-fit NIE DZIAŁA na iframe.
   Sizing wstawiany inline przez theme_youtube_embed(bg=true).
   Tu TYLKO border + interactivity blocking. */
.bg-video, [data-bg-video] {
    border: 0;
    pointer-events: none;
}

/* ====== Logo ====== */
.site-logo { width: auto; display: block; }
/* Header na stronie głównej: nad ciemnym hero logo białe; po przewinięciu (białe tło) — oryginalne */
body.home .js-scroll-header:not(.is-scrolled) .site-logo { filter: brightness(0) invert(1); }
/* Ciemne tła (stopka) — logo białe */
.site-logo--light { filter: brightness(0) invert(1); }

/* ====== Icon SVG ====== */
.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ====== Slider slides (lightbox: instant swap) ====== */
.js-slider-slide { display: none; }
.js-slider-slide.is-active { display: flex; }

/* Kropki slidera — kolor sterowany klasą .is-active (JS), nie wypalonymi klasami */
.js-slider-dot { background-color: #d1d5db; transition: background-color .3s ease, transform .3s ease, width .3s ease; }
.js-slider-dot:hover { background-color: #9ca3af; }
.js-slider-dot.is-active { background-color: #003580; transform: scale(1.25); }
/* wariant niebieski (opinie na stronie pokoju): aktywna kropka szersza, bez skalowania */
.js-slider-dot--blue { width: 0.5rem; }
.js-slider-dot--blue.is-active { background-color: #3B82F6; transform: none; width: 1rem; }

/* ====== Fade slider (opinie / recenzje pokoju) — płynny crossfade ======
   Wszystkie slajdy stackowane w jednej komórce grid; przełączanie przez opacity. */
.js-slider-fade { display: grid; }
.js-slider-fade > .js-slider-slide {
    grid-area: 1 / 1;
    display: flex;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.js-slider-fade > .js-slider-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Navbar scroll state (App.tsx 445-512: scrolled swap) ====== */
.js-scroll-header.is-scrolled {
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
@media (min-width: 768px) {
    .js-scroll-header.is-scrolled { padding-top: .75rem; padding-bottom: .75rem; }
}
.js-scroll-header.is-scrolled .nav-dot { color: var(--wh-red); }
.js-scroll-header .nav-link:hover { color: #fff; }
.js-scroll-header.is-scrolled .nav-link:hover { color: var(--wh-red); }
.js-scroll-header.is-scrolled .nav-underline { background-color: var(--wh-red); }
.js-scroll-header.is-scrolled .nav-lang { color: #111827; }
.js-scroll-header.is-scrolled .nav-cta { background-color: var(--wh-red); color: #fff; }
.js-scroll-header.is-scrolled .nav-cta:hover { background-color: var(--wh-navy); }
/* Na samej górze strony głównej (nad ciemnym hero) — elementy menu białe */
body.home .js-scroll-header:not(.is-scrolled) .nav-link,
body.home .js-scroll-header:not(.is-scrolled) .nav-lang { color: #fff !important; }

/* ====== Accordion chevron (FAQ: open -> bg blue, white, rotate-180) ====== */
.js-accordion-trigger[aria-expanded="true"] .acc-chevron {
    transform: rotate(180deg);
    background-color: #3B82F6;
    color: #fff;
}

/* ====== Hamburger icon swap (Menu <-> X) ====== */
body.mobile-menu-open .js-icon-menu { display: none; }
body.mobile-menu-open .js-icon-close { display: inline-block; }

/* ====== Pływający przycisk „Book Direct & Save" ====== */
.js-book-direct { opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.js-book-direct.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ====== Filtr pokoi (Dormitoria / Prywatne) ====== */
.js-room-filter:hover { background-color: #111827; color: #fff; }
.js-room-filter.is-active { background-color: #111827; color: #fff; }

/* ====== Language dropdown ====== */
.js-dropdown-menu { display: none; }
.js-dropdown.is-open .js-dropdown-menu { display: block; }
.js-dropdown.is-open .js-dropdown-caret { transform: rotate(180deg); }

/* ====== Group inquiry form (#groups) — paleta strony ====== */
.wh-group-form .wh-field-label {
    display: block;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.wh-group-form input[type="text"],
.wh-group-form input[type="email"],
.wh-group-form input[type="tel"],
.wh-group-form input[type="number"],
.wh-group-form textarea {
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wh-group-form input::placeholder,
.wh-group-form textarea::placeholder { color: #9ca3af; }
.wh-group-form input:focus,
.wh-group-form textarea:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #fff;
}
.wh-group-form .wh-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: #111827;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wh-group-form .wh-checkbox:hover { border-color: #3B82F6; }
.wh-group-form .wh-checkbox input {
    width: 1.15rem; height: 1.15rem;
    accent-color: #3B82F6; cursor: pointer; flex-shrink: 0;
}
.wh-group-form .wh-checkbox:has(input:checked) { border-color: #3B82F6; background: #eff6ff; }
.wh-group-form .wh-hint { font-size: 0.85rem; color: #6b7280; margin-top: 0.4rem; }
.wh-group-form .wh-submit {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    background: #3B82F6; color: #fff;
    font-weight: 700; font-size: 1.15rem;
    padding: 1rem 1.5rem; border: 0; border-radius: 0.85rem;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}
.wh-group-form .wh-submit:hover { background: #2563eb; transform: translateY(-1px); }
.wh-group-form .wh-success { display: none; }
.wh-group-form.is-sent .wh-success { display: block; }

/* ====== CF7 wewnątrz .wh-group-form ====== */
.wh-group-form .wpcf7-form-control-wrap { display: block; }
.wh-group-form .wpcf7-checkbox { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .wh-group-form .wpcf7-checkbox { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.wh-group-form .wpcf7-list-item { margin: 0; }
.wh-group-form .wpcf7-list-item label {
    display: flex; align-items: center; gap: 0.6rem; margin: 0;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 0.75rem 1rem; cursor: pointer; font-weight: 500; color: #111827;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wh-group-form .wpcf7-list-item label:hover { border-color: #3B82F6; }
.wh-group-form .wpcf7-list-item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: #3B82F6; flex-shrink: 0; }
.wh-group-form input.wh-submit { width: 100%; -webkit-appearance: none; appearance: none; }
.wh-group-form .wpcf7-not-valid-tip { color: #dc2626; font-size: 0.8rem; margin-top: 0.3rem; font-weight: 500; }
.wh-group-form .wpcf7-response-output { margin: 1rem 0 0 !important; border-radius: 0.6rem; font-weight: 500; }
.wh-group-form .wpcf7-spinner { margin: 0.5rem auto 0; display: block; }