/* ═══════════════════════════════════════════════
   Asylum of Beauty – style.css
   CIEMNY  : czarne tło, złote gradienty
   JASNY   : ecru tło, czysto czarne teksty
═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   FONTY (fallback jeśli Google Fonts niedostępne)
───────────────────────────────────────────── */
:root {
    --ff-serif: 'Cormorant Garamond', Georgia, serif;
    --ff-sans:  'Jost', 'Segoe UI', system-ui, sans-serif;

    /* Złoty gradient – używany w ciemnym motywie */
    --gold-grad: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --gold:      #F6EEEA;
    --gold-pale: #fcf6ba;

    /* ── CIEMNY MOTYW (domyślny) ─────────────── */
    --bg:           #080808;
    --surface:      rgba(255,255,255,0.04);
    --surface-h:    rgba(255,255,255,0.07);
    --border:       rgba(197,160,89,0.18);
    --border-subtle:rgba(197,160,89,0.08);

    --text:         #e8e8e8;
    --text-dim:     #999;
    --text-heading: var(--gold-pale);
    --text-price:   var(--gold-pale);
    --text-link:    var(--gold-pale);
    --text-link-h:  #ffffff;

    --btn-bg:       transparent;
    --btn-border:   rgba(252,246,186,0.45);
    --btn-text:     var(--gold-pale);
    --btn-hover-bg: var(--gold-grad);
    --btn-hover-c:  #000;

    --modal-bg:     rgba(10,10,10,0.97);
    --card-bg:      rgba(10,9,6,0.97);
    --contact-bg:   rgba(0,0,0,0.3);

    --dots:         rgba(255,255,255,0.09);
    --dots-h:       rgba(252,246,186,0.55);
    --scroll-track: #000;
    --scroll-thumb: var(--gold);

    --sep-line:     var(--gold-grad);

    --toggle-bg:    rgba(8,8,8,0.8);
    --toggle-bdr:   rgba(197,160,89,0.4);

    --push-bg:      rgba(10,9,6,0.97);
    --push-bdr:     rgba(197,160,89,0.2);

    --footer-link:  #888;
    --footer-hov:   var(--gold-pale);
    --footer-dim:   #555;
    --footer-bdr:   rgba(255,255,255,0.08);

    --map-dis:      #888;
    --leaflet-f:    brightness(0.8) saturate(0.6) invert(1) hue-rotate(200deg);
    --leaflet-bg:   #111;
    --popup-bg:     #1a1a1a;
    --popup-text:   #eee;
    --popup-head:   var(--gold);

    --logo-filter:  drop-shadow(0 0 22px rgba(197,160,89,0.45));
    --cta-bg:       rgba(12,10,4,0.5);
}

/* ── JASNY MOTYW ─────────────────────────────── */
body.theme-light {
    --bg:           #f0e9d8;
    --surface:      rgba(255,253,247,0.78);
    --surface-h:    rgba(255,254,250,0.92);
    --border:       rgba(0,0,0,0.1);
    --border-subtle:rgba(0,0,0,0.06);

    --text:         #111111;
    --text-dim:     #555555;
    --text-heading: #111111;
    --text-price:   #111111;
    --text-link:    #111111;
    --text-link-h:  #000000;

    --btn-bg:       transparent;
    --btn-border:   rgba(0,0,0,0.35);
    --btn-text:     #111111;
    --btn-hover-bg: #111111;
    --btn-hover-c:  #f5f0e8;

    --modal-bg:     rgba(252,249,242,0.99);
    --card-bg:      rgba(252,249,242,0.99);
    --contact-bg:   rgba(255,253,247,0.65);

    --dots:         rgba(0,0,0,0.12);
    --dots-h:       rgba(0,0,0,0.35);
    --scroll-track: #e8e0cc;
    --scroll-thumb: #888;

    --sep-line:     linear-gradient(to right,#aaa,#666,#aaa);

    --toggle-bg:    rgba(245,241,232,0.92);
    --toggle-bdr:   rgba(0,0,0,0.2);

    --push-bg:      rgba(252,249,242,0.99);
    --push-bdr:     rgba(0,0,0,0.1);

    --footer-link:  #555;
    --footer-hov:   #000;
    --footer-dim:   #5f5f5f;
    --footer-bdr:   rgba(0,0,0,0.1);

    --map-dis:      #555;
    --leaflet-f:    none;
    --leaflet-bg:   #f0ead8;
    --popup-bg:     #fdfaf2;
    --popup-text:   #111;
    --popup-head:   #333;

    --logo-filter:  brightness(0) saturate(0);
    --cta-bg:       rgba(245,241,232,0.65);
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--ff-sans);
    font-weight: 300;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    background-size: 400% 400%;
    animation: bgAnim 28s ease infinite;
    transition: color .35s;
}

