/* [Relax.cy]: Motyw główny — SUN/MOON na Cyprze, zmienne i komponenty | assets/css/relax.css | v.6.1 */
/* v6.1 (2026-07-21): --bs-success-rgb / --bs-danger-rgb na paletę wyspy — utilities
   .text-success/.text-danger i badge .text-bg-* przestają świecić fabrycznymi kolorami
   (ptaszki Udogodnień = oliwka, krzyżyki Ograniczeń = terakota) */
/* v6.0 (2026-07-21): kropki-ziarna także na hero PRZEWODNIKÓW (artykuł + landing) —
   krótszy raster 16 rzędów (--guide-dots-img/pos), kierunek SUN/MOON jak w hero głównym */
/* v5.9 (2026-07-21): raster kropek PRZEPROJEKTOWANY (uwaga Daniela) — rząd po rzędzie:
   każdy kolejny rząd ma mniejsze i bardziej przezroczyste kropki, aż zanikają ok. połowy
   wysokości (SUN od dołu, MOON od góry); zamiast jednolitego rastra z maską */
/* v5.8 (2026-07-21): .guest-photo-thumb/.guest-photo-caption — galeria "Zdjęcia od
   gospodarza" w portalu gościa (kadr 4:3, podpis pod fotką) */
/* v5.7 (2026-07-21): belka admina w dzień PRZEPROJEKTOWANA — "morze spotyka plażę"
   (głęboki teal pod logo -> jasna woda -> piasek pod menu; złoto loga gra na morzu,
   bez plakietki); .booking-note — wyróżniona notka "jeszcze nie płacisz" na booking */
/* v5.6 (2026-07-21): .guest-map-embed — mini-mapa dojazdu w portalu gościa */
/* v5.5 (2026-07-21): .promo-box — okienko kodu rabatowego na booking wyróżnione
   akcentem (ginęło wizualnie — uwaga Daniela); przycisk Zastosuj = .btn-relax */
/* v5.4 (2026-07-21, moje_ToDo): treść Amenities/Location czcionką menu (font-accent);
   .apt-size (metraż przy nazwie apartamentu); dolny paseczek aktywnej strony tylko
   na desktopie (na mobile rozciągał się na całą szerokość rozwiniętego menu) */
/* v5.3 (2026-07-15): aktywna strona = 2 paseczki jasnego złota (górny 90%, dolny 70%); krawędź belki wróciła do oryginału */
/* v4.9 (2026-07-15): kalendarz 18 mies. z "Show more", separator "|" czarny, podkreślenie aktywnej strony w menu */
/* v4.8 (2026-07-15): złota cena przy miesiącu (.cal-month-price); bez "from" u góry panelu */
/* v4.6 (2026-07-15): pastelowe pills apartamentu (złoto=fakty, zieleń=jest, błękit=brak) */
/* v4.5 (2026-07-15): kropka języka CZERWONA #e5484d (decyzja Daniela) */
/* v4.4 (2026-07-15): pulsująca kropka przełącznika języka (index, goście bez cookie) */
/* v4.3 (2026-07-15): złota ramka miniaturek galerii apartamentu (spójnie z blogiem) */
/* v4.2 (2026-07-15): galeria apartamentu klikalna (kursor+hover miniaturek; popup = guide-gallery-*) */
/* v2.9 (2026-07-14): zestaw fontów Daniela — Julius Sans One (duże tytuły),
   Saira Stencil One (menu/stopka/ramki), Merienda (treść), Dancing Script (cytaty);
   EL/UK: zamienniki z greką/cyrylicą (Jura/Play/Comfortaa + Caveat/GFS Didot). */
/* v2.7 (2026-07-13, Guides 2.0): publiczny blog przewodników — hero artykułu, karty,
   chipy kategorii/tagów, sidebar, galeria foto/video, treść Quill, edytor w panelu. */
/* v2.6 (2026-07-11): czat gość↔host (dymki --chat-*) + okładki przewodników (.guide-cover). */
/* v2.0 (2026-07-10): paleta ZŁOTA (color-hex 2799: a67c00/bf9b30/ffbf00/ffcf40/ffdc73)
   jako główny akcent (SUN: radość+ekskluzywność; MOON: złoto latarni na aksamitnej nocy).
   v2.2 (finalne, decyzja Daniela): focus pól — SUN: main gold #ffbf00; MOON: jasny
   ametyst #b6a3f2 (aksamit nocy, rym z lawendą PROMO). Bez niebieskości Bootstrapa.  */
/* Jedyne źródło kolorów/stylów projektu. NIE dodajemy stylów inline w HTML/PHP.            */
/* Koncepcja: LIGHT = cypryjski dzień (piasek, słońce, morze), DARK = noc na rajskiej       */
/* wyspie (granat nieba, księżycowy teal, bursztyn latarni). Harmonia komplementarna       */
/* burnt orange <-> teal (wg opracowań artincontext.org). Przełączanie: [data-bs-theme].   */

/* ==========================================================================
   1. ZMIENNE — LIGHT (dzień): sand / sun / sea
   ========================================================================== */
