/* =====================================================================
   SPA LUXURY MOBILE – MOTYW KRÓLEWSKI (ładowany jako ostatni arkusz)

   1. Kinowy efekt wejścia hero: złoty napis wyłania się z głębokiej czerni.
   2. Tło bez poświat: sekcje są przezroczyste, a wygląd tła nadaje
      motyw „Złoty Lux" (assets/css/zloty-lux.css).
   3. Złoto-błękitne neony okienek, paneli, skrótów i przycisków,
      pulsowanie przycisków głównych i fala błękitu na hover / dotyk.
   4. Tryb Szefa (`body.boss-mode`, assets/js/tryb-szefa.js): ten sam
      zestaw zmiennych przełączony na neonowy fiolet, cyber-zieleń i cyjan.

   Skaner Kondycji (`.battery-section`) jest celowo wyłączony z motywu –
   ma własny, dopracowany język wizualny (assets/css/smartpotwor.css).
   ===================================================================== */

/* --- 0. Paleta ---------------------------------------------------------
   Kanały RGB trzymamy osobno, żeby każda poświata mogła dobrać własną
   przezroczystość. Złożone cienie liczymy na <body>: tam też Tryb Szefa
   podmienia kanały, więc cienie przeliczają się same. */
:root {
    --kr-void: #030303;
    --kr-a-rgb: 212 175 55;     /* szlachetne złoto #D4AF37 */
    --kr-b-rgb: 0 71 171;       /* królewski błękit #0047AB */
    --kr-wave-rgb: 58 130 255;  /* rozjaśniony błękit fali – #0047AB na czerni by zniknął */
    --kr-pulse-time: 3.2s;
}

body {
    --kr-a: rgb(var(--kr-a-rgb));
    --kr-b: rgb(var(--kr-b-rgb));
    --kr-neon-box:
        0 0 0 1px rgb(var(--kr-a-rgb) / 0.55),
        0 0 16px rgb(var(--kr-a-rgb) / 0.30),
        0 0 32px rgb(var(--kr-b-rgb) / 0.55);
    --kr-neon-box-lo:
        0 0 0 1px rgb(var(--kr-a-rgb) / 0.33),
        0 0 16px rgb(var(--kr-a-rgb) / 0.18),
        0 0 32px rgb(var(--kr-b-rgb) / 0.33);
    --kr-neon-text:
        0 0 6px rgb(var(--kr-a-rgb) / 0.55),
        0 0 16px rgb(var(--kr-b-rgb) / 0.85);
    --kr-neon-text-ink:
        0 1px 0 rgb(255 245 215 / 0.45),
        0 0 12px rgb(var(--kr-b-rgb) / 0.45);
    --kr-ring-0: 0 0 0 0 rgb(var(--kr-wave-rgb) / 0.85), inset 0 0 0 0 rgb(var(--kr-wave-rgb) / 0);
    --kr-ring-1: 0 0 0 7px rgb(var(--kr-wave-rgb) / 0.35), inset 0 0 14px 1px rgb(var(--kr-wave-rgb) / 0.55);
    --kr-ring-2: 0 0 0 18px rgb(var(--kr-wave-rgb) / 0), inset 0 0 0 0 rgb(var(--kr-wave-rgb) / 0);

    --bg-black: var(--kr-void);
    background: var(--kr-void);
}

/* Sekcje stron przestają zasłaniać tło pełnym kolorem – głębia tła
   przechodzi przez cały serwis. Skaner Kondycji zostaje nietknięty. */
body > header.page-head,
.club:not(.battery-section),
.booking,
.courier,
.spa-zone,
.ba-section,
.nx-audio,
.nx-style,
.nx-config,
.premium-section,
footer {
    background: transparent;
}
footer.nx-footer::before {
    background: linear-gradient(180deg, rgb(3 3 3 / 0) 0%, rgb(3 3 3 / 0.45) 35%, rgb(3 3 3 / 0.7) 100%);
}

