/* Volkin Reborn — Dark Mode + Print Styles */

/* ========================================
   17. DARK MODE
   ======================================== */
.dark {
  /* Nadpisanie zmiennych dla dark mode */
  --bg-global: #0f0f14;
  --bg-global-secondary: #1a1a24;

  --glass-bg: rgba(30, 30, 40, 0.7);
  --glass-bg-hover: rgba(40, 40, 55, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --navbar-bg: rgba(45, 45, 60, 0.6);
  --navbar-bg-scrolled: rgba(40, 40, 55, 0.75);
  --navbar-bg-hover: rgba(50, 50, 65, 0.65);
  --navbar-border: rgba(255, 255, 255, 0.1);
  --navbar-shadow:
    0 4px 30px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 40px rgba(68, 136, 239, 0.1);

  --main-window-bg: rgba(25, 25, 35, 0.5);
  --main-window-border: rgba(255, 255, 255, 0.08);

  /* Hover glow — dark mode: mocniejszy glow bo ciemne tło */
  --hover-border-lg: rgba(var(--hover-glow-color), 0.3);
  --hover-border-sm: rgba(var(--hover-glow-color), 0.35);
  --hover-border-btn: rgba(var(--hover-glow-color), 0.35);
  --hover-glow-lg:
    0 0 25px rgba(var(--hover-glow-color), 0.18),
    0 0 55px rgba(var(--hover-glow-color), 0.08);
  --hover-glow-sm:
    0 0 20px rgba(var(--hover-glow-color), 0.2),
    0 0 45px rgba(var(--hover-glow-color), 0.1);
  --hover-glow-btn:
    0 0 18px rgba(var(--hover-glow-color), 0.22),
    0 0 40px rgba(var(--hover-glow-color), 0.1);

  --inner-window-bg: rgba(35, 35, 50, 0.55);
  --inner-window-bg-hover: rgba(38, 38, 53, 0.72);
  --inner-window-border: rgba(255, 255, 255, 0.1);
  --inner-window-border-hover: var(--hover-border-sm);

  --glow-outer: 0 0 40px rgba(68, 136, 239, 0.1);
  --glow-outer-hover: 0 0 60px rgba(68, 136, 239, 0.2);

  /* Nadpisanie shadow z subtelnymi inset highlights */
  --main-window-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 60px rgba(68, 136, 239, 0.1);

  --inner-window-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --inner-window-shadow-hover:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--hover-glow-sm);

  --btn-bg-hover: rgba(30, 30, 45, 0.8);
  --btn-border-hover: var(--hover-border-btn);
  --btn-shadow:
    0 2px 12px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --btn-shadow-hover:
    0 2px 12px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--hover-glow-btn);

  --popup-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Kolory tekstu w dark mode */
.dark body {
  color: #e5e5e5;
}

.dark .navbar__logo {
  color: #ffffff;
}
/* Logo img dark mode handled by .navbar__logo-img--dark/--light classes */

.dark .navbar__link {
  color: #a0a0a0;
}

.dark .navbar__link:hover,
.dark .navbar__link--active {
  color: #ffffff;
}

/* Slider w dark mode */
.dark .navbar__slider {
  background: rgba(255, 255, 255, 0.1);
}

/* Shop dots w dark mode */
.dark .shop-dots__dot {
  background: rgba(255, 255, 255, 0.3);
}

.dark .shop-dots__dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Gdy kursor jest w menu, ukryj efekt active (dark mode) */
.dark .navbar__menu-wrapper:hover .navbar__link--active:not(:hover) {
  color: #a0a0a0;
}

.dark .navbar__menu-wrapper:hover .navbar__link:hover {
  color: #ffffff;
}

/* Hamburger w dark mode */
.dark .navbar__hamburger-line {
  background: #e5e5e5;
}

/* Navbar hover w dark mode - subtelny inset */
.dark .navbar:hover,
.dark .navbar--scrolled:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--glow-outer);
}

.dark .section-title {
  color: #ffffff;
}

.dark .section-subtitle {
  color: #a0a0a0;
}

/* Karty i okienka */
.dark .inner-window h4,
.dark .inner-window h3 {
  color: #ffffff;
}

.dark .inner-window p {
  color: #9ca3af;
}

.dark .inner-window--form {
  background: rgba(35, 35, 50, 0.95);
}

/* Inputy formularza w dark mode (bez !important — inline styles usunięte) */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark textarea {
  background: rgba(25, 25, 35, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e5e5e5;
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="tel"]::placeholder,
.dark textarea::placeholder {
  color: #6b7280;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px 2px rgba(68, 136, 239, 0.25);
}

/* RODO checkbox */
.rodo-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 0.1rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.rodo-checkbox:checked {
  background: linear-gradient(135deg, #4488EF, #6B8BFF);
  border-color: #4488EF;
}

.rodo-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rodo-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 136, 239, 0.25);
}