:root {
    /* Layout: przyklejone belki */
    --nav-height: 64px;
    --footerbar-height: 46px;

    /* Fonty (zestaw Daniela 2026-07-14, rewizja 2: Roboto Condensed zamiast Saira
       Stencil, Playwrite US Modern w cytatach — wybór po testach czytelności):
       display = duże tytuły, accent = menu/stopka/ramki (pełne alfabety!),
       body = treść, script = cytaty i zajawki z paskiem. EL/UK nadpisują niżej. */
    --font-display: "Julius Sans One", "Jura", sans-serif;
    --font-accent: "Roboto Condensed", sans-serif;
    --font-body: "Merienda", "Comfortaa", system-ui, sans-serif;
    --font-script: "Playwrite US Modern", "Caveat", cursive;

    /* Paleta dnia */
    --relax-bg: #faf4e8;            /* piasek wybielony słońcem */
    --relax-surface: #fffdf6;       /* karty, panele */
    --relax-text: #3a342b;          /* ciepły espresso-brąz */
    --relax-muted: #857a67;         /* wyblakły taupe */
    --relax-border: #e7dcc6;        /* krawędzie w tonie piasku */

    --relax-primary: #0e7490;       /* morski teal (nawiązanie do fali w logo) */
    --relax-primary-hover: #155e75;
    --relax-primary-rgb: 14, 116, 144;
    --relax-accent: #a67c00;        /* GŁÓWNY AKCENT: głębokie złoto (paleta 2799) */
    --relax-accent-hover: #8a6700;
    --relax-gold: #bf9b30;          /* stare złoto — tinty, alerty */

    /* Focus pól w dzień: MAIN GOLD #ffbf00 (paleta 2799) — decyzja Daniela 2026-07-10;
       nocą kontrastowo ametyst (patrz blok MOON) */
    --focus-accent: #ffbf00;
    --focus-accent-rgb: 255, 191, 0;

    /* Kolory semantyczne (dopasowane do palety — zamiast bootstrapowych) */
    --relax-success: #5d7f3b;       /* zieleń oliwna */
    --relax-danger: #b34a2e;        /* terakota */
    /* Utilities Bootstrapa (.text-success/.text-danger, .text-bg-*) na naszą paletę —
       bez tego ptaszki/krzyżyki świeciły fabryczną zielenią i czerwienią (2026-07-21) */
    --bs-success-rgb: 93, 127, 59;
    --bs-danger-rgb: 179, 74, 46;
    --relax-warning: #a67c00;       /* głębokie złoto (czytelne na piasku) */

    /* Główny przycisk (CTA) = SŁOŃCE W ZENICIE: jasne złoto -> bursztyn, ciemny tekst */
    --btn-main-from: #ffcf40;
    --btn-main-to: #e0a800;
    --btn-main-text: #3d2a00;
    --btn-main-shadow: rgba(191, 155, 48, 0.4);

    /* Przycisk morski (drugorzędny wypełniony) = teal */
    --btn-sea-text: #fff;

    /* Navbar i stopka (belki) */
    --nav-bg: rgba(255, 252, 244, 0.92);
    --nav-border: rgba(198, 86, 17, 0.35);
    --nav-link: #3a342b;
    --footerbar-bg: #2b2318;        /* ciemny driftwood */
    --footerbar-text: #d9cdb8;
    --footerbar-link: #ffcf40;      /* jasne złoto na ciemnej belce */

    /* Hero: wschód słońca nad zatoką (skośny) + odbicie morza + kropki-ziarna piasku */
    --hero-gradient: linear-gradient(118deg, #ffe9b3 0%, #ffc670 34%, #f08a45 68%, #d96a2f 100%);
    --hero-glow: radial-gradient(circle at 18% 12%, rgba(255, 248, 214, 0.9), transparent 32%),
                 radial-gradient(ellipse at 88% 92%, rgba(14, 116, 144, 0.22), transparent 55%);
    --hero-text: #4a2508;
    /* Kropki-ziarna (2026-07-21, przeprojektowane wg uwagi Daniela): NIE jednolity
       raster z maską, tylko rząd po rzędzie — każdy kolejny rząd ma MNIEJSZE
       i bardziej przezroczyste kropki, aż zanikają zupełnie ok. połowy wysokości.
       SUN = od dołu w górę (ziarna piasku), MOON = od góry w dół (gwiazdy).
       Kolor bazowy trzyma ogólną intensywność (alfa mnoży się z alfą rzędu);
       blend "difference" jak dotąd: kolor dopasowuje się do tła/zdjęcia pod spodem. */
    --hero-dot-base: rgba(14, 116, 144, 0.95);
    --hero-dots-blend: difference;
    --hero-dots-img:
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 48.0%, transparent) 1.7px, transparent 1.7px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 45.0%, transparent) 1.63px, transparent 1.63px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 42.0%, transparent) 1.57px, transparent 1.57px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 39.1%, transparent) 1.5px, transparent 1.5px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 36.3%, transparent) 1.44px, transparent 1.44px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 33.6%, transparent) 1.37px, transparent 1.37px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 30.9%, transparent) 1.31px, transparent 1.31px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 28.4%, transparent) 1.24px, transparent 1.24px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 25.9%, transparent) 1.18px, transparent 1.18px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 23.5%, transparent) 1.12px, transparent 1.12px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 21.2%, transparent) 1.06px, transparent 1.06px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 19.0%, transparent) 0.99px, transparent 0.99px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 16.9%, transparent) 0.93px, transparent 0.93px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 14.8%, transparent) 0.87px, transparent 0.87px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 12.9%, transparent) 0.81px, transparent 0.81px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 11.1%, transparent) 0.76px, transparent 0.76px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 9.4%, transparent) 0.7px, transparent 0.7px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 7.8%, transparent) 0.64px, transparent 0.64px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 6.3%, transparent) 0.59px, transparent 0.59px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 4.9%, transparent) 0.53px, transparent 0.53px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 3.7%, transparent) 0.48px, transparent 0.48px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 2.6%, transparent) 0.43px, transparent 0.43px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 1.6%, transparent) 0.38px, transparent 0.38px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.8%, transparent) 0.33px, transparent 0.33px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.3%, transparent) 0.29px, transparent 0.29px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.0%, transparent) 0.25px, transparent 0.25px);
    --hero-dots-pos:
        50% calc(100% - 0px), calc(50% + 4.5px) calc(100% - 9px), 50% calc(100% - 18px), calc(50% + 4.5px) calc(100% - 27px),
        50% calc(100% - 36px), calc(50% + 4.5px) calc(100% - 45px), 50% calc(100% - 54px), calc(50% + 4.5px) calc(100% - 63px),
        50% calc(100% - 72px), calc(50% + 4.5px) calc(100% - 81px), 50% calc(100% - 90px), calc(50% + 4.5px) calc(100% - 99px),
        50% calc(100% - 108px), calc(50% + 4.5px) calc(100% - 117px), 50% calc(100% - 126px), calc(50% + 4.5px) calc(100% - 135px),
        50% calc(100% - 144px), calc(50% + 4.5px) calc(100% - 153px), 50% calc(100% - 162px), calc(50% + 4.5px) calc(100% - 171px),
        50% calc(100% - 180px), calc(50% + 4.5px) calc(100% - 189px), 50% calc(100% - 198px), calc(50% + 4.5px) calc(100% - 207px),
        50% calc(100% - 216px), calc(50% + 4.5px) calc(100% - 225px);
    /* Hero przewodników (artykuł 300-400px, landing 340px) — ten sam ramp,
       krótszy raster (16 rzędów), żeby też zanikał ok. połowy kadru */
    --guide-dots-img:
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 48.0%, transparent) 1.7px, transparent 1.7px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 43.0%, transparent) 1.59px, transparent 1.59px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 38.2%, transparent) 1.48px, transparent 1.48px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 33.6%, transparent) 1.37px, transparent 1.37px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 29.2%, transparent) 1.26px, transparent 1.26px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 25.1%, transparent) 1.16px, transparent 1.16px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 21.2%, transparent) 1.06px, transparent 1.06px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 17.6%, transparent) 0.95px, transparent 0.95px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 14.2%, transparent) 0.85px, transparent 0.85px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 11.1%, transparent) 0.76px, transparent 0.76px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 8.3%, transparent) 0.66px, transparent 0.66px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 5.8%, transparent) 0.57px, transparent 0.57px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 3.7%, transparent) 0.48px, transparent 0.48px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 1.9%, transparent) 0.39px, transparent 0.39px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.6%, transparent) 0.31px, transparent 0.31px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.0%, transparent) 0.25px, transparent 0.25px);
    --guide-dots-pos:
        50% calc(100% - 0px), calc(50% + 4.5px) calc(100% - 9px), 50% calc(100% - 18px), calc(50% + 4.5px) calc(100% - 27px),
        50% calc(100% - 36px), calc(50% + 4.5px) calc(100% - 45px), 50% calc(100% - 54px), calc(50% + 4.5px) calc(100% - 63px),
        50% calc(100% - 72px), calc(50% + 4.5px) calc(100% - 81px), 50% calc(100% - 90px), calc(50% + 4.5px) calc(100% - 99px),
        50% calc(100% - 108px), calc(50% + 4.5px) calc(100% - 117px), 50% calc(100% - 126px), calc(50% + 4.5px) calc(100% - 135px);
    /* Belka admina (64px) — ten sam pomysł, krótszy raster (5 rzędów co 7px) */
    --admin-dots-img:
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 44.0%, transparent) 1.6px, transparent 1.6px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 27.8%, transparent) 1.22px, transparent 1.22px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 14.5%, transparent) 0.86px, transparent 0.86px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 4.8%, transparent) 0.52px, transparent 0.52px),
        radial-gradient(color-mix(in srgb, var(--hero-dot-base) 0.0%, transparent) 0.25px, transparent 0.25px);
    --admin-dots-pos:
        50% calc(100% - 0px), calc(50% + 4.5px) calc(100% - 7px), 50% calc(100% - 14px), calc(50% + 4.5px) calc(100% - 21px),
        50% calc(100% - 28px);

    /* Belka ADMINA w dzień (przeprojektowana 2026-07-21, uwaga Daniela): "morze
       spotyka plażę" — głęboki teal POD LOGO (złote litery i słońce grają na
       morzu kontrastem komplementarnym), przez jasną wodę przy brzegu w piasek
       pod menu (ciemne linki czytelne); zero plakietek */
    --admin-bar-gradient: linear-gradient(118deg, #0b5d75 0%, #0e7490 16%, #7cc0ca 34%, #f6e7c4 58%, #ffe3a6 100%);

    /* CTA na hero w dzień: bielona ściana cypryjskiego domku (krem + burnt orange) */
    --hero-btn-from: #fffdf6;
    --hero-btn-to: #ffeecf;
    --hero-btn-text: #9e430c;
    --hero-btn-shadow: rgba(90, 40, 0, 0.28);

    /* Kalendarz — 4 stany terminów (patrz _DOC/BRAINSTORM.md) */
    --cal-free: #ffffff;
    --cal-free-border: #e3d9c6;
    --cal-pending: #ffdc73;         /* wstępnie zarezerwowany — blade złoto (paleta 2799) */
    --cal-booked: #f49e8b;          /* zajęty — terakota */
    --cal-promo: #c9b8f5;           /* PROMO — lawendowy zmierzch */
    --cal-past: #f1eadb;
    --cal-past-text: #b0a48e;
    /* Wybór zakresu pobytu (relax-booking.js) — teal morza + mgiełka pomiędzy */
    --cal-sel: #0e7490;
    --cal-sel-text: #ffffff;
    --cal-inrange: #d3e7ec;

    /* Czat gość↔host: własne dymki = złoty tint (jak CTA), cudze = ton piasku */
    --chat-mine-bg: #ffefc2;
    --chat-theirs-bg: #f3ecdb;

    /* Hero artykułu przewodnika: nakładka dla czytelności tytułu na zdjęciu
       (dzień: ciepły brąz espresso — rym z tekstem dnia) */
    --guide-hero-tint: rgba(58, 37, 8, 0.78);
    --guide-hero-text: #fff8e8;

    /* Spięcie Bootstrapa z paletą */
    --bs-body-bg: var(--relax-bg);
    --bs-body-color: var(--relax-text);
    --bs-border-color: var(--relax-border);
}

