/* =========================================================
   Wygląd „szklany” (glassmorphism) całej aplikacji – Galeria online
   Włączony w js/config.js → look: "glass". Powrót do poprzedniego wyglądu: look: "classic"
   (wtedy ten plik nic nie zmienia, a w tle wraca zdjęcie z realizacji).
   Wszystkie reguły działają tylko przy :root[data-look="glass"].
   ========================================================= */

:root[data-look="glass"] {
  --bg: #f3f1ea;
  --card: rgba(255, 255, 255, 0.6);
  --card-soft: rgba(255, 255, 255, 0.46);
  --cream: rgba(247, 244, 235, 0.72);
  --line: rgba(26, 46, 43, 0.1);
  --line-strong: rgba(26, 46, 43, 0.17);
  --line-soft: rgba(26, 46, 43, 0.06);
  --line-warm: rgba(26, 46, 43, 0.1);
  --input-bg: rgba(255, 255, 255, 0.78);
  /* bez brązu: ciemne akcenty i „hover” przycisków w zieleni */
  --umber: #0f5c4f;
  --umber-ink: #0f5c4f;
  --fill-hover: #00695c;
  --footer-bg: rgba(0, 56, 47, 0.92);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-card: rgba(255, 255, 255, 0.62);
  --glass-chip: rgba(255, 255, 255, 0.78);
  --shadow-card: 0 12px 34px rgba(0, 77, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(255, 255, 255, 0.78);
  --glass-blur: blur(18px) saturate(160%);
  --aurora:
    radial-gradient(42vmax 42vmax at 6% 4%, rgba(0, 121, 100, 0.2), transparent 70%),
    radial-gradient(40vmax 40vmax at 96% 12%, rgba(230, 196, 120, 0.3), transparent 70%),
    radial-gradient(38vmax 38vmax at 82% 88%, rgba(170, 120, 190, 0.18), transparent 70%),
    radial-gradient(46vmax 46vmax at 18% 96%, rgba(120, 190, 168, 0.24), transparent 70%),
    linear-gradient(160deg, #f7f4ec 0%, #eef3ef 100%);
}
/* tryb ciemny (z systemu albo z przełącznika) */
@media (prefers-color-scheme: dark) {
  :root[data-look="glass"]:not([data-theme="light"]) {
    --bg: #0b1412;
    --card: rgba(24, 38, 35, 0.58);
    --card-soft: rgba(24, 38, 35, 0.44);
    --cream: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.15);
    --line-soft: rgba(255, 255, 255, 0.05);
    --line-warm: rgba(255, 255, 255, 0.09);
    --input-bg: rgba(10, 20, 18, 0.55);
    --umber: #1f7a69;
    --umber-ink: #a6e3d4;
    --fill-hover: #2a9a85;
    --footer-bg: rgba(6, 30, 26, 0.92);
    --glass: rgba(12, 22, 20, 0.6);
    --glass-strong: rgba(12, 22, 20, 0.92);
    --glass-card: rgba(24, 38, 35, 0.62);
    --glass-chip: rgba(24, 38, 35, 0.8);
    --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-edge: rgba(255, 255, 255, 0.1);
    --aurora:
      radial-gradient(42vmax 42vmax at 6% 4%, rgba(0, 140, 115, 0.24), transparent 70%),
      radial-gradient(40vmax 40vmax at 96% 12%, rgba(200, 160, 80, 0.14), transparent 70%),
      radial-gradient(38vmax 38vmax at 82% 88%, rgba(150, 90, 170, 0.18), transparent 70%),
      radial-gradient(46vmax 46vmax at 18% 96%, rgba(40, 120, 100, 0.2), transparent 70%),
      linear-gradient(160deg, #0d1816 0%, #0a1311 100%);
  }
}
:root[data-look="glass"][data-theme="dark"] {
  --bg: #0b1412;
  --card: rgba(24, 38, 35, 0.58);
  --card-soft: rgba(24, 38, 35, 0.44);
  --cream: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.15);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-warm: rgba(255, 255, 255, 0.09);
  --input-bg: rgba(10, 20, 18, 0.55);
  --umber: #1f7a69;
  --umber-ink: #a6e3d4;
  --fill-hover: #2a9a85;
  --footer-bg: rgba(6, 30, 26, 0.92);
  --glass: rgba(12, 22, 20, 0.6);
  --glass-strong: rgba(12, 22, 20, 0.92);
  --glass-card: rgba(24, 38, 35, 0.62);
  --glass-chip: rgba(24, 38, 35, 0.8);
  --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --aurora:
    radial-gradient(42vmax 42vmax at 6% 4%, rgba(0, 140, 115, 0.24), transparent 70%),
    radial-gradient(40vmax 40vmax at 96% 12%, rgba(200, 160, 80, 0.14), transparent 70%),
    radial-gradient(38vmax 38vmax at 82% 88%, rgba(150, 90, 170, 0.18), transparent 70%),
    radial-gradient(46vmax 46vmax at 18% 96%, rgba(40, 120, 100, 0.2), transparent 70%),
    linear-gradient(160deg, #0d1816 0%, #0a1311 100%);
}

/* tło: zamiast zdjęcia – miękkie, rozlane plamy koloru (zieleń, szampan, wrzos) */
:root[data-look="glass"] body { background: var(--bg); }
:root[data-look="glass"] .bg-photo { background: var(--aurora); filter: none; opacity: 1; transform: translateZ(0); }

/* szklane powierzchnie: półprzezroczyste, z rozmyciem i jasną krawędzią */
:root[data-look="glass"] :is(.panel, .price-card, .stat, .feature, .faq details, .tpl-card, .footer-promo, .promo-strip, .adm-row, .pay-method, .sc-card, .addon-card, .price-details, .buyer-box, .dl-banner.big, .notice) {
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
:root[data-look="glass"] .panel, :root[data-look="glass"] .price-card { border-radius: 24px; }
:root[data-look="glass"] .promo-strip, :root[data-look="glass"] .addon-card { background: var(--card-soft); }
:root[data-look="glass"] .price-card.is-popular, :root[data-look="glass"] .price-card.is-premium { background: rgba(255, 255, 255, 0.78); }
:root[data-look="glass"] :is(.account-menu, .menu-pop, dialog.modal) {
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
/* menu „⋯” na kafelku zamówienia: rozmycie tła nie działa wewnątrz kafelka ze szkłem – pełne, nieprzezroczyste tło */
:root[data-look="glass"] .adm-row .menu-pop { background: var(--bg); box-shadow: 0 18px 44px rgba(0, 40, 34, 0.22); }
:root[data-look="glass"] .topbar { background: var(--glass); border-bottom-color: var(--glass-edge); box-shadow: 0 6px 24px rgba(0, 40, 34, 0.05); }
/* pasek „tryb demonstracyjny” – zielone szkło zamiast brązu */
:root[data-look="glass"] .demo-banner { background: rgba(0, 77, 64, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-look="glass"] .site-footer { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-look="glass"] .btn-primary:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(0, 77, 64, 0.25); }
:root[data-look="glass"] .btn-ghost { background: rgba(255, 255, 255, 0.5); }
:root[data-look="glass"][data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.06); }
@media (prefers-color-scheme: dark) { :root[data-look="glass"]:not([data-theme="light"]) .btn-ghost { background: rgba(255, 255, 255, 0.06); } }

/* przeglądarki bez rozmycia – pełniejsze tło, żeby tekst był czytelny */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-look="glass"] { --card: rgba(255, 255, 255, 0.9); --glass: rgba(255, 255, 255, 0.94); }
}

/* Safari (Mac, iPhone): rozmycie tła na wielu kafelkach naraz bardzo spowalnia przewijanie.
   Kafelki dostają pełniejsze, mleczne tło bez rozmycia (tło za nimi to i tak miękkie plamy koloru – różnicy prawie nie widać);
   rozmycie zostaje tylko na górnym pasku, w oknach i menu. Klasę data-engine ustawia js/app.js. */
:root[data-look="glass"][data-engine="safari"] {
  --card: rgba(255, 255, 255, 0.82);
  --card-soft: rgba(255, 255, 255, 0.7);
}
:root[data-look="glass"][data-engine="safari"][data-theme="dark"] {
  --card: rgba(20, 33, 30, 0.9);
  --card-soft: rgba(20, 33, 30, 0.78);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="glass"][data-engine="safari"]:not([data-theme="light"]) {
    --card: rgba(20, 33, 30, 0.9);
    --card-soft: rgba(20, 33, 30, 0.78);
  }
}
:root[data-look="glass"][data-engine="safari"] :is(.panel, .price-card, .stat, .feature, .faq details, .tpl-card, .footer-promo, .promo-strip, .adm-row, .pay-method, .sc-card, .addon-card, .price-details, .buyer-box, .dl-banner.big, .notice, .site-footer, .demo-banner) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}