/* --- 2. Hero: kinowy efekt wejścia ------------------------------------- */
header.kr-hero {
    background: transparent;
    border-bottom-color: rgb(var(--kr-a-rgb) / 0.25);
}
.kr-hero__brand {
    margin: 0 0 22px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 6px;
    color: rgb(var(--kr-a-rgb) / 0.85);
    text-shadow: var(--kr-neon-text);
    animation: kr-reveal 1.4s ease 0.3s both;
}

.kr-hero__title {
    position: relative;
    display: grid;
    margin: 0 auto;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 8.4vw, 6.4rem);
    line-height: 1.02;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Wyjście z parowej komory Cyfrowego Jacuzzi */
    animation: kr-emerge 2.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Obie warstwy leżą w tej samej komórce siatki – łamią się identycznie. */
.kr-hero__depth,
.kr-hero__gold {
    grid-area: 1 / 1;
}
/* Warstwa głębi: wytłoczenie 3D + podwójna złoto-błękitna łuna */
.kr-hero__depth {
    color: #6e5210;
    animation: kr-breathe 4.2s ease-in-out 2.2s infinite;
    text-shadow:
        0 1px 0 #c79f35, 0 2px 0 #b38b26, 0 3px 0 #9c781d,
        0 4px 0 #846315, 0 5px 0 #6c500f, 0 7px 10px rgb(0 0 0 / 0.75),
        0 0 22px rgb(var(--kr-a-rgb) / 0.55),
        0 0 48px rgb(var(--kr-b-rgb) / 0.65),
        0 0 90px rgb(var(--kr-b-rgb) / 0.45);
}
/* Lico: polerowane, płynne złoto z przesuwającym się refleksem */
.kr-hero__gold {
    color: transparent;
    background:
        linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.7) 48%, transparent 58%) 0 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #fff7d6 0%, #f4d57a 20%, #D4AF37 42%, #8f6a12 52%, #e0bb4f 64%, #fff0b3 82%, #b88a26 100%);
    -webkit-background-clip: text;
    background-clip: text;
    animation: kr-liquid-gold 7s ease-in-out 1.5s infinite;
}
@keyframes kr-emerge {
    0%   { opacity: 0; transform: scale(0.8); filter: blur(14px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes kr-breathe {
    0%, 100% {
        text-shadow:
            0 1px 0 #c79f35, 0 2px 0 #b38b26, 0 3px 0 #9c781d,
            0 4px 0 #846315, 0 5px 0 #6c500f, 0 7px 10px rgb(0 0 0 / 0.75),
            0 0 22px rgb(var(--kr-a-rgb) / 0.55),
            0 0 48px rgb(var(--kr-b-rgb) / 0.65),
            0 0 90px rgb(var(--kr-b-rgb) / 0.45);
    }
    50% {
        text-shadow:
            0 1px 0 #c79f35, 0 2px 0 #b38b26, 0 3px 0 #9c781d,
            0 4px 0 #846315, 0 5px 0 #6c500f, 0 7px 10px rgb(0 0 0 / 0.75),
            0 0 10px rgb(var(--kr-a-rgb) / 0.25),
            0 0 24px rgb(var(--kr-b-rgb) / 0.3),
            0 0 44px rgb(var(--kr-b-rgb) / 0.18);
    }
}
@keyframes kr-liquid-gold {
    0%   { background-position: 130% 0, 0 0; }
    55%  { background-position: -30% 0, 0 0; }
    100% { background-position: -30% 0, 0 0; }
}
.kr-hero__reveal { animation: kr-reveal 1.2s ease 1.6s both; }
.nx-hero__actions.kr-hero__reveal { animation-delay: 1.9s; }
@keyframes kr-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- 3. Złoto-błękitne neony --------------------------------------------
   Okienka, panele, skróty. Skaner Kondycji wyłączony z każdej grupy. */
:is(.luxe-card, .service-card, .spa-card, .skrot-tile, .choice-tile, .pay-tile,
    .chat-window, .luxe-overlay__box, .secure-overlay, .konfig__sheet,
    .komora__sheet, .jacuzzi__sheet, .thanks-box, .panel, .card, .logo-box,
    .op-form-box, .lock-box, .spa-room__card, .nx-service__body, .pwa-banner,
    .szef-status-led, .kpi, .owner-panel):not(.battery-section *) {
    border-color: rgb(var(--kr-a-rgb) / 0.6);
    box-shadow: var(--kr-neon-box-lo);
}
:is(.luxe-title, .section-title, .nx-title, .page-head__title, .skrot-tile h3,
    .service-card h3, .thanks-box h1, .panel h1, .card h2):not(.battery-section *) {
    text-shadow: var(--kr-neon-text);
}

/* Paski nawigacji: złota krawędź z błękitną poświatą */
.site-nav {
    border-bottom-color: rgb(var(--kr-a-rgb) / 0.55);
    box-shadow: 0 1px 0 rgb(var(--kr-a-rgb) / 0.35), 0 8px 26px rgb(var(--kr-b-rgb) / 0.35);
}
.app-nav {
    border-top-color: rgb(var(--kr-a-rgb) / 0.55);
    box-shadow: 0 -1px 0 rgb(var(--kr-a-rgb) / 0.35), 0 -8px 26px rgb(var(--kr-b-rgb) / 0.35);
}
.site-nav__links a,
.app-nav__item {
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
.site-nav__links a:is(:hover, :focus-visible, .is-current),
.app-nav__item:is(:hover, :focus-visible, .is-current, [aria-current="page"]) {
    text-shadow: var(--kr-neon-text);
}

/* Przyciski główne: zatwierdzenie, „Dodaj do Jacuzzi", rezerwacja */
:is(.luxe-btn:not(.luxe-btn--ghost, .luxe-btn--danger), .nx-btn--primary, .btn-premium,
    .skrot-tile__add, .site-nav__cta, .spa-card-cta, .btn-submit, .btn-back,
    .btn:not(.ghost)):not(.battery-section *) {
    border-color: var(--kr-a);
    box-shadow: var(--kr-neon-box);
    text-shadow: var(--kr-neon-text);
    animation: kr-pulse var(--kr-pulse-time) ease-in-out infinite;
}
/* Pełne, złote wypełnienie: ciemny tekst dostaje subtelniejszą poświatę */
:is(.luxe-btn:not(.luxe-btn--ghost, .luxe-btn--danger), .nx-btn--primary, .btn-premium,
    .skrot-tile__add, .btn:not(.ghost)):not(.battery-section *) {
    text-shadow: var(--kr-neon-text-ink);
}
/* Przyciski drugorzędne: stały neon bez pulsowania */
:is(.luxe-btn--ghost, .nx-btn--ghost, .btn.ghost, .skrot-tile__more,
    .owner-panel__tab, .chat-bubble:not(.is-alert)):not(.battery-section *) {
    border-color: rgb(var(--kr-a-rgb) / 0.7);
    box-shadow: var(--kr-neon-box-lo);
    text-shadow: var(--kr-neon-text);
}

/* Pulsowanie 60% → 100% intensywności świecenia */
@keyframes kr-pulse {
    0%, 100% { box-shadow: var(--kr-neon-box-lo), var(--kr-ring-2); }
    50%      { box-shadow: var(--kr-neon-box), var(--kr-ring-2); }
}

/* Fala błękitnego światła po złotej ramce: hover (mysz), fokus klawiatury
   i `.kr-wave` dodawane przez assets/js/tryb-szefa.js przy dotknięciu. */
@keyframes kr-wave {
    0%   { box-shadow: var(--kr-neon-box), var(--kr-ring-0); border-color: var(--kr-a); }
    35%  { box-shadow: var(--kr-neon-box), var(--kr-ring-1); border-color: rgb(var(--kr-wave-rgb)); }
    100% { box-shadow: var(--kr-neon-box), var(--kr-ring-2); border-color: var(--kr-a); }
}
:is(.luxe-card, .service-card, .spa-card, .skrot-tile, .choice-tile, .pay-tile,
    .nx-service__body, .spa-room__card, .kpi, .luxe-btn, .nx-btn, .btn-premium,
    .skrot-tile__add, .skrot-tile__more, .site-nav__cta, .spa-card-cta, .btn-submit,
    .btn-back, .btn, .owner-panel__tab, .chat-bubble:not(.is-alert)):not(.battery-section *):is(:focus-visible, .kr-wave) {
    animation: kr-wave 0.9s ease-out;
}
@media (hover: hover) {
    :is(.luxe-card, .service-card, .spa-card, .skrot-tile, .choice-tile, .pay-tile,
        .nx-service__body, .spa-room__card, .kpi, .luxe-btn, .nx-btn, .btn-premium,
        .skrot-tile__add, .skrot-tile__more, .site-nav__cta, .spa-card-cta, .btn-submit,
        .btn-back, .btn, .owner-panel__tab, .chat-bubble:not(.is-alert)):not(.battery-section *):hover {
        animation: kr-wave 0.9s ease-out;
    }
}

/* --- 4. TRYB SZEFA: Lśniące Centrum Dowodzenia --------------------------
   Złoto i błękit znikają – te same zmienne dostają neonowy fiolet,
   cyber-zieleń i jaskrawy cyjan. Dotychczasowe arkusze (var(--gold)…)
   przełączają się razem z motywem. */
body.boss-mode {
    --kr-a-rgb: 191 0 255;      /* neonowy fiolet */
    --kr-b-rgb: 57 255 20;      /* cyber-zieleń */
    --kr-wave-rgb: 0 240 255;   /* jaskrawy cyjan */
    --kr-c: #00f0ff;
    --kr-glow: 0 0 8px currentColor, 0 0 15px currentColor;
    --kr-neon-text: var(--kr-glow);
    --kr-neon-text-ink: var(--kr-glow);

    --gold: #d77bff;
    --gold-dark: #a13dff;
    --gold-line: rgb(191 0 255 / 0.55);
    --gold-soft: rgb(191 0 255 / 0.16);
    --nx-neon: #00f0ff;
    --nx-neon-soft: rgb(0 240 255 / 0.2);
    --nx-line: rgb(0 240 255 / 0.3);
    --text-light: #e6fdff;
    --text-muted: #7ff6ff;
}
/* Skaner Kondycji zachowuje swój świat także w Trybie Szefa */
body.boss-mode .battery-section {
    --gold: #dfba6b;
    --gold-dark: #bfa353;
    --gold-line: rgba(223, 186, 107, 0.28);
    --gold-soft: rgba(223, 186, 107, 0.16);
    --nx-neon: #3fc8ff;
    --text-light: #e0e0e0;
    --text-muted: #a0a0a0;
}

/* Przyciski: ciemne szkło, ostre neonowe krawędzie i świecące litery */
body.boss-mode :is(.luxe-btn, .nx-btn, .btn-premium, .skrot-tile__add, .skrot-tile__more,
    .site-nav__cta, .spa-card-cta, .btn-submit, .btn-back, .btn, .owner-panel__tab,
    .chat-bubble:not(.is-alert), .szef-luxe-dock__exit):not(.battery-section *) {
    background: rgb(12 0 24 / 0.82);
    color: #39ff14;
    border-color: #bf00ff;
    text-shadow: var(--kr-glow);
}
body.boss-mode :is(.luxe-btn--ghost, .nx-btn--ghost, .btn.ghost, .skrot-tile__more,
    .owner-panel__tab:not([aria-selected="true"])):not(.battery-section *) {
    color: var(--kr-c);
}
body.boss-mode .luxe-btn--danger { color: #ff3df2; border-color: #ff3df2; }

/* Skróty nawigacyjne */
body.boss-mode :is(.site-nav__brand, .site-nav__links a, .app-nav__item) {
    color: var(--kr-c);
    text-shadow: var(--kr-glow);
}
body.boss-mode :is(.site-nav__links a.is-current, .app-nav__item.is-current, .app-nav__item[aria-current="page"], .site-nav__brand span) {
    color: #39ff14;
}

/* Tabele */
body.boss-mode :is(table, th, td) {
    border-color: #bf00ff;
    text-shadow: var(--kr-glow);
}
body.boss-mode th { color: #d77bff; }
body.boss-mode td { color: var(--kr-c); }

/* Okienka i panele: krawędzie świecą ostrym fioletem */
body.boss-mode :is(.luxe-card, .service-card, .spa-card, .skrot-tile, .choice-tile, .pay-tile,
    .chat-window, .luxe-overlay__box, .secure-overlay, .konfig__sheet, .komora__sheet,
    .jacuzzi__sheet, .thanks-box, .panel, .card, .logo-box, .op-form-box, .lock-box,
    .spa-room__card, .nx-service__body, .pwa-banner, .szef-status-led, .kpi,
    .owner-panel, .szef-desk, .live-log, .order-list):not(.battery-section *) {
    border-color: #bf00ff;
}
body.boss-mode :is(.luxe-input, input, select, textarea):not(.battery-section *) {
    border-color: rgb(0 240 255 / 0.6);
    color: var(--kr-c);
}

/* Panele operacyjne: każda cyfra i litera emituje własne światło.
   :where() trzyma niską specyficzność – kolory stanów (np. opłacone,
   anulowane) z dwuklasowych reguł pozostają czytelne. */
body.boss-mode :where(.owner-panel, .szef-desk, .szef-workspace, .courier, .kpi,
    .live-log, .order-list, .owner-grid, .owner-online, .slot-editor, .protocol,
    .secure-content, .lab-pulse, .szef-luxe-dock, .szef-status-led, .presence-pulse),
body.boss-mode :where(.owner-panel, .szef-desk, .szef-workspace, .courier, .kpi,
    .live-log, .order-list, .owner-grid, .owner-online, .slot-editor, .protocol,
    .secure-content, .lab-pulse, .szef-luxe-dock, .szef-status-led, .presence-pulse) * {
    text-shadow: var(--kr-glow);
}
body.boss-mode :where(.owner-panel, .szef-desk, .szef-workspace, .courier, .kpi, .live-log,
    .order-list, .owner-grid, .owner-online, .slot-editor, .protocol, .secure-content)
    :where(p, li, dd, small, label, span, em, div, a, time) {
    color: var(--kr-c);
}
body.boss-mode :where(.owner-panel, .szef-desk, .szef-workspace, .courier, .kpi, .live-log,
    .order-list, .owner-grid, .owner-online, .slot-editor, .protocol, .secure-content)
    :where(h1, h2, h3, h4, h5, legend, dt, .luxe-title, .section-title) {
    color: #d77bff;
}
body.boss-mode :where(.owner-panel, .szef-desk, .szef-workspace, .courier, .kpi, .live-log,
    .order-list, .owner-grid, .owner-online, .slot-editor, .protocol, .secure-content)
    :where(strong, b, output, [class*="count"], [class*="value"], [class*="total"], [class*="cell"]) {
    color: #39ff14;
}

/* Hero w Trybie Szefa: złoto gaśnie, napis płonie fioletem i cyjanem */
body.boss-mode .kr-hero__gold {
    background:
        linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.75) 48%, transparent 58%) 0 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #f6d9ff 0%, #d77bff 30%, #bf00ff 50%, #00f0ff 75%, #b8fff9 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
body.boss-mode .kr-hero__depth {
    color: #3a0070;
    animation: none;
    text-shadow:
        0 1px 0 #7a00c9, 0 2px 0 #6400a6, 0 3px 0 #4f0085, 0 4px 0 #3b0063,
        0 0 10px #bf00ff, 0 0 26px #bf00ff, 0 0 52px #39ff14;
}

/* --- Dostępność: bez ruchu dla osób, które go wyłączyły ---------------- */
@media (prefers-reduced-motion: reduce) {
    .kr-hero__title,
    .kr-hero__depth,
    .kr-hero__gold,
    .kr-hero__brand,
    .kr-hero__reveal {
        animation: none !important;
    }
    :is(.luxe-btn, .nx-btn, .btn-premium, .skrot-tile__add, .site-nav__cta, .spa-card-cta,
        .btn-submit, .btn-back, .btn):not(.battery-section *) {
        animation: none !important;
    }
}