/* ==========================================================================
   2. ZMIENNE — DARK (noc): granat nieba / księżycowe morze / latarnie
   ========================================================================== */
[data-bs-theme="dark"] {
    --relax-bg: #0c1222;            /* głęboki granat nocy */
    --relax-surface: #151e33;
    --relax-text: #e2e8f4;          /* światło księżyca */
    --relax-muted: #8e9cb5;
    --relax-border: #273455;

    --relax-primary: #38bdd4;       /* morze w blasku księżyca */
    --relax-primary-hover: #279fb5;
    --relax-primary-rgb: 56, 189, 212;
    --relax-accent: #ffcf40;        /* GŁÓWNY AKCENT NOCĄ: złoto latarni (paleta 2799) */
    --relax-accent-hover: #ffbf00;
    --relax-gold: #ffcf40;

    /* Akcent przeciwny nocą: jasny ametyst — aksamit letniej nocy (rym z lawendą PROMO) */
    --focus-accent: #b6a3f2;
    --focus-accent-rgb: 182, 163, 242;

    --relax-success: #8fbf6f;       /* oliwka w świetle księżyca */
    --relax-danger: #e07856;        /* ciepła terakota nocą */
    --bs-success-rgb: 143, 191, 111;
    --bs-danger-rgb: 224, 120, 86;
    --relax-warning: #ffcf40;

    /* Główny przycisk nocą = ZŁOTA LATARNIA na aksamicie: blade złoto -> czyste złoto */
    --btn-main-from: #ffdc73;
    --btn-main-to: #ffbf00;
    --btn-main-text: #3a2a00;
    --btn-main-shadow: rgba(255, 191, 0, 0.35);

    --btn-sea-text: #062730;

    --nav-bg: rgba(8, 12, 26, 0.9);
    --nav-border: rgba(56, 189, 212, 0.35);
    --nav-link: #e2e8f4;
    --footerbar-bg: #080d1c;
    --footerbar-text: #8e9cb5;
    --footerbar-link: #ffcf40;

    /* Hero: nocne niebo nad zatoką (skośne) + poświata księżyca + refleks morza */
    --hero-gradient: linear-gradient(122deg, #060a18 0%, #0e1a36 42%, #123048 78%, #1a3d55 100%);
    --hero-glow: radial-gradient(circle at 78% 16%, rgba(240, 222, 170, 0.3), transparent 28%),
                 radial-gradient(ellipse at 12% 88%, rgba(56, 189, 212, 0.16), transparent 55%);
    --hero-text: #eef2fb;
    /* Gwiazdy: chłodna biel, stonowana; rozmiary/krycie rzędów z :root, tu tylko
       ogólna intensywność i KIERUNEK — od góry w dół (zanikają ok. połowy) */
    --hero-dot-base: rgba(196, 214, 235, 0.8);
    --hero-dots-blend: difference;
    --hero-dots-pos:
        50% 0px, calc(50% + 4.5px) 9px, 50% 18px, calc(50% + 4.5px) 27px,
        50% 36px, calc(50% + 4.5px) 45px, 50% 54px, calc(50% + 4.5px) 63px,
        50% 72px, calc(50% + 4.5px) 81px, 50% 90px, calc(50% + 4.5px) 99px,
        50% 108px, calc(50% + 4.5px) 117px, 50% 126px, calc(50% + 4.5px) 135px,
        50% 144px, calc(50% + 4.5px) 153px, 50% 162px, calc(50% + 4.5px) 171px,
        50% 180px, calc(50% + 4.5px) 189px, 50% 198px, calc(50% + 4.5px) 207px,
        50% 216px, calc(50% + 4.5px) 225px;
    --guide-dots-pos:
        50% 0px, calc(50% + 4.5px) 9px, 50% 18px, calc(50% + 4.5px) 27px,
        50% 36px, calc(50% + 4.5px) 45px, 50% 54px, calc(50% + 4.5px) 63px,
        50% 72px, calc(50% + 4.5px) 81px, 50% 90px, calc(50% + 4.5px) 99px,
        50% 108px, calc(50% + 4.5px) 117px, 50% 126px, calc(50% + 4.5px) 135px;
    --admin-dots-pos:
        50% 0px, calc(50% + 4.5px) 7px, 50% 14px, calc(50% + 4.5px) 21px,
        50% 28px;

    /* Belka admina nocą: bez odwracania (gradient nocny gra jak na hero) */
    --admin-bar-gradient: var(--hero-gradient);

    /* CTA na hero nocą: złota latarnia (jak główny przycisk) */
    --hero-btn-from: #ffdc73;
    --hero-btn-to: #ffbf00;
    --hero-btn-text: #3a2a00;
    --hero-btn-shadow: rgba(255, 191, 0, 0.4);

    --cal-free: #18233c;
    --cal-free-border: #2c3a5c;
    --cal-pending: #7d6414;
    --cal-booked: #6e2f2a;
    --cal-promo: #4c3d85;
    --cal-past: #101827;
    --cal-past-text: #5f6c85;
    /* Wybór zakresu nocą — morze w blasku księżyca */
    --cal-sel: #38bdd4;
    --cal-sel-text: #062730;
    --cal-inrange: #1c3a50;

    /* Czat nocą: własne dymki = przygaszone złoto latarni, cudze = jaśniejszy granat */
    --chat-mine-bg: #443712;
    --chat-theirs-bg: #1e2a49;

    /* Hero artykułu nocą: granat nieba nad zdjęciem, tekst w świetle księżyca */
    --guide-hero-tint: rgba(6, 10, 24, 0.82);
    --guide-hero-text: #eef2fb;

    --bs-body-bg: var(--relax-bg);
    --bs-body-color: var(--relax-text);
    --bs-border-color: var(--relax-border);
}

/* ==========================================================================
   3. BAZA
   ========================================================================== */
/* Wersje EL/UK: cały zestaw podmieniany na fonty z greką/cyrylicą (jednolity
   wygląd zamiast mieszania alfabetów; <html lang> ustawia strona) */
html[lang="el"],
html[lang="uk"] {
    --font-display: "Jura", sans-serif;
    --font-body: "Comfortaa", system-ui, sans-serif;
    /* accent bez nadpisania: Roboto Condensed ma grekę i cyrylicę */
}

html[lang="el"] {
    --font-script: "GFS Didot", serif; /* Google nie ma greckiego fontu odręcznego */
}

html[lang="uk"] {
    --font-script: "Caveat", cursive;
}

body {
    background-color: var(--relax-bg);
    color: var(--relax-text);
    font-family: var(--font-body);
    /* miejsce na przyklejone belki: menu u góry, stopka u dołu */
    padding-top: var(--nav-height);
    padding-bottom: calc(var(--footerbar-height) + 1rem);
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Duże tytuły (strony, sekcje artykułów, karty) — Julius Sans One.
   Uppercase wymuszony: Julius jest wersalikowy, a brakujące polskie ę/ć/ś
   dobiera z Jury — wielkie litery zamiast małych = równa wysokość wiersza. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
}

/* Julius (wersaliki + rozstrzelenie) optycznie powiększa tytuły - zbijamy rozmiary
   poniżej bootstrapowych (prośba Daniela 2026-07-14: "za wielkie w stosunku do reszty") */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.2rem; }