/* RODO link */
.rodo-link {
  color: #8b5cf6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.rodo-link:hover {
  color: #7c3aed;
}

/* Dark mode */
.dark .rodo-container label {
  color: #9ca3af;
}

.dark .rodo-checkbox {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.dark .rodo-checkbox:checked {
  background: linear-gradient(135deg, #4488EF, #6B8BFF);
  border-color: #4488EF;
}

.dark .rodo-link {
  color: #A8C4FF;
}

.dark .rodo-link:hover {
  color: #CACFFF;
}

/* Zaznaczenie tekstu w dark mode */
.dark .contact-card-value::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Nadpisanie hover states z subtelnymi inset highlights */
.dark .main-window:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--hover-glow-lg);
  border-color: var(--hover-border-lg);
}

.dark .main-window--gradient {
  box-shadow:
    0 12px 50px rgba(68, 136, 239, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dark .main-window--gradient:hover {
  box-shadow:
    0 16px 60px rgba(68, 136, 239, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Page fade w dark mode */
.dark .page-fade-top {
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 20, 0.8) 0%,
    rgba(15, 15, 20, 0.5) 20%,
    rgba(15, 15, 20, 0.2) 50%,
    rgba(15, 15, 20, 0) 100%
  );
}

.dark .page-fade-bottom {
  background: linear-gradient(
    to top,
    rgba(15, 15, 20, 0.8) 0%,
    rgba(15, 15, 20, 0.5) 20%,
    rgba(15, 15, 20, 0.2) 50%,
    rgba(15, 15, 20, 0) 100%
  );
}

/* Footer w dark mode */
.dark .footer {
  background: linear-gradient(180deg, #0a0a12 0%, #050508 100%);
}

.dark .footer::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(68, 136, 239, 0.3) 50%,
    transparent 100%
  );
}

.dark .footer__social-link {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .footer__contact-icon {
  background: rgba(68, 136, 239, 0.08);
}

/* Scrollbar w dark mode */
.dark::-webkit-scrollbar-track {
  background: transparent;
}

.dark::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7191F8 0%, #4488EF 30%, #6B8BFF 70%, #2656DC 100%);
}

/* Płynne przejście między trybami */
/* Ograniczone do kluczowych elementów dla lepszej wydajności */
html.theme-transition .navbar,
html.theme-transition .main-window,
html.theme-transition .inner-window,
html.theme-transition .btn,
html.theme-transition .popup-menu,
html.theme-transition body,
html.theme-transition .section-title,
html.theme-transition .section-subtitle,
html.theme-transition input,
html.theme-transition textarea {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}


/* ========================================
   EKSTRAKCJA INLINE STYLES
   Klasy zastępujące powtarzające się inline style
   ======================================== */


/* ========================================
   CSS FALLBACK: prefers-color-scheme
   Działa gdy JS jest wyłączony
   ======================================== */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not([data-theme-set]) {
    --bg-global: #0f0f14;
    --bg-global-secondary: #1a1a24;
    --glass-bg: rgba(30, 30, 40, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --main-window-bg: rgba(25, 25, 35, 0.5);
    --inner-window-bg: rgba(35, 35, 50, 0.55);
  }
}


/* ========================================
   PRINT STYLES
   Czytelny wydruk bez efektów wizualnych
   ======================================== */
@media print {
  /* Ukryj elementy interaktywne i dekoracyjne */
  .navbar,
  .glow-effect,
  .scroll-top-btn,
  .page-fade-top,
  .page-fade-bottom,
  .mobile-menu-overlay,
  .navbar__hamburger,
  .navbar__theme-toggle,
  .floating-badge,
  .shop-dots {
    display: none !important;
  }

  /* Reset tła i cieni */
  body,
  .bg-global {
    background: white !important;
    color: black !important;
  }

  .main-window,
  .inner-window {
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  /* Tekst czarny */
  .section-title,
  .section-subtitle,
  .feature-title,
  .feature-desc,
  .stat-value,
  .stat-label,
  .testimonial-text,
  .testimonial-date,
  .testimonial-tag,
  .testimonial-buyer-label {
    color: black !important;
  }

  /* Pokaż URL-e linków */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Marquee — statyczny */
  .marquee__track {
    animation: none !important;
  }

  .marquee__content[aria-hidden="true"] {
    display: none !important;
  }
}