/* ==========================================================
   DEMERTZIS TYRES — DARK THEME LAYER
   Μπαίνει πάνω από το υπάρχον design χωρίς να αλλάζει layout.
   Για επιστροφή στο ανοιχτό θέμα: αφαιρέστε την κλάση
   "dark-ui" από το <html> στο index.html.
   ========================================================== */

html.dark-ui {
  --d-page: #070d13;      /* φόντο σελίδας */
  --d-surface: #0d1620;   /* ενότητες & κάρτες */
  --d-raised: #131e2a;    /* κάρτα μέσα σε κάρτα, dropdowns */
  --d-raised-2: #1a2633;  /* hover / 3ο επίπεδο */
  --d-inset: #09111a;     /* inputs μέσα σε modals */
  --d-line: #1c2836;      /* διαχωριστικά */
  --d-line-2: #2a3848;    /* πιο έντονα περιγράμματα */
  --d-line-3: #3b4b5e;    /* hover περιγράμματα */
  --d-text-1: #f3f5f8;
  --d-text-2: #d5dbe3;
  --d-text-3: #b3bcc8;
  --d-text-4: #8e99a8;
  --d-yellow: #f7c310;
  color-scheme: dark;
  background-color: var(--d-page);
}

/* ---------- Φόντα ---------- */
html.dark-ui body,
html.dark-ui .bg-\[\#f4f5f7\] { background-color: var(--d-page); color: var(--d-text-2); }

html.dark-ui .bg-white { background-color: var(--d-surface); }
html.dark-ui .bg-white .bg-white { background-color: var(--d-raised); }
html.dark-ui .bg-white .bg-white .bg-white { background-color: var(--d-raised-2); }

html.dark-ui .bg-gray-50 { background-color: var(--d-inset); }
html.dark-ui .bg-gray-100 { background-color: var(--d-raised); }
html.dark-ui .bg-gray-200 { background-color: var(--d-raised-2); }

html.dark-ui .hover\:bg-gray-100:hover { background-color: var(--d-raised-2); }
html.dark-ui .hover\:bg-gray-200:hover { background-color: #223142; }
html.dark-ui .bg-yellow-50,
html.dark-ui .hover\:bg-yellow-50:hover { background-color: rgba(247, 195, 16, 0.10); }
html.dark-ui .hover\:bg-yellow-100:hover { background-color: rgba(247, 195, 16, 0.18); }

/* Navbar & ενότητες: λεπτή φωτεινή γραμμή για βάθος */
html.dark-ui nav.bg-white { background-color: #0a121a; box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px -12px rgba(0,0,0,0.8); }
html.dark-ui section.bg-white { background-color: var(--d-surface); }

/* ---------- Κείμενο ---------- */
html.dark-ui .text-gray-900 { color: var(--d-text-1); }
html.dark-ui .text-gray-800 { color: var(--d-text-2); }
html.dark-ui .text-gray-700 { color: var(--d-text-3); }
html.dark-ui .text-gray-600 { color: var(--d-text-4); }
html.dark-ui .text-gray-500 { color: #7f8b9b; }
html.dark-ui .text-yellow-700 { color: var(--d-yellow); }
html.dark-ui .hover\:text-black:hover { color: var(--d-yellow); }
html.dark-ui .group:hover .group-hover\:text-black { color: #ffffff; }

/* Σε κίτρινα κουμπιά/badges το κείμενο μένει σκούρο */
html.dark-ui :is(.bg-\[\#f7c310\], .bg-yellow-400, .bg-yellow-500, .bg-racing-yellow, .bg-brand-yellow, .filter-pill.active)
  :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) { color: #111; }
html.dark-ui :is(.bg-\[\#f7c310\], .bg-yellow-400, .bg-yellow-500, .bg-racing-yellow, .bg-brand-yellow).text-gray-900,
html.dark-ui :is(.bg-\[\#f7c310\], .bg-yellow-400, .bg-yellow-500, .bg-racing-yellow, .bg-brand-yellow).text-gray-800 { color: #111; }

/* ---------- Περιγράμματα ---------- */
html.dark-ui .border-gray-100 { border-color: var(--d-line); }
html.dark-ui .border-gray-200 { border-color: var(--d-line); }
html.dark-ui .border-gray-300 { border-color: var(--d-line-2); }
html.dark-ui .border-yellow-200 { border-color: rgba(247, 195, 16, 0.35); }
html.dark-ui .hover\:border-gray-300:hover,
html.dark-ui .hover\:border-gray-400:hover,
html.dark-ui .hover\:border-gray-500:hover { border-color: var(--d-line-3); }
/* .border χωρίς χρώμα (Tailwind default = ανοιχτό γκρι) */
html.dark-ui :is(.border, .border-t, .border-b, .border-l, .border-r, .border-2):not([class*="border-gray"]):not([class*="border-yellow"]):not([class*="border-["]):not([class*="border-brand"]):not([class*="border-transparent"]):not([class*="border-red"]):not([class*="border-green"]) {
  border-color: var(--d-line);
}
html.dark-ui hr { border-color: var(--d-line); }

/* ---------- Φόρμες ---------- */
html.dark-ui :is(input, select, textarea):is(.bg-white, .bg-gray-50) {
  color: var(--d-text-1);
}
html.dark-ui select option { background-color: var(--d-raised); color: var(--d-text-1); }
html.dark-ui .placeholder-gray-400::placeholder,
html.dark-ui input::placeholder { color: #6c7889; }
html.dark-ui :is(input, select, textarea):focus { border-color: var(--d-yellow); }
/* Αναζήτηση στο header: κρατάει το «νησί» του */
html.dark-ui header .bg-white { background-color: #131e2a; }

/* ---------- Κάρτες προϊόντων ---------- */
html.dark-ui .tilt-card { box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; }
html.dark-ui .tilt-card:hover {
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(247, 195, 16, 0.35), 0 0 18px rgba(247, 195, 16, 0.10);
}
html.dark-ui .hover\:shadow-xl:hover,
html.dark-ui .hover\:shadow-md:hover { --tw-shadow-color: rgba(0,0,0,0.6); }

/* Οι φωτογραφίες ελαστικών/ζαντών έχουν λευκό φόντο: τις βάζουμε σε
   «studio» πλαίσιο ώστε να δείχνει σκόπιμο και όχι λευκό κουτί */
html.dark-ui :is(div, picture):has(> img:is([src*="assets/tyres/"], [src*="assets/rim"], [src*="assets/offers/"]):not(.bg-white)) {
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #eef1f4 55%, #d9dee4 100%);
}
html.dark-ui .aspect-square:has(> picture) {
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #eef1f4 55%, #d9dee4 100%);
  border-radius: 8px;
}
html.dark-ui :is(div, picture):has(> img) > img:is([src*="assets/tyres/"], [src*="assets/rim"], [src*="assets/offers/"]):not(.bg-white) {
  mix-blend-mode: multiply;
}
html.dark-ui .bg-gradient-to-b.from-gray-50.to-gray-100 {
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #eef1f4 55%, #d9dee4 100%);
}
html.dark-ui img.bg-white { background-color: #ffffff; }

/* ---------- Custom κλάσεις από styles.css ---------- */
html.dark-ui .filter-pill:hover { background-color: rgba(247, 195, 16, 0.12); color: var(--d-yellow); }
html.dark-ui .unit-toggle-btn.active { background-color: var(--d-yellow); color: #111; border-color: var(--d-yellow); }
html.dark-ui .toast-msg { background-color: var(--d-raised); border: 1px solid var(--d-line-2); border-left: 4px solid var(--d-yellow); }

/* Brand marquee (SVG λογότυπα): λευκά πάνω στο σκούρο */
html.dark-ui .brand-item img { filter: brightness(0) invert(1); }

/* ---------- Modals & cart ---------- */
html.dark-ui :is(#cart-drawer, #product-detail-modal, #booking-modal, #vehicle-modal, #tire-guide-modal, #checkout-modal) {
  background-color: var(--d-surface);
  border: 1px solid var(--d-line-2);
  color: var(--d-text-2);
}
html.dark-ui #cart-drawer { border-width: 0 0 0 1px; }

/* Λογότυπα μαρκών μέσα στις κάρτες προσφορών: λευκά για αντίθεση */
html.dark-ui .tilt-card img[src*="assets/brands/"] { filter: brightness(0) invert(1); opacity: 0.92; }

/* Τα mockup banners/tiles έχουν ανοιχτόχρωμες άκρες από το crop: τις κρύβουμε */
html.dark-ui img:is([src*="mockup_cat_"], [src*="mockup_banner_"]) { transform: scale(1.035); }

/* Η κλάση bg-racing-yellow δεν ορίζεται στο Tailwind config: χωρίς αυτό
   τα κουμπιά «Προσθήκη στο καλάθι» χάνονται στο σκούρο φόντο */
.bg-racing-yellow { background-color: #f7c310; color: #111; }
.bg-racing-yellow:hover { background-color: #e0b00e; }

/* Φωτογραφίες προϊόντων με λευκό φόντο: χωρίς drop-shadow (δημιουργούσε «κουτί») */
html.dark-ui :is(div, picture):has(> img) > img:is([src*="assets/tyres/"], [src*="assets/rim"], [src*="assets/offers/"], [src*="googleusercontent"], [src*="assets/accessories/"]):not(.bg-white) {
  filter: none;
  mix-blend-mode: multiply;
}
html.dark-ui :is(div, picture):has(> img:is([src*="googleusercontent"], [src*="assets/accessories/"]):not(.bg-white)) {
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #eef1f4 55%, #d9dee4 100%);
}