/* Małe tytuły ramek (klasy .h5/.h6 na h1-h4) wracają do normalnego zapisu */
.h5, .h6, h5, h6 {
    text-transform: none;
}

/* Menu, stopka, tytuły ramek (card-header), małe nagłówki — Saira Stencil One.
   Klasy .h5/.h6 wygrywają z h1-h4 specyficznością — karty typu <h3 class="h6">
   (tytuł ramki) dostają font akcentowy, zgodnie z intencją. */
h5, h6, .h5, .h6,
.navbar-relax .nav-link,
.navbar-brand,
.footer-bar,
.card > .card-header,
.admin-bar-title {
    font-family: var(--font-accent);
}

/* Cytaty w treści — font odręczny (Playwrite); rozmiar ciut PONIŻEJ tekstu
   głównego (prośba Daniela 2026-07-14). Zajawka artykułu ma własny styl niżej. */
blockquote {
    font-family: var(--font-script);
    font-size: 0.95em;
    line-height: 1.6;
}

/* Grecka wersja cytatów: GFS Didot kursywą (literacki charakter zamiast odręcznego) */
html[lang="el"] blockquote {
    font-style: italic;
}

a {
    color: var(--relax-primary);
}

a:hover {
    color: var(--relax-primary-hover);
}

.text-muted {
    color: var(--relax-muted) !important;
}

.card {
    --bs-card-bg: var(--relax-surface);
    --bs-card-border-color: var(--relax-border);
}

.table {
    --bs-table-bg: var(--relax-surface);
}

.form-control, .form-select {
    background-color: var(--relax-surface);
    border-color: var(--relax-border);
}

/* Zdjęcia od gospodarza w portalu gościa (TYLKO dla gości z rezerwacją):
   równy kadr 4:3 w siatce, podpis przygaszony pod fotką (guest/stay.php) */
.guest-photo-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.guest-photo-caption {
    color: var(--relax-muted);
    line-height: 1.35;
}

/* Mini-mapa dojazdu w portalu gościa (guest/stay.php): osadzona mapa Google
   bez klucza API (output=embed), pełna interakcja w ramce, pod spodem link
   do pełnej mapy/nawigacji */
.guest-map-embed {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 12px;
    display: block;
}

/* Okienko kodu rabatowego (booking.php): przerywana ramka + delikatne tło w akcencie,
   żeby nie ginęło między sekcjami formularza (jak ramka numeru rezerwacji w mailach) */
.promo-box {
    border: 2px dashed var(--relax-accent);
    border-radius: 12px;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--relax-accent) 8%, var(--relax-surface));
}

/* ==========================================================================
   4. PRZYCISKI
   ========================================================================== */
/* Główny przycisk (CTA): w dzień SŁOŃCE, w nocy LATARNIA — patrz zmienne motywów */
.btn-relax {
    background-color: var(--btn-main-to);
    background-image: linear-gradient(135deg, var(--btn-main-from), var(--btn-main-to));
    border-color: var(--btn-main-to);
    color: var(--btn-main-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-relax:hover,
.btn-relax:focus {
    background-image: linear-gradient(135deg, var(--btn-main-to), var(--btn-main-from));
    border-color: var(--btn-main-to);
    color: var(--btn-main-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--btn-main-shadow);
}

/* Przycisk morski (drugorzędny wypełniony): teal morza */
.btn-relax-sea {
    background-color: var(--relax-primary);
    background-image: linear-gradient(135deg, var(--relax-primary), var(--relax-primary-hover));
    border-color: var(--relax-primary);
    color: var(--btn-sea-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-relax-sea:hover,
.btn-relax-sea:focus {
    background-image: linear-gradient(135deg, var(--relax-primary-hover), var(--relax-primary));
    border-color: var(--relax-primary-hover);
    color: var(--btn-sea-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--relax-primary-rgb), 0.35);
}

/* ---------- Przemapowanie komponentów Bootstrapa na paletę wyspy ----------
   (żadnych "fabrycznych" niebieskości — wszystko w tonach dnia/nocy)        */
.btn-outline-primary {
    --bs-btn-color: var(--relax-primary);
    --bs-btn-border-color: var(--relax-primary);
    --bs-btn-hover-bg: var(--relax-primary);
    --bs-btn-hover-border-color: var(--relax-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--relax-primary-hover);
    --bs-btn-active-border-color: var(--relax-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--focus-accent-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--relax-muted);
    --bs-btn-border-color: color-mix(in srgb, var(--relax-muted) 60%, var(--relax-border));
    --bs-btn-hover-bg: var(--relax-muted);
    --bs-btn-hover-border-color: var(--relax-muted);
    --bs-btn-hover-color: var(--relax-surface);
    --bs-btn-active-bg: var(--relax-muted);
    --bs-btn-active-border-color: var(--relax-muted);
    --bs-btn-active-color: var(--relax-surface);
    --bs-btn-focus-shadow-rgb: var(--focus-accent-rgb);
}

.btn-outline-warning {
    --bs-btn-color: var(--relax-warning);
    --bs-btn-border-color: var(--relax-warning);
    --bs-btn-hover-bg: var(--relax-warning);
    --bs-btn-hover-border-color: var(--relax-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--relax-warning);
    --bs-btn-active-border-color: var(--relax-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--focus-accent-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--relax-danger);
    --bs-btn-border-color: var(--relax-danger);
    --bs-btn-hover-bg: var(--relax-danger);
    --bs-btn-hover-border-color: var(--relax-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--relax-danger);
    --bs-btn-active-border-color: var(--relax-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--focus-accent-rgb);
}

/* Alerty: delikatny tint palety zamiast bootstrapowego niebieskiego/zielonego */
.alert-info {
    --bs-alert-bg: color-mix(in srgb, var(--relax-primary) 12%, var(--relax-surface));
    --bs-alert-border-color: color-mix(in srgb, var(--relax-primary) 35%, transparent);
    --bs-alert-color: var(--relax-text);
    --bs-alert-link-color: var(--relax-primary);
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--relax-success) 14%, var(--relax-surface));
    --bs-alert-border-color: color-mix(in srgb, var(--relax-success) 40%, transparent);
    --bs-alert-color: var(--relax-text);
    --bs-alert-link-color: var(--relax-success);
}

.alert-danger {
    --bs-alert-bg: color-mix(in srgb, var(--relax-danger) 13%, var(--relax-surface));
    --bs-alert-border-color: color-mix(in srgb, var(--relax-danger) 40%, transparent);
    --bs-alert-color: var(--relax-text);
    --bs-alert-link-color: var(--relax-danger);
}

.alert-warning {
    --bs-alert-bg: color-mix(in srgb, var(--relax-gold) 16%, var(--relax-surface));
    --bs-alert-border-color: color-mix(in srgb, var(--relax-gold) 45%, transparent);
    --bs-alert-color: var(--relax-text);
    --bs-alert-link-color: var(--relax-warning);
}

/* Badge'y statusów */
.badge.text-bg-success {
    background-color: var(--relax-success) !important;
    color: #fff !important;
}

.badge.text-bg-secondary {
    background-color: var(--relax-muted) !important;
    color: var(--relax-surface) !important;
}

/* Badge oferty last-minute — lawendowy zmierzch (spójny ze stanem PROMO kalendarza) */
.badge.text-bg-promo {
    background-color: var(--cal-promo) !important;
    color: var(--relax-text) !important;
}

/* Statusy rezerwacji: pending = żółty jak w kalendarzu, awaiting payment = teal morza */
.badge.text-bg-warning {
    background-color: var(--cal-pending) !important;
    color: var(--relax-text) !important;
}

.badge.text-bg-info {
    background-color: var(--relax-primary) !important;
    color: var(--relax-surface) !important;
}

/* Chipy informacyjne (goście / sypialnie / min. noce) — ton powierzchni w obu motywach */
.badge.text-bg-light {
    background-color: color-mix(in srgb, var(--relax-primary) 8%, var(--relax-surface)) !important;
    color: var(--relax-text) !important;
    border-color: var(--relax-border) !important;
}

/* Zakładki-pigułki (filtry w panelu): teal morza zamiast fabrycznego niebieskiego */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--relax-primary);
    --bs-nav-pills-link-active-color: var(--relax-surface);
    --bs-nav-link-color: var(--relax-primary);
    --bs-nav-link-hover-color: var(--relax-primary-hover);
}

