/**
 * ClassiPress Dark Switcher - Wersja PRO / Modern UI
 * Design: High-End SaaS look
 */

:root {
  /* --- PALETA KOLORÓW MODERN DARK (Blue-Grey Slate) --- */
  /* Główne tło - bardzo ciemny granat/szary, nie czarny - nie męczy oczu */
  --cpds-bg: #0f172a; 
  /* Tło elementów (karty, widgety) - nieco jaśniejsze */
  --cpds-surface: #1e293b;
  /* Tło elementów interaktywnych / inputów */
  --cpds-surface-highlight: #334155;
  
  /* Tekst */
  --cpds-text: #f1f5f9;       /* Prawie biały, czytelny */
  --cpds-text-dim: #94a3b8;   /* Szary dla opisów, dat */
  
  /* Obramowania - delikatne, półprzezroczyste */
  --cpds-border: rgba(148, 163, 184, 0.15);
  
  /* Akcent (pobierany z PHP lub domyślny turkusowy neon) */
  --cpds-accent-glow: rgba(31, 214, 205, 0.25); /* Poświata akcentu */
  
  /* Cienie - klucz do efektu 3D */
  --cpds-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --cpds-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* --- Globalna Animacja Przejścia (Smooth Transition) --- */
html, body, .site-header, .card, .widget, .listing-item, input, a {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease !important;
}

/* --- 1. GŁÓWNA STRUKTURA --- */

html.cp-dark, 
.cp-dark body {
  background-color: var(--cpds-bg) !important;
  color: var(--cpds-text);
  scrollbar-color: var(--cpds-surface) var(--cpds-bg); /* Firefox scrollbar */
}

/* Scrollbar dla Webkit (Chrome/Safari) */
.cp-dark ::-webkit-scrollbar { width: 10px; }
.cp-dark ::-webkit-scrollbar-track { background: var(--cpds-bg); }
.cp-dark ::-webkit-scrollbar-thumb { background: var(--cpds-surface-highlight); border-radius: 5px; }

/* Główne kontenery */
.cp-dark .site, 
.cp-dark .site-content,
.cp-dark .off-canvas-content,
.cp-dark .wrapper,
.cp-dark #main {
  background-color: var(--cpds-bg) !important;
}

/* --- 2. NOWOCZESNY NAGŁÓWEK (Glassmorphism) --- */

.cp-dark .site-header,
.cp-dark .top-bar,
.cp-dark .site-branding {
  background-color: rgba(15, 23, 42, 0.85) !important; /* Półprzezroczystość */
  backdrop-filter: blur(12px) !important; /* Efekt rozmycia tła pod spodem */
  border-bottom: 1px solid var(--cpds-border) !important;
  position: sticky; /* Opcjonalne: przykleja nagłówek dla efektu pro */
  top: 0;
  z-index: 999;
}

.cp-dark .top-bar ul, 
.cp-dark .top-bar .menu {
  background: transparent !important;
}

/* Linki w menu */
.cp-dark .main-menu > li > a,
.cp-dark .top-bar-right a {
  color: var(--cpds-text) !important;
  font-weight: 500;
}
.cp-dark .main-menu > li > a:hover {
  color: var(--cpds-link) !important;
  text-shadow: 0 0 8px var(--cpds-accent-glow); /* Świecący tekst */
}

/* Dropdown menu */
.cp-dark .dropdown.menu .is-dropdown-submenu {
  background: var(--cpds-surface) !important;
  border: 1px solid var(--cpds-border);
  box-shadow: var(--cpds-shadow-hover);
  border-radius: 8px;
  padding: 5px;
}

/* --- 3. KARTY, OGŁOSZENIA I WIDGETY (Efekt PRO) --- */

.cp-dark .card,
.cp-dark .panel,
.cp-dark .widget,
.cp-dark .listing-item,
.cp-dark .post-block,
.cp-dark .box, 
.cp-dark .content-wrap,
.cp-dark .entry-content,
.cp-dark .comment-list li {
  background-color: var(--cpds-surface) !important;
  border: 1px solid var(--cpds-border) !important;
  border-radius: 12px !important; /* Nowoczesne zaokrąglenia */
  box-shadow: var(--cpds-shadow-card) !important;
  color: var(--cpds-text) !important;
  margin-bottom: 24px;
}

/* Hover effect na ogłoszenia - element "interaktywny" */
.cp-dark .listing-item:hover,
.cp-dark .post-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--cpds-shadow-hover) !important;
  border-color: var(--cpds-link) !important;
}

/* Tytuły */
.cp-dark h1, .cp-dark h2, .cp-dark h3, .cp-dark h4, .cp-dark .widget-title {
  color: #fff !important;
  letter-spacing: -0.02em; /* Nowoczesna typografia */
}

/* Ceny */
.cp-dark .price, 
.cp-dark .amount {
  color: var(--cpds-link) !important;
  font-weight: bold;
  background: rgba(31, 214, 205, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

/* --- 4. FORMULARZE I INPUTY --- */

.cp-dark input[type="text"],
.cp-dark input[type="email"],
.cp-dark input[type="password"],
.cp-dark textarea, 
.cp-dark select,
.cp-dark .search-field {
  background-color: var(--cpds-bg) !important;
  border: 1px solid var(--cpds-surface-highlight) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 15px;
}

.cp-dark input:focus, 
.cp-dark textarea:focus {
  border-color: var(--cpds-link) !important;
  box-shadow: 0 0 0 3px var(--cpds-accent-glow) !important;
  outline: none;
}

/* Przyciski */
.cp-dark button, 
.cp-dark .button, 
.cp-dark input[type="submit"],
.cp-dark .search-submit {
  background: var(--cpds-link) !important;
  color: #0f172a !important; /* Ciemny tekst na jasnym przycisku dla kontrastu */
  font-weight: 700;
  border-radius: 99px !important; /* Pills shape */
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px var(--cpds-accent-glow);
}
.cp-dark button:hover, 
.cp-dark .button:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* --- 5. DETALE I DODATKI --- */

/* Obrazki - lekko przyciemnione, żeby nie raziły w nocy */
.cp-dark img {
  filter: brightness(0.9);
  transition: filter 0.3s;
}
.cp-dark img:hover {
  filter: brightness(1);
}

/* Metadane (daty, autorzy) */
.cp-dark .post-meta, 
.cp-dark .entry-footer,
.cp-dark .breadcrumbs {
  color: var(--cpds-text-dim) !important;
  font-size: 0.9em;
}
.cp-dark .post-meta i {
  color: var(--cpds-link);
}

/* Stopka */
.cp-dark .site-footer {
  background-color: var(--cpds-bg) !important;
  border-top: 1px solid var(--cpds-border);
  margin-top: 40px;
}

/* Tabela */
.cp-dark table {
  background: var(--cpds-surface);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--cpds-border);
}
.cp-dark th {
  background: var(--cpds-surface-highlight);
  color: #fff;
}
.cp-dark td {
  border-bottom: 1px solid var(--cpds-border);
}

/* Mapa - odwrócenie kolorów dla map Google/innych (eksperymentalne) */
.cp-dark .map-canvas iframe,
.cp-dark iframe[src*="google.com/maps"] {
  filter: invert(90%) hue-rotate(180deg) contrast(90%);
}