/**
 * Szata graficzna „Szkło” — platforma NovaRent (nowa-rent.eu).
 * Obejmuje stronę główną huba, panel zarządzania (/admin/) i konto klienta
 * (/novarent/). Włączana, gdy w panelu wybrano „Szkło” (ustawienie
 * `hub_appearance`); strony dodają wtedy klasę `glass` do <html>.
 * Klasyczny wygląd nie dostaje żadnej z tych reguł.
 * Wydruki/PDF resetują efekt w @media print.
 */
html.glass body {
  background-color: #e9eff8;
  background-image:
    radial-gradient(1000px 700px at 6% -8%, rgba(245, 158, 11, 0.30), transparent 62%),
    radial-gradient(820px 600px at 98% -4%, rgba(56, 189, 248, 0.30), transparent 64%),
    radial-gradient(900px 680px at 46% 34%, rgba(129, 140, 248, 0.22), transparent 66%),
    radial-gradient(820px 620px at 82% 86%, rgba(45, 212, 191, 0.16), transparent 66%),
    linear-gradient(165deg, #f8fafc 0%, #e6edf7 52%, #eef2f9 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
}

/* ── Nagłówki i menu ─────────────────────────────────────────────── */
html.glass .topnav {
  background-color: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, 0.72) !important;
}

html.glass .admin-nav {
  background-color: rgba(15, 23, 42, 0.86) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

html.glass .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Karty i panele ──────────────────────────────────────────────── */
html.glass .guide,
html.glass .faq-item,
html.glass .step,
html.glass .shot,
html.glass .chat-bubble,
html.glass .aud,
html.glass .cross-promo .box,
html.glass .mock-progress,
html.glass .mock-card,
html.glass .task-row,
html.glass .day-chip-demo,
html.glass .panel,
html.glass .table-wrap,
html.glass .attention-list li,
html.glass .pager a,
html.glass .pager span.pg,
html.glass .link-card,
html.glass .card {
  background-color: rgba(255, 255, 255, 0.44) !important;
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.26) 100%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px -20px rgba(15, 23, 42, 0.45) !important;
}

/* Sekcje z białym tłem na stronach marketingowych */
html.glass .trust,
html.glass .audience,
html.glass .gallery,
html.glass .cross-promo {
  background-color: rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Podglądy interfejsu („mock”, paragon) — czytelniejsze, mniej przezroczyste */
html.glass .mock,
html.glass .receipt {
  background-color: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

html.glass .mock-head,
html.glass .mock-bar { background-color: rgba(255, 255, 255, 0.55) !important; }

/* ── Tabele i formularze ─────────────────────────────────────────── */
html.glass table.data th {
  background-color: rgba(255, 255, 255, 0.58) !important;
}
html.glass table.data tr:hover td { background-color: rgba(255, 255, 255, 0.42) !important; }

html.glass input[type=text],
html.glass input[type=email],
html.glass input[type=password],
html.glass input[type=url],
html.glass input[type=number],
html.glass select,
html.glass textarea {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

html.glass .btn-ghost,
html.glass .btn-ghost-nav {
  background-color: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

html.glass .tile {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

/* ── Dostępność i starsze przeglądarki ───────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  html.glass .guide,
  html.glass .faq-item,
  html.glass .step,
  html.glass .shot,
  html.glass .chat-bubble,
  html.glass .aud,
  html.glass .cross-promo .box,
  html.glass .panel,
  html.glass .table-wrap,
  html.glass .attention-list li,
  html.glass .link-card,
  html.glass .card {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
  }
  html.glass input[type=text],
  html.glass input[type=email],
  html.glass input[type=password],
  html.glass select,
  html.glass textarea { background-color: rgba(255, 255, 255, 0.94) !important; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.glass .guide,
  html.glass .faq-item,
  html.glass .step,
  html.glass .shot,
  html.glass .chat-bubble,
  html.glass .aud,
  html.glass .cross-promo .box,
  html.glass .panel,
  html.glass .table-wrap,
  html.glass .attention-list li,
  html.glass .link-card,
  html.glass .card { background-color: rgba(255, 255, 255, 0.92) !important; }
}

@media print {
  html.glass body { background: #fff !important; background-image: none !important; }
  html.glass .guide,
  html.glass .faq-item,
  html.glass .step,
  html.glass .shot,
  html.glass .chat-bubble,
  html.glass .aud,
  html.glass .cross-promo .box,
  html.glass .panel,
  html.glass .table-wrap,
  html.glass .attention-list li,
  html.glass .link-card,
  html.glass .card,
  html.glass .mock,
  html.glass .receipt {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: #e1e0d9 !important;
  }
}