/* Focus pól formularzy: akcent PRZECIWNY do złota — szafir w dzień,
   periwinkle na aksamitnej nocy (para złoto+szafir; decyzja Daniela 2026-07-10) */
.form-control:focus,
.form-select:focus {
    border-color: var(--focus-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--focus-accent-rgb), 0.2);
}

/* Dropdown (np. wybór języka): aktywna pozycja w tealu */
.dropdown-menu {
    --bs-dropdown-bg: var(--relax-surface);
    --bs-dropdown-link-active-bg: var(--relax-primary);
    --bs-dropdown-border-color: var(--relax-border);
}

/* Nagłówki kart: subtelny skośny tint morza */
.card > .card-header {
    background: linear-gradient(100deg, color-mix(in srgb, var(--relax-primary) 10%, transparent), transparent 70%);
    border-bottom-color: var(--relax-border);
}

/* ==========================================================================
   5. NAVBAR — przyklejony do góry, mleczne szkło
   ========================================================================== */
.navbar-relax {
    background-color: var(--nav-bg);
    backdrop-filter: blur(8px);
    /* Gradientowa krawędź: słońce -> morze (spójna z paletą, więcej dynamiki) */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--relax-accent), var(--relax-primary)) 1;
    min-height: var(--nav-height);
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

.navbar-relax .navbar-brand {
    color: var(--relax-text);
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 0;
}

/* Logo graficzne w navbarze (generowane z PSD: assets/img/logo/ -> logo.png 144px = retina)
   36px: mieści się w belce 64px z zapasem, nie rozpycha menu (uwaga Daniela 2026-07-10) */
.brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.navbar-relax .nav-link {
    color: var(--nav-link);
    font-weight: 500;
    letter-spacing: 0.4px;
    position: relative;
}

.navbar-relax .nav-link:hover,
.navbar-relax .nav-link.active {
    color: var(--relax-accent);
}

/* Aktywna strona w menu (Daniel 2026-07-15, finał): DWA złote paseczki pod nazwą
   — górny dłuższy (podkreślenie tekstu) 90% koloru, dolny krótszy (::after przy
   dole belki) 70% koloru; wspólna baza = jasne złoto --relax-gold, żeby dolny
   był zawsze JAŚNIEJSZY od górnego. Klasę .active nadaje inc/header.inc */
.navbar-relax .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-color: color-mix(in srgb, var(--relax-gold) 90%, transparent);
    text-decoration-thickness: 2px;
}

/* Dolny paseczek tylko na desktopie — w rozwiniętym menu mobilnym nav-link ma pełną
   szerokość i paseczek rozciągał się na całe menu (ToDo 2026-07-15, fix 2026-07-21) */
@media (min-width: 992px) {
    .navbar-relax .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0.75rem;
        right: 0.75rem;
        height: 2px;
        background: color-mix(in srgb, var(--relax-gold) 70%, transparent);
    }
}

.navbar-relax .navbar-toggler {
    border-color: var(--relax-border);
    color: var(--relax-text);
}

/* Rozwinięte menu mobilne na tle belki */
@media (max-width: 991.98px) {
    .navbar-relax .navbar-collapse {
        background-color: var(--relax-surface);
        border: 1px solid var(--relax-border);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
    }
}

/* ---------- Widget pogodowy Paphos (obok logo w belce) ---------- */
/* Pastylka z aktualną temperaturą; dane wstrzykuje relax-weather.js. Domyślnie
   ukryta (opacity:0), pokazuje się dopiero po pobraniu danych (.is-loaded), więc
   przy braku sieci/JS belka wygląda normalnie, bez pustego "--°". */
.weather-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.75rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--relax-border);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--relax-surface) 70%, transparent);
    color: var(--relax-text);
    font-family: var(--font-accent);
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.4s ease, transform 0.4s ease,
                background-color 0.35s ease, border-color 0.35s ease;
}

.weather-widget.is-loaded {
    opacity: 1;
    transform: none;
}

.weather-widget.is-hidden {
    display: none;
}

.weather-icon {
    color: var(--relax-accent);
    font-size: 1.05rem;
}

.weather-temp {
    font-weight: 700;
}

.weather-city {
    color: var(--relax-muted);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

/* Wąskie ekrany: zostaje sama ikona + temperatura, żeby belka się nie rozpychała */
@media (max-width: 575.98px) {
    .weather-city { display: none; }
    .weather-widget { margin-left: 0.5rem; padding: 0.22rem 0.5rem; }
}

/* Desktop: pastylka WYŚRODKOWANA w wolnym polu między logo a menu (prośba Daniela
   2026-07-23). Domyślnie menu (.navbar-collapse) ma flex-grow:1 i dociska logo+widget
   w lewo — na desktopie odbieramy mu to rozpychanie, a marginesy auto z obu stron
   sadzają pastylkę dokładnie w połowie luki (menu i tak zostaje przy prawej krawędzi). */
@media (min-width: 992px) {
    /* :not(.navbar-admin) — belka admina centruje ADMIN PANEL przez mx-auto i
       potrzebuje rozpychanego menu (flex-grow:1), więc jej NIE dotykamy */
    .navbar-relax:not(.navbar-admin) .navbar-collapse { flex-grow: 0; }
    .weather-widget { margin-left: auto; margin-right: auto; }
}

/* ---------- Przełącznik motywu (słońce / księżyc) ---------- */
.theme-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid var(--relax-border);
}

.theme-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    color: var(--relax-muted);
    background-color: transparent;
    border: 1px solid var(--relax-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-btn:hover {
    color: var(--relax-accent);
    border-color: var(--relax-accent);
    transform: translateY(-1px);
}

.theme-btn.active {
    color: #fff;
    background-color: var(--relax-accent);
    border-color: var(--relax-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--relax-accent) 55%, transparent);
}

/* ==========================================================================
   6. HERO — cykl dnia i nocy + pixel-artowe kropki
   (dzień: ziarna piasku gęstniejące ku dołowi; noc: gwiazdy rzednące ku dołowi)
   ========================================================================== */
.hero-main {
    position: relative;
    overflow: hidden;
    background-image: var(--hero-glow), var(--hero-gradient);
    color: var(--hero-text);
    padding: 4rem 0;
    transition: background 0.35s ease;
}

/* Losowe zdjęcie tła (assets/img/hero/{sun,moon}/) — 50% krycia NAD gradientem,
   POD kropkami; --hero-photo ustawia JS (relax-theme.js) wg aktywnego motywu */
.hero-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--hero-photo, none);
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    animation: hero-photo-in 1.2s ease;
}