/* Animowany gradient tła */
body:not(.theme-light) {
    background-image: linear-gradient(-45deg, #000, #060606, #111009, #030303);
}
body.theme-light {
    background-image: linear-gradient(-45deg, #f5f0e8, #ede8dc, #f0ead8, #e8e0cc);
}
@keyframes bgAnim {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

::-webkit-scrollbar       { width: 7px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; }

h1,h2,h3,.brand-font {
    font-family: var(--ff-serif);
    color: var(--text-heading);
}

a:not(.btn-premium)       { color: var(--text-link); text-decoration: none; transition: color .3s; }
a:not(.btn-premium):hover { color: var(--text-link-h); }

.footer-link       { color: var(--footer-link) !important; transition: color .3s; }
.footer-link:hover { color: var(--footer-hov)  !important; }

/* Bootstrap overrides */
.text-muted       { color: var(--text-dim) !important; }
.text-light       { color: var(--text) !important; }

/* ═══════════════════════════════════════════════
   GOLD GRADIENT TEXT
   Ciemny: złoty gradient | Jasny: czysta czerń
═══════════════════════════════════════════════ */
.text-gold-gradient {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
body.theme-light .text-gold-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
}

/* ═══════════════════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════════════════ */
#theme-toggle {
    position: fixed; top: 1.1rem; right: 1.25rem; z-index: 9000;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--toggle-bdr);
    background: var(--toggle-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, background .3s, border-color .3s;
    box-shadow: 0 3px 14px rgba(0,0,0,.35);
}
#theme-toggle:hover { transform: scale(1.08); }

#theme-toggle svg {
    width: 18px; height: 18px;
    position: absolute; pointer-events: none;
    transition: opacity .3s, transform .35s;
}
/* Ciemny: księżyc widoczny */
#theme-toggle .icon-dark  { opacity:1; transform:rotate(0)   scale(1);   }
#theme-toggle .icon-light { opacity:0; transform:rotate(90deg) scale(.5); }
/* Jasny: słońce widoczne */
body.theme-light #theme-toggle .icon-dark  { opacity:0; transform:rotate(-90deg) scale(.5); }
body.theme-light #theme-toggle .icon-light { opacity:1; transform:rotate(0)       scale(1);  }
body.theme-light #theme-toggle .icon-light { stroke: #333 !important; }

/* ═══════════════════════════════════════════════
   PAGE LOADER (zawsze ciemny – oba motywy)
═══════════════════════════════════════════════ */
#loader {
    position: fixed; inset: 0; z-index: 99999;
    background: #000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2.5rem;
    transition: opacity 1.2s ease, visibility 1.2s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.loader-logo-wrap::before {
    content: ''; position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(179,135,40,.14) 0%, transparent 70%);
    animation: halo 4s ease-in-out infinite;
}
@keyframes halo {
    0%,100% { transform: scale(.9); opacity: .5; }
    50%      { transform: scale(1.1); opacity: 1; }
}
.loader-logo {
    width: min(260px, 60vw); height: auto;
    animation: drift 5s ease-in-out infinite;
    filter: drop-shadow(0 0 28px rgba(197,160,89,.55));
}
@keyframes drift {
    0%,100% { transform: translateY(0) scale(1);     opacity: .85; }
    50%      { transform: translateY(-8px) scale(1.02); opacity: 1; }
}
.loader-fallback-text {
    font-family: var(--ff-serif);
    font-size: clamp(2rem,8vw,3.5rem);
    letter-spacing: clamp(4px,2vw,10px);
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: none;
    animation: drift 5s ease-in-out infinite;
}
.loader-subtitle {
    font-size: .75rem; text-transform: uppercase;
    letter-spacing: 4px; color: var(--gold);
    animation: sub-fade 4s ease-in-out infinite;
}
@keyframes sub-fade {
    0%,100% { opacity: .65; }
    50%      { opacity: 1; }
}
.loader-track {
    width: clamp(120px,30vw,200px); height: 1px;
    background: rgba(197,160,89,.15);
    position: relative; overflow: hidden;
}
.loader-track::after {
    content: ''; position: absolute; inset: 0;
    background: var(--gold-grad);
    animation: track-fill 3.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes track-fill {
    0%   { transform: scaleX(0);    transform-origin: left; }
    80%  { transform: scaleX(.95);  transform-origin: left; }
    100% { transform: scaleX(1);    transform-origin: left; }
}

/* ═══════════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════════ */
.btn-premium {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--btn-text);
    padding: .8rem 2.5rem;
    font-family: var(--ff-sans); font-size: 1rem;
    text-transform: uppercase; letter-spacing: 2px;
    border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; cursor: pointer;
    transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.btn-premium:hover {
    background: var(--btn-hover-bg);
    border-color: transparent;
    color: var(--btn-hover-c);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════════
   GLASS PANELS
═══════════════════════════════════════════════ */
.glass-panel {
    background: var(--surface);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    border-top-color: color-mix(in srgb, var(--border) 100%, white 30%);
    border-radius: 2px;
    box-shadow: 0 22px 50px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.05);
    padding: 2.5rem 2rem;
    transition: transform .45s cubic-bezier(.25,.8,.25,1),
                box-shadow .45s cubic-bezier(.25,.8,.25,1),
                background .3s;
}
body.theme-light .glass-panel {
    box-shadow: 0 12px 36px rgba(0,0,0,.07),
                inset 0 1px 0 rgba(255,255,255,.9);
}
.glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 36px 65px rgba(0,0,0,.65),
                inset 0 1px 0 rgba(197,160,89,.18);
    background: var(--surface-h);
}
body.theme-light .glass-panel:hover {
    box-shadow: 0 20px 48px rgba(0,0,0,.1),
                inset 0 1px 0 rgba(255,255,255,1);
}
.glass-panel.no-hover:hover { transform: none; }

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.glass-modal {
    background: var(--modal-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    box-shadow: 0 40px 80px rgba(0,0,0,.7);
}
.glass-modal .modal-header { border-bottom: 1px solid var(--border-subtle); }
.glass-modal .btn-close     { filter: invert(1) grayscale(1) brightness(2); }
body.theme-light .glass-modal .btn-close { filter: none; }
.glass-modal h6 { font-family: var(--ff-serif); color: var(--text-heading); margin-top: 1.5rem; }
.glass-modal a  { color: var(--text-link); }
.modal-text     { font-weight: 300; }

/* ═══════════════════════════════════════════════
   SEPARATOR
═══════════════════════════════════════════════ */
.separator {
    display: flex; align-items: center; justify-content: center;
    margin: 2rem 0; opacity: .7;
}
.separator::before,
.separator::after {
    content: ''; width: 50px; height: 1px;
    background: var(--sep-line); margin: 0 14px;
}
.separator i {
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-size: .8rem;
}
body.theme-light .separator i {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #555 !important;
}

/* ═══════════════════════════════════════════════
   MENU / CENNIK
═══════════════════════════════════════════════ */
.category-title {
    font-size: clamp(1.1rem,4vw,1.8rem);
    letter-spacing: clamp(2px,1vw,4px);
    margin-bottom: 1.5rem;
    text-transform: uppercase; text-align: center; font-weight: 500;
}
ul.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-item {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 1rem; color: var(--text);
    font-size: clamp(.85rem,2.5vw,1.05rem); letter-spacing: .5px;
    transition: color .3s;
}
.menu-item:hover { color: var(--text-link-h); }
.menu-item:hover .item-dots { border-bottom-color: var(--dots-h); }
.item-name  { flex-shrink: 0; max-width: 72%; }
.item-note  { font-size: .78rem; color: var(--text-dim); }
.item-dots  {
    flex-grow: 1; border-bottom: 1px solid var(--dots);
    margin: 0 8px 6px; transition: border-color .3s;
}
.item-price {
    font-weight: 500; color: var(--text-price);
    white-space: nowrap; letter-spacing: 1px;
    font-size: clamp(.82rem,2.5vw,1rem);
}
.price-prefix { font-size: .75rem; color: var(--text-dim); margin-right: 4px; font-style: italic; font-weight: 300; }
.uzupelnienie-title { font-size: 1.1rem; margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════
   CONTACT BOX
═══════════════════════════════════════════════ */
.contact-box {
    background: var(--contact-bg);
    border: 1px solid var(--border-subtle);
    padding: 2rem; display: inline-block;
    backdrop-filter: blur(10px); margin-top: 1rem;
    transition: background .3s, border-color .3s;
}
.contact-info p {
    font-size: 1rem; margin-bottom: .8rem;
    letter-spacing: 1px; display: flex; align-items: center;
    color: var(--text);
}
.contact-info i {
    width: 34px; font-size: 1.15rem;
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-light .contact-info i {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #333 !important;
}
.contact-info-inner { max-width: fit-content; margin: 0 auto; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.header-section { padding: 4rem 0 3rem; }

.header-logo-wrap { display: flex; justify-content: center; }
.header-logo {
    width: min(280px,65vw); height: auto;
    display: block; margin: 0 auto;
    filter: var(--logo-filter);
    transition: filter .4s;
}

/* H1 ukryty wizualnie, widoczny dla AI/SEO */
.visually-hidden-seo {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.header-title    { font-size: clamp(2rem,8vw,4.5rem); letter-spacing: clamp(3px,1.5vw,8px); }
.header-subtitle { font-size: clamp(1rem,3.5vw,1.5rem); color: var(--text-dim); }
.header-tagline-wrap { max-width: 600px; }
.header-tagline      {
    font-size: clamp(1.05rem,2.8vw,1.35rem);
    color: var(--text); opacity: .72;
    line-height: 1.8; letter-spacing: .5px;
}
.header-tagline-sub  { opacity: 1; color: var(--text-dim); }
body:not(.theme-light) .header-tagline-sub { color: var(--gold); }

/* ═══════════════════════════════════════════════
   FILOZOFIA – PHOTO CARD
═══════════════════════════════════════════════ */
.filozofia-panel { padding: 0; overflow: hidden; }
.filozofia-photo-wrap { position: relative; }
.filozofia-photo {
    width: 100%; display: block;
    max-height: 520px; object-fit: cover; object-position: center top;
    filter: brightness(.92) contrast(1.04);
}
.filozofia-photo-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; height: 130px;
    background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
}
body.theme-light .filozofia-photo-overlay {
    background: linear-gradient(to top, rgba(240,234,216,.92), transparent);
}
.filozofia-photo-caption { position: absolute; bottom: 1.5rem; left: 2rem; right: 2rem; }
/* Imię – na ciemnej nakładce zdjęcia – złoto OK w obu motywach */
.filozofia-name {
    font-family: var(--ff-serif);
    font-size: clamp(1.4rem,4vw,1.9rem);
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 2px;
}
.filozofia-title { font-size: .72rem; text-transform: uppercase; letter-spacing: 3px; color: #c5a059; margin-top: .2rem; }
body.theme-light .filozofia-title { color: #b8a070; }
.filozofia-body  { padding: 2rem 2rem 2.5rem; }
.filozofia-text  { color: var(--text-dim); font-weight: 300; line-height: 1.9; font-size: clamp(.9rem,2.5vw,1.05rem); }

.metric-value {
    font-family: var(--ff-serif); font-size: 2rem;
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-light .metric-value {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #111 !important;
}
.metric-value--sm { font-size: 1.35rem; }
.metric-label     { font-size: .73rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════
   CTA PANEL
═══════════════════════════════════════════════ */
.cta-panel { background: var(--cta-bg) !important; }

/* ═══════════════════════════════════════════════
   BOOKING SECTION
═══════════════════════════════════════════════ */
.booking-title    { font-size: clamp(1.6rem,5vw,3rem); }
.booking-subtitle { font-weight: 300; font-size: clamp(.9rem,2.5vw,1.1rem); color: var(--text-dim); }
.booking-address  { max-width: 340px; color: var(--text); }
.booking-btns     { max-width: 320px; width: 100%; }
.booking-address .bi, .booking-address i {
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-size: 1.5rem;
}
body.theme-light .booking-address .bi,
body.theme-light .booking-address i {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #333 !important;
}

/* ═══════════════════════════════════════════════
   MAP
═══════════════════════════════════════════════ */
#osm-map-container        { min-height: 420px; }
#osm-map-container iframe { min-height: 380px; border-radius: 2px; }
.map-address    { font-size: .95rem; color: var(--text-dim); }
.map-disclaimer { font-size: .82rem; color: var(--map-dis); }
.map-btn        { font-size: .85rem; }

.leaflet-tile { filter: var(--leaflet-f); }
.leaflet-container { background: var(--leaflet-bg); }
.leaflet-popup-content-wrapper {
    background: var(--popup-bg); color: var(--popup-text);
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.leaflet-popup-tip { background: var(--popup-bg); }
.leaflet-popup-content { font-family: var(--ff-sans); font-size: .85rem; line-height: 1.7; }
.leaflet-popup-content strong { color: var(--popup-head); display: block; font-size: 1rem; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer-sep    { color: var(--footer-dim); }
.footer-sep-sm { color: var(--footer-dim); }
.footer-copy   { color: var(--footer-dim); font-size: .8rem; margin-top: .75rem; }
.footer-bottom { border-color: var(--footer-bdr) !important; }
.footer-links  { letter-spacing: 1px; }
footer .text-muted { color: var(--text-dim) !important; }

/* ═══════════════════════════════════════════════
   PWA INSTALL OVERLAY
═══════════════════════════════════════════════ */
#pwa-overlay {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    align-items: flex-end; justify-content: center;
}
#pwa-overlay.visible { display: flex; }
#pwa-card {
    background: var(--card-bg);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 6px 6px 0 0; padding: 2rem 1.75rem 1.75rem;
    max-width: 480px; width: 100%; color: var(--text);
    box-shadow: 0 -20px 60px rgba(0,0,0,.7);
    position: relative;
    animation: slideUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.pwa-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pwa-close, .push-close {
    position: absolute; top: .9rem; right: .9rem;
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color .2s;
}
.pwa-close:hover, .push-close:hover { color: var(--text); }

.pwa-logo {
    width: 54px; height: 54px;
    background: var(--gold-grad);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
body.theme-light .pwa-logo { background: #111; }

.pwa-headline {
    font-family: var(--ff-serif); font-size: 1.3rem;
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: .2rem;
}
body.theme-light .pwa-headline {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #111 !important;
}
.pwa-sub      { color: var(--text-dim); font-size: .82rem; margin-bottom: 1.2rem; letter-spacing: .5px; }
.pwa-benefits { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.pwa-benefits li { display: flex; align-items: flex-start; gap: .7rem; font-size: .88rem; color: var(--text); line-height: 1.5; }
.pwa-benefits li strong { font-weight: 500; }
.pwa-benefits li .icon {
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-size: 1rem; flex-shrink: 0;
}
body.theme-light .pwa-benefits li .icon {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #333 !important;
}
.pwa-note { font-size: .75rem; color: var(--text-dim); margin-top: .7rem; text-align: center; line-height: 1.5; }
.pwa-install-btn { font-size: .9rem; letter-spacing: 2px; }

/* ═══════════════════════════════════════════════
   PUSH BANNER
═══════════════════════════════════════════════ */
#push-banner {
    display: none; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9997;
    background: var(--push-bg); border: 1px solid var(--push-bdr);
    border-radius: 4px; padding: 1.25rem 1.5rem 1rem;
    max-width: 320px; width: calc(100% - 3rem); color: var(--text);
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    animation: slideInRight .4s cubic-bezier(.22,1,.36,1);
}
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
#push-banner.visible { display: block; }

.push-title {
    font-family: var(--ff-serif); font-size: 1.1rem;
    background: var(--gold-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: .35rem; padding-right: 1.5rem;
}
body.theme-light .push-title {
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #111 !important;
}
.push-text    { font-size: .82rem; color: var(--text-dim); line-height: 1.55; margin-bottom: .6rem; }
.push-actions { display: flex; gap: .5rem; margin-top: .65rem; }
.push-btn-allow { flex: 1; font-size: .8rem; }
.push-btn-deny  { flex: 0 0 auto; font-size: .8rem; color: var(--text-dim); border-color: var(--border-subtle); }

.push-name-input {
    width: 100%; display: block;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border-subtle);
    border-radius: 2px; color: var(--text);
    font-family: var(--ff-sans); font-size: .88rem; font-weight: 300;
    padding: .5rem .7rem; outline: none;
    transition: border-color .2s;
}
.push-name-input:focus { border-color: var(--border); }
.push-name-input::placeholder { color: var(--text-dim); opacity: .5; }
body.theme-light .push-name-input { background: rgba(0,0,0,.04); }

/* ═══════════════════════════════════════════════
   ANIMATE.CSS DELAYS
═══════════════════════════════════════════════ */
.animate__animated { animation-duration: 1.5s; }
.delay-1 { animation-delay: .2s; }
.delay-2 { animation-delay: .4s; }
.delay-3 { animation-delay: .6s; }
.delay-4 { animation-delay: .8s; }
.delay-5 { animation-delay: 1s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 575px) {
    .glass-panel    { padding: 1.5rem 1rem; }
    .header-section { padding: 3rem 0 2rem; }
    .contact-box    { padding: 1.25rem 1rem; }
    #theme-toggle   { top: .75rem; right: .75rem; }
}