@keyframes hero-photo-in {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

.hero-main::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--hero-dots-img);
    background-position: var(--hero-dots-pos);
    background-repeat: repeat-x;
    background-size: 9px 9px;
    /* Blend jak w Photoshopie: kropki mieszają się z pikselami zdjęcia/gradientu pod spodem */
    mix-blend-mode: var(--hero-dots-blend, normal);
}

.hero-main .container {
    position: relative;
    z-index: 1;
}

/* Tytuł hero: INVERSE względem losowego zdjęcia tła (biel + difference)
   + cień pod spodem dla głębi i czytelności (rewizja Daniela 2026-07-14) */
.hero-main h1 {
    color: #fff;
    mix-blend-mode: difference;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

/* Slogan hero w SUN: jasny tekst na morskiej PIGUŁCE (teal z palety, lekko
   przezroczysty) - czytelny na każdym, nawet bardzo jasnym zdjęciu tła
   (rewizja Daniela 2026-07-14: kolory tekstu ginęły na losowych tłach) */
.hero-main p.lead {
    /* table: szerokość kurczy się do tekstu (pigułka), ale element zostaje
       blokiem - przycisk CTA trafia POD slogan, nie obok */
    display: table;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(14, 116, 144, 0.85);
    color: #fffdf6;
    padding: 0.45rem 1.4rem;
    border-radius: 2rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* W MOON slogan jasny bez pigułki (jest OK - decyzja Daniela), cień max 2px */
[data-bs-theme="dark"] .hero-main p.lead {
    display: block;
    background-color: transparent;
    color: var(--hero-text);
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-main .btn-relax {
    background-color: var(--hero-btn-to);
    background-image: linear-gradient(135deg, var(--hero-btn-from), var(--hero-btn-to));
    border-color: transparent;
    color: var(--hero-btn-text);
    box-shadow: 0 4px 18px var(--hero-btn-shadow);
}

.hero-main .btn-relax:hover,
.hero-main .btn-relax:focus {
    background-image: linear-gradient(135deg, var(--hero-btn-to), var(--hero-btn-from));
    border-color: transparent;
    color: var(--hero-btn-text);
    box-shadow: 0 6px 22px var(--hero-btn-shadow);
}

/* ==========================================================================
   7. KARTY APARTAMENTÓW
   ========================================================================== */
.apartment-card {
    border: 1px solid var(--relax-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.apartment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.5rem rgba(30, 25, 15, 0.18) !important;
}

[data-bs-theme="dark"] .apartment-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55) !important;
}

.apartment-card-img {
    height: 220px;
    object-fit: cover;
}

.apartment-img-placeholder {
    background-color: var(--relax-border);
    color: var(--relax-muted);
}

.apartment-price {
    color: var(--relax-accent);
    font-weight: 600;
}

/* ---------- Karta apartamentu (szczegóły) ---------- */
.apartment-hero-img {
    height: 380px;
    object-fit: cover;
}

.apartment-thumb {
    width: 90px;
    height: 64px;
    object-fit: cover;
}

/* Galeria apartamentu klikalna jak w blogu (plan A8, 2026-07-15): popup współdzieli
   markup i style guide-gallery-*; miniaturki w złotej ramce jak w blogu
   (prośba Daniela 2026-07-15 wieczór — spójnie z .guide-media-img) */
.guide-gallery-thumb .apartment-thumb,
.guide-gallery-thumb .apartment-hero-img {
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.guide-gallery-thumb .apartment-thumb {
    border: 2px solid color-mix(in srgb, var(--relax-accent) 55%, var(--relax-border));
}

.guide-gallery-thumb:hover .apartment-thumb {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--relax-accent) 35%, transparent);
}

/* Pills informacyjne apartamentu (pomysł Daniela 2026-07-15): pastelowe gradienty
   w tonie palety, przyjazna informacja BEZ czerwieni (czerwień odstrasza) —
   ZŁOTO: fakty z opisu (goście / sypialnie / min. noce),
   ZIELEŃ: highlights zaznaczone przez admina ("Private pool"),
   BŁĘKIT: cechy nieobecne ("No private pool") — spokojna informacja, nie ostrzeżenie */
.apt-pill {
    border: 1px solid transparent;
    font-weight: 500;
}

.apt-pill-fact {
    background: linear-gradient(135deg, #fff8e1, #ffeab8);
    color: #7a5b00;
    border-color: #eed9a0;
}

.apt-pill-yes {
    background: linear-gradient(135deg, #e9f7ec, #d0eed9);
    color: #1e6b38;
    border-color: #b9e0c6;
}

.apt-pill-no {
    background: linear-gradient(135deg, #eaf3fb, #d6e7f6);
    color: #33608d;
    border-color: #bfd8ee;
}

[data-bs-theme="dark"] .apt-pill-fact {
    background: linear-gradient(135deg, #3a3014, #4a3e1c);
    color: #ffdc73;
    border-color: #6a5a26;
}

[data-bs-theme="dark"] .apt-pill-yes {
    background: linear-gradient(135deg, #16301d, #1e4128);
    color: #a4dab2;
    border-color: #2e5c3b;
}

[data-bs-theme="dark"] .apt-pill-no {
    background: linear-gradient(135deg, #182a3e, #203a54);
    color: #a9c9e8;
    border-color: #2f5474;
}

/* Pulsująca kropka przełącznika języka (pomysł Daniela 2026-07-15): tylko strona
   główna + goście bez cookie relax_lang (patrz inc/header.inc). Fala jak radar,
   po 10 pulsach zostaje sama kropka (bez wiecznego migania). CZERWONA (decyzja
   Daniela) — celowo spoza złotej palety, ma przyciągać wzrok; #e5484d czytelna
   na belce w SUN i MOON (terakota --cal-booked w MOON jest za ciemna) */
.lang-pulse-dot {
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #e5484d;
    animation: lang-pulse 1.6s ease-out 10;
}

@keyframes lang-pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .lang-pulse-dot { animation: none; }
}

.apartment-desc {
    white-space: normal;
}

/* Treść Amenities i Location czcionką menu (moje_ToDo pkt 8, 2026-07-21) —
   odróżnia listy faktów od opisu pisanego Meriendą; tytuły sekcji bez zmian */
.apartment-amenities li {
    color: var(--relax-text);
    font-family: var(--font-accent);
    letter-spacing: 0.4px;
}

.apartment-location {
    font-family: var(--font-accent);
    letter-spacing: 0.4px;
}

/* Metraż przy nazwie apartamentu (moje_ToDo pkt 3, 2026-07-21): mniejsza czcionka
   menu obok dużego tytułu; bez uppercase odziedziczonego z h1 */
.apt-size {
    font-family: var(--font-accent);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: none;
}

.booking-panel {
    top: calc(var(--nav-height) + 16px); /* pod przyklejonym navbarem */
}

/* ==========================================================================
   8. KALENDARZ DOSTĘPNOŚCI
   ========================================================================== */
/* Cena za noc przy nazwie miesiąca (wzorzec linii lotniczych, Daniel 2026-07-15):
   złoto akcentu — jak dawne "from" u góry panelu (które było mylące i zniknęło);
   separator "|" CZARNY (życzenie Daniela; w MOON kolor tekstu — czerń by znikła) */
.cal-month-price {
    color: var(--relax-accent);
}

.cal-month-sep {
    color: #000;
}

[data-bs-theme="dark"] .cal-month-sep {
    color: var(--relax-text);
}

.cal-month {
    margin-bottom: 1rem;
}

.cal-month-title {
    color: var(--relax-primary);
}

.cal-table th {
    font-weight: 600;
    color: var(--relax-muted);
    border: none;
    background-color: transparent;
}

.cal-table td {
    width: 14.28%;
    border: 1px solid var(--cal-free-border);
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

/* Prefiks td. jest konieczny: bootstrapowe .table > :not(caption) > * > * (0,1,1)
   ustawia background/color komórek i wygrywało z samą klasą .cal-day-* (0,1,0) —
   stany dni nie były widoczne. td.cal-day-* remisuje (0,1,1), a relax.css ładuje się
   po Bootstrapie, więc wygrywa kolejnością. */
td.cal-day-free    { background-color: var(--cal-free); }
td.cal-day-pending { background-color: var(--cal-pending); }
td.cal-day-booked  { background-color: var(--cal-booked); text-decoration: line-through; }
td.cal-day-promo   { background-color: var(--cal-promo); font-weight: 600; }
td.cal-day-past    { background-color: var(--cal-past); color: var(--cal-past-text); }
td.cal-day-empty   { background-color: transparent; border: none; }

/* Legenda używa tych samych klas stanów na kropkach (span poza tabelą) */
.cal-legend-dot.cal-day-free    { background-color: var(--cal-free); }
.cal-legend-dot.cal-day-pending { background-color: var(--cal-pending); }
.cal-legend-dot.cal-day-booked  { background-color: var(--cal-booked); }
.cal-legend-dot.cal-day-promo   { background-color: var(--cal-promo); }

/* Wybór zakresu pobytu (relax-booking.js): klikalne dni + podświetlenie od-do.
   Reguły PO stanach dni — przy tej samej specyficzności wygrywa późniejsza. */
.cal-table td[data-date] {
    cursor: pointer;
}

.cal-table td[data-date].cal-day-free:hover,
.cal-table td[data-date].cal-day-promo:hover {
    outline: 2px solid var(--cal-sel);
    outline-offset: -2px;
}

td.cal-day-checkin,
td.cal-day-checkout {
    background-color: var(--cal-sel);
    color: var(--cal-sel-text);
    font-weight: 700;
}

td.cal-day-inrange {
    background-color: var(--cal-inrange);
}

/* ==========================================================================
   Strona kontaktowa — duże logo dekoracyjnie wystaje spod formularza
   w prawo-dół (nie dotyka krawędzi strony; formularz nad logo)
   ========================================================================== */
.contact-wrap {
    position: relative;
    margin-bottom: 5.5rem; /* miejsce na wystające logo (bottom: -80px) nad stopką */
}

.contact-wrap > form,
.contact-wrap > h1,
.contact-wrap > p,
.contact-wrap > .alert {
    position: relative;
    z-index: 1;
}

.contact-logo-deco {
    position: absolute;
    right: -170px;
    bottom: -80px;
    width: 660px;
    max-width: 90%;
    z-index: 0;
    opacity: 0.9;
    pointer-events: none;   /* czysto dekoracyjne — nie łapie kliknięć */
    user-select: none;
}

/* Przezroczystości formularza kontaktowego (doprecyzowanie Daniela 2026-07-10):
   małe inputy 10% przezroczystości (90% krycia), duża textarea 25% (75% krycia)
   — logo delikatnie prześwituje, tekst w polach w pełni czytelny */
.contact-wrap input.form-control {
    background-color: color-mix(in srgb, var(--relax-surface) 90%, transparent);
}

.contact-wrap textarea.form-control {
    background-color: color-mix(in srgb, var(--relax-surface) 75%, transparent);
}

/* lg (992-1199px): mniejszy gutter — łagodniejsze wystawanie, by nie dotknąć krawędzi */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .contact-logo-deco {
        right: -120px;
        width: 540px;
    }
}

/* Na węższych ekranach logo schodzi POD formularz (wystawanie w bok = poziomy scroll) */
@media (max-width: 991.98px) {
    .contact-logo-deco {
        position: static;
        display: block;
        margin: 2.5rem 0 0 auto;
        width: 340px;
        max-width: 88%;
    }
}

/* Podsumowanie wyceny na /booking */
.booking-summary {
    border-color: var(--relax-primary);
}

/* ==========================================================================
   Belka panelu ADMINA — celowo inna niż publiczna (odróżnialna na pierwszy
   rzut oka): gradient hero + pixel-kropki z blendem, tytuł wyśrodkowany,
   całe menu po prawej (prośba Daniela 2026-07-10)
   ========================================================================== */
.navbar-admin {
    background-color: transparent;
    background-image: var(--hero-glow), var(--admin-bar-gradient);
    backdrop-filter: none;
    overflow: hidden;
}

/* Ikony motywu (słońce/księżyc) siedzą na głębokim tealu lewego krańca belki —
   jasne wersje, żeby nie tonęły w morzu (dotyczy obu motywów: noc też jest ciemna) */
.navbar-admin .theme-btn {
    color: #eaf6f8;
    border-color: rgba(255, 255, 255, 0.45);
}

.navbar-admin .theme-btn:hover {
    color: #ffffff;
}

/* Kropki identyczne jak na hero (radial + mix-blend-mode + maska) */
.navbar-admin::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--admin-dots-img);
    background-position: var(--admin-dots-pos);
    background-repeat: repeat-x;
    background-size: 9px 9px;
    mix-blend-mode: var(--hero-dots-blend, normal);
}

.navbar-admin .container {
    position: relative;
    z-index: 1;
}

.navbar-admin .nav-link,
.navbar-admin .navbar-text {
    color: var(--hero-text);
}

/* Tytuł panelu: kapitaliki z rozstrzeleniem, centrowany w wolnej przestrzeni
   (mx-auto w headerze — position:absolute kolidowało z pozycjami menu) */
.admin-bar-title {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--hero-text);
    opacity: 0.85;
    pointer-events: none;
    white-space: nowrap;
}

/* Separator "|" między sekcjami menu */
.navbar-admin .nav-sep {
    color: var(--hero-text);
    opacity: 0.4;
    align-self: center;
}

/* Panel propozycji last-minute (admin) — lawendowy akcent stanu PROMO */
.promo-proposal-card {
    border-left: 4px solid var(--cal-promo);
}

/* Portal gościa: kod do drzwi — duży, w kreskowanej ramce (jak ref w mailach) */
.door-code-box {
    border: 2px dashed var(--relax-primary);
    border-radius: 10px;
    padding: 1rem;
    background-color: var(--relax-surface);
}

.door-code {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--relax-primary);
}

/* Portal gościa + panel: czat gość↔host — dymki relatywne do patrzącego
   (chat-msg-mine = własne po prawej, chat-msg-theirs = druga strona po lewej) */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
}

.chat-msg {
    max-width: 82%;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    overflow-wrap: break-word;
}

.chat-msg-mine {
    align-self: flex-end;
    background-color: var(--chat-mine-bg);
    border-bottom-right-radius: 4px;
}

.chat-msg-theirs {
    align-self: flex-start;
    background-color: var(--chat-theirs-bg);
    border-bottom-left-radius: 4px;
}

.chat-msg .chat-meta {
    font-size: 0.72rem;
    color: var(--relax-muted);
    margin-top: 0.25rem;
    text-align: right;
}

/* Portal gościa: okładka polecajki w przewodniku lokalnym */
.guide-cover {
    width: 100%;
    height: 100%;
    min-height: 150px;
    max-height: 220px;
    object-fit: cover;
}

/* ==========================================================================
   PRZEWODNIK LOKALNY (blog) — Guides 2.0 (2026-07-13)
   guides.php (landing) + guide.php (artykuł) + inc/guide-sidebar.inc + edytor
   ========================================================================== */

/* Chipy kategorii/tagów: tint morza, aktywny = pełny teal (spójne z .nav-pills) */
.badge.guide-chip {
    background-color: color-mix(in srgb, var(--relax-primary) 12%, var(--relax-surface));
    color: var(--relax-primary);
    border: 1px solid color-mix(in srgb, var(--relax-primary) 35%, transparent);
    font-weight: 600;
}

.badge.guide-chip:hover,
.badge.guide-chip-active {
    background-color: var(--relax-primary);
    color: var(--relax-surface);
    border-color: var(--relax-primary);
}

/* Gwiazdka wyróżnienia (landing + lista w panelu) — złoto akcentu */
.guide-featured-star {
    color: var(--relax-accent);
}

/* ---------- Landing: hero losowego artykułu (karta pełnej szerokości) ---------- */
.guide-landing-hero {
    position: relative;
}

.guide-landing-hero-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.guide-landing-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; /* badge kategorii nie rozciąga się na szerokość hero */
    padding: 1.5rem;
    background: linear-gradient(to top, var(--guide-hero-tint), transparent 75%);
    color: var(--guide-hero-text);
}

.guide-landing-hero-overlay h2,
.guide-landing-hero-overlay p,
.guide-landing-hero-overlay span {
    color: var(--guide-hero-text);
}

/* ---------- Karty artykułów (lista, wyróżnione, powiązane) ---------- */
.guide-card {
    border: 1px solid var(--relax-border);
    color: var(--relax-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.5rem rgba(30, 25, 15, 0.18) !important;
    color: var(--relax-text);
}

[data-bs-theme="dark"] .guide-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55) !important;
}

.guide-card h3 {
    color: var(--relax-text);
}

.guide-card-img {
    height: 180px;
    object-fit: cover;
}

.guide-card-img-sm {
    height: 120px;
    object-fit: cover;
}

.guide-card-side-img {
    width: 100%;
    height: 100%;
    min-height: 120px;
    object-fit: cover;
}

.guide-card-more {
    color: var(--relax-primary);
}

.guide-card-featured {
    border-color: color-mix(in srgb, var(--relax-accent) 55%, var(--relax-border));
}

/* ---------- Sidebar bloga ---------- */
.guide-sidebar {
    top: calc(var(--nav-height) + 16px); /* pod przyklejonym navbarem (jak .booking-panel) */
}

.guide-recent-item a {
    color: var(--relax-text);
}

.guide-recent-item a:hover span {
    color: var(--relax-primary);
}

.guide-recent-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    flex-shrink: 0;
}

.guide-cta-card {
    border-color: color-mix(in srgb, var(--relax-accent) 55%, var(--relax-border));
}

/* ---------- Artykuł: hero pełnej szerokości doklejone do górnej belki ---------- */
.guide-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    /* Zdjęcia brak (teoretycznie tylko stare wpisy) — gradient hero jako tło awaryjne */
    background-image: var(--hero-glow), var(--hero-gradient);
}

/* Kropki-ziarna NAD zdjęciem artykułu (2026-07-21) — ten sam bajer co hero główne:
   SUN od dołu, MOON od góry (kierunek w --guide-dots-pos), blend jak w Photoshopie */
.guide-hero::after,
.guide-landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--guide-dots-img);
    background-position: var(--guide-dots-pos);
    background-repeat: repeat-x;
    background-size: 9px 9px;
    mix-blend-mode: var(--hero-dots-blend, normal);
}

/* Treść hero (tytuł, badge) NAD kropkami */
.guide-hero-overlay,
.guide-landing-hero-overlay {
    z-index: 1;
}

.guide-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-hero-overlay {
    position: relative;
    width: 100%;
    padding: 4.5rem 0 1.75rem;
    background: linear-gradient(to top, var(--guide-hero-tint), transparent);
    color: var(--guide-hero-text);
}

.guide-hero-title {
    color: var(--guide-hero-text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .guide-hero {
        min-height: 400px;
    }
}

/* Zajawka pod tytułem: NORMALNY tekst treści (bez kursywy i paska cytatu),
   wyróżniony elegancko miękkim złotym panelem (rewizja 2 Daniela 2026-07-14) */
.guide-excerpt {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--relax-text);
    background-color: color-mix(in srgb, var(--relax-gold) 12%, var(--relax-surface));
    border: 1px solid color-mix(in srgb, var(--relax-accent) 30%, var(--relax-border));
    padding: 1rem 1.25rem;
}

/* ---------- Treść artykułu (HTML z Quill) ---------- */
.guide-body {
    line-height: 1.7;
}

.guide-body h2,
.guide-body h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.guide-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.guide-body blockquote {
    border-left: 4px solid var(--relax-accent);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background-color: color-mix(in srgb, var(--relax-gold) 10%, var(--relax-surface));
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Wyrównania Quill (klasy ql-align-* zostają w zapisanym HTML-u) */
.guide-body .ql-align-center { text-align: center; }
.guide-body .ql-align-right  { text-align: right; }
.guide-body .ql-align-justify { text-align: justify; }

/* ---------- Galeria artykułu: zdjęcia + video ---------- */
/* Miniaturki w złotej ramce (jak karta CTA w sidebarze — prośba Daniela 2026-07-14) */
.guide-media-img {
    height: 160px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--relax-accent) 55%, var(--relax-border));
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.guide-gallery-thumb:hover .guide-media-img {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--relax-accent) 35%, transparent);
}

.guide-media-video {
    max-height: 360px;
    background-color: #000;
    border: 2px solid color-mix(in srgb, var(--relax-accent) 55%, var(--relax-border));
}

/* Popup galerii (wzorzec: offline-gallery.php z AnnaLubecka.pl) — ciemne tło
   niezależnie od motywu, złote akcenty strzałek */
.guide-gallery-modal {
    background-color: rgba(8, 12, 26, 0.97);
    border: 1px solid color-mix(in srgb, var(--relax-accent) 45%, transparent);
}

.guide-gallery-counter,
.guide-gallery-caption {
    color: #e2e8f4;
}

.guide-gallery-img {
    max-height: 80vh;
    max-width: 100%;
    object-fit: contain;
}

/* Strzałki: biała ikona na złotym KÓŁKU (główny akcent strony) — widoczne na
   każdym zdjęciu (rewizja 2 Daniela 2026-07-14: kolorowe kółko pod strzałką) */
.guide-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #a67c00; /* głębokie złoto (paleta 2799) — stałe, modal zawsze ciemny */
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.guide-gallery-arrow:hover {
    background-color: #ffbf00; /* main gold */
    color: #3d2a00;
    transform: translateY(-50%) scale(1.12);
}

.guide-gallery-prev { left: 0.75rem; }
.guide-gallery-next { right: 0.75rem; }

.guide-links-list .list-group-item {
    background-color: var(--relax-surface);
    border-color: var(--relax-border);
}

/* ---------- Edytor Quill w panelu (lokalny vendor; motyw snow + SUN/MOON) ---------- */
.guide-editor {
    min-height: 300px;
    background-color: var(--relax-surface);
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--relax-border);
}

.ql-toolbar.ql-snow {
    border-radius: 0.375rem 0.375rem 0 0;
    background-color: color-mix(in srgb, var(--relax-primary) 6%, var(--relax-surface));
}

.ql-container.ql-snow {
    border-radius: 0 0 0.375rem 0.375rem;
    font-size: 1rem;
}

/* Ikony/teksty toolbara w kolorach motywu (snow zakłada jasne tło) */
[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--relax-text);
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
    fill: var(--relax-text);
}

[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--relax-text);
}

[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--relax-surface);
    border-color: var(--relax-border);
}

/* Tabelka mnożników sezonowych (admin) — 12 kolumn, kompaktowo */
.seasons-factors th,
.seasons-factors td {
    font-size: 0.78rem;
    padding: 0.3rem 0.2rem;
}

.booking-total {
    color: var(--relax-primary);
}

.cal-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--cal-free-border);
    border-radius: 3px;
}

/* ==========================================================================
   9. STOPKA — belka przyklejona do dołu ekranu
   ========================================================================== */
.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    min-height: var(--footerbar-height);
    display: flex;
    align-items: center;
    background-color: var(--footerbar-bg);
    color: var(--footerbar-text);
    font-size: 0.85rem;
    /* Lustrzane odbicie krawędzi navbara: morze -> słońce */
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--relax-primary), var(--relax-accent)) 1;
    transition: background-color 0.35s ease;
}

.footer-bar a {
    color: var(--footerbar-link);
    text-decoration: none;
}

.footer-bar a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   10. PANEL ADMINA
   ========================================================================== */
.admin-login-wrap {
    padding-top: 10vh;
}

.admin-photo-thumb {
    height: 160px;
    object-fit: cover;
}