/* dark-mode-fixes.css — pizzacalculator.pro
   All dark mode overrides and hardcoded-color fixes.
   Import AFTER the main stylesheet on every page.

   Dark mode token reference (set in [data-theme="dark"] in style.css):
     --c-bg:            #0F0C08
     --c-surface:       #1A140E
     --c-surface-tint:  #211910
     --c-border:        #2A2016
     --c-border-strong: #3A2E1E
     --c-text:          #F0E8DC
     --c-text-muted:    #C4A882
     --c-text-faint:    #A89070
     --c-pill-idle:     #261D12
     --c-primary-light: #3B2410
     --c-primary:       #C4621A  (unchanged)
     --c-primary-dark:  #A34F12  (unchanged)
*/

/* ══════════════════════════════════════════════════════════════
   ── 1. INPUT FIELDS: border, background, text in dark mode ──
   Fixes: number-input, number-input--sm, number-input--xs,
          price-input-wrap / price-currency, tax-tip inputs
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .number-input {
  background: #2A2218;
  border-color: var(--c-border-strong);
  color: #F4AC70;
}
[data-theme="dark"] .number-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(196,98,26,.18);
  color: #F4AC70;
}
[data-theme="dark"] .number-input--xs {
  background: #2A2218;
  border-color: var(--c-border);
  color: var(--c-text);
}
[data-theme="dark"] .number-input--xs:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(196,98,26,.12);
}
[data-theme="dark"] .tax-tip-input-wrap input {
  background: #2A2218;
  border-color: var(--c-border);
  color: var(--c-text);
}
[data-theme="dark"] .tax-tip-section {
  background: rgba(255,255,255,.04);
  border-color: var(--c-border);
}

/* ── 2. RANGE SLIDERS ───────────────────────────────────────── */
[data-theme="dark"] .range-slider {
  background: linear-gradient(
    to right,
    var(--c-primary) var(--fill-pct, 9.09%),
    #2A2218 var(--fill-pct, 9.09%)
  );
}
[data-theme="dark"] .range-slider::-webkit-slider-thumb {
  border-color: #1A140E;
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
[data-theme="dark"] .range-slider::-moz-range-thumb {
  border-color: #1A140E;
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ── 3. SELECT DROPDOWNS ────────────────────────────────────── */
[data-theme="dark"] select {
  background: #2A2218;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
[data-theme="dark"] select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(196,98,26,.15);
  outline: none;
}

/* ── 4. TABLE BORDERS AND ALTERNATING ROWS ──────────────────── */
/* Main ref-table (index.html) */
[data-theme="dark"] .table-wrap {
  border-color: var(--c-border);
}
[data-theme="dark"] .ref-table td {
  border-bottom-color: var(--c-border);
  color: var(--c-text-muted);
}
[data-theme="dark"] .ref-table tbody tr:nth-child(even) td {
  background: var(--c-surface-tint);
}

/* quick-ref-table (index.html reference chart) */
[data-theme="dark"] .quick-table-box {
  border-color: var(--c-border);
}
[data-theme="dark"] .quick-table-caption {
  background: var(--c-bg);
  border-bottom-color: var(--c-border);
  color: var(--c-text-faint);
}
[data-theme="dark"] .quick-ref-table tbody tr {
  border-bottom-color: var(--c-border);
}
[data-theme="dark"] .quick-ref-table tbody td {
  color: var(--c-text-muted);
}

/* compare-table (compare pages) */
[data-theme="dark"] .compare-table thead tr {
  background: #2A2016;
}
[data-theme="dark"] .compare-table thead th {
  color: var(--c-text-muted);
}

/* ── 5. FOOTER BACKGROUND AND TEXT ──────────────────────────── */
/* .site-footer and .legal-footer both use hardcoded #0D0A06 —
   already very dark, but override to keep contrast in dark theme */
[data-theme="dark"] .site-footer {
  background: #080604;
}
[data-theme="dark"] .legal-footer {
  background: #080604;
}

/* ── 6. CALCULATOR RESULT OUTPUT CARDS ──────────────────────── */
/* .calc-output and inner stat-items */
[data-theme="dark"] .calc-output {
  background: linear-gradient(170deg, #241A0F 0%, #1E1609 60%, #180F05 100%);
  border-top-color: rgba(196,98,26,.12);
}
[data-theme="dark"] .stat-item {
  background: rgba(42,34,24,0.85);
  border-color: rgba(255,255,255,.05);
}
[data-theme="dark"] .stat-item--accent {
  background: rgba(42,34,24,0.85);
  border-color: rgba(255,255,255,.05);
}
[data-theme="dark"] .output-recommendation {
  background: rgba(42,34,24,0.85);
  border-color: rgba(196,98,26,.2);
  color: var(--c-text-muted);
}
[data-theme="dark"] .output-recommendation strong {
  color: var(--c-text);
}
/* stat-item (calorie/cost — the white rgba bg is hardcoded) */
[data-theme="dark"] .output-stats .stat-item {
  background: rgba(42,34,24,0.85);
  box-shadow: none;
}

/* ── 7. BUDGET MODE INPUT FIELD ──────────────────────────────── */
/* .price-input-wrap + .price-currency — hardcoded light bg in CSS */
[data-theme="dark"] .price-input-wrap {
  background: #2A2218;
  border-color: var(--c-border);
}
[data-theme="dark"] .price-input-wrap:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(196,98,26,.15);
}
[data-theme="dark"] .price-currency {
  background: rgba(196,98,26,.10);
  border-right-color: var(--c-border);
  color: var(--c-text-faint);
}
[data-theme="dark"] .price-input-wrap .number-input {
  background: #2A2218;
  color: var(--c-primary);
}

/* ── 8. PRESET CARDS ─────────────────────────────────────────── */
[data-theme="dark"] .presets-bar {
  background: rgba(196,98,26,.06);
  border-color: rgba(196,98,26,.15);
}
[data-theme="dark"] .preset-chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .preset-chip__load {
  color: var(--c-text);
  background: transparent;
}
[data-theme="dark"] .preset-chip__load:hover {
  background: var(--c-primary);
  color: #fff;
}
[data-theme="dark"] .preset-chip__del {
  border-left-color: var(--c-border);
  color: var(--c-text-faint);
}
[data-theme="dark"] .preset-chip__del:hover {
  background: rgba(200,0,0,.2);
  color: #ff8080;
}

/* ── 9. ORDER SUMMARY CARD ───────────────────────────────────── */
/* variety-chip items (order breakdown) */
[data-theme="dark"] .variety-chip {
  background: rgba(30,63,171,.12);
  border-color: rgba(30,63,171,.25);
  border-left-color: #7B96D9;
}
[data-theme="dark"] .variety-chip__count {
  color: #9EB3F0;
}
[data-theme="dark"] .variety-chip__label {
  color: var(--c-text-faint);
}
[data-theme="dark"] .variety-chip__cost {
  background: rgba(255,255,255,.08);
  color: var(--c-text-muted);
}
/* Color-coded varieties in dark mode */
[data-theme="dark"] .variety-chip--0 {
  border-left-color: #F59E0B;
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.2);
}
[data-theme="dark"] .variety-chip--0 .variety-chip__count { color: #FCD34D; }
[data-theme="dark"] .variety-chip--0 .variety-chip__label { color: var(--c-text-faint); }
[data-theme="dark"] .variety-chip--1 {
  border-left-color: #22C55E;
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.2);
}
[data-theme="dark"] .variety-chip--1 .variety-chip__count { color: #86EFAC; }
[data-theme="dark"] .variety-chip--1 .variety-chip__label { color: var(--c-text-faint); }
[data-theme="dark"] .variety-chip--2 {
  border-left-color: #F87171;
  background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.2);
}
[data-theme="dark"] .variety-chip--2 .variety-chip__count { color: #FCA5A5; }
[data-theme="dark"] .variety-chip--2 .variety-chip__label { color: var(--c-text-faint); }
[data-theme="dark"] .variety-chip--3 {
  border-left-color: #FB923C;
  background: rgba(251,146,60,.1);
  border-color: rgba(251,146,60,.2);
}
[data-theme="dark"] .variety-chip--3 .variety-chip__count { color: #FDBA74; }
[data-theme="dark"] .variety-chip--3 .variety-chip__label { color: var(--c-text-faint); }

/* ── 10. CALORIE ESTIMATE TEXT ───────────────────────────────── */
/* .stat-item--accent is the calories card — hardcoded rgba white bg */
[data-theme="dark"] .stat-item--accent {
  background: rgba(42,34,24,0.85) !important;
  border-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .stat-item--accent .stat-value {
  color: var(--c-text);
}
[data-theme="dark"] .stat-item--accent .stat-label {
  color: var(--c-text-faint);
}

/* ── 11. SOCIAL SHARE BUTTON PANEL ───────────────────────────── */
[data-theme="dark"] .share-panel {
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
[data-theme="dark"] .share-panel[data-arrow="down"]::after {
  border-top-color: var(--c-border);
}
[data-theme="dark"] .share-panel[data-arrow="down"]::before {
  border-top-color: var(--c-surface);
}
[data-theme="dark"] .share-panel[data-arrow="up"]::after {
  border-bottom-color: var(--c-border);
}
[data-theme="dark"] .share-panel[data-arrow="up"]::before {
  border-bottom-color: var(--c-surface);
}
[data-theme="dark"] .share-panel__heading {
  color: var(--c-text-muted);
}
[data-theme="dark"] .share-panel__arrow {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-muted);
}
[data-theme="dark"] .share-panel__arrow:hover {
  background: var(--c-surface-tint);
  color: var(--c-text);
}
[data-theme="dark"] .share-social-btn {
  color: var(--c-text-muted);
}
[data-theme="dark"] .share-social-btn:hover {
  background: var(--c-surface-tint);
  color: var(--c-text);
}
/* Per-platform icon circles — light bg colors are unusable in dark mode */
[data-theme="dark"] .share-social-btn[data-share="copy"]      .share-social-btn__icon { background: rgba(255,255,255,.10); color: #ccc; }
[data-theme="dark"] .share-social-btn[data-share="twitter"]   .share-social-btn__icon { background: rgba(255,255,255,.10); color: #e7e7e7; }
[data-theme="dark"] .share-social-btn[data-share="threads"]   .share-social-btn__icon { background: rgba(255,255,255,.10); color: #e7e7e7; }
[data-theme="dark"] .share-social-btn[data-share="whatsapp"]  .share-social-btn__icon { background: rgba(37,211,102,.15); color: #25D366; }
[data-theme="dark"] .share-social-btn[data-share="facebook"]  .share-social-btn__icon { background: rgba(24,119,242,.15); color: #6BA4F8; }
[data-theme="dark"] .share-social-btn[data-share="telegram"]  .share-social-btn__icon { background: rgba(42,171,238,.15); color: #2AABEE; }
[data-theme="dark"] .share-social-btn[data-share="email"]     .share-social-btn__icon { background: rgba(196,98,26,.15); color: #F4AC70; }
[data-theme="dark"] .share-social-btn[data-share="pinterest"] .share-social-btn__icon { background: rgba(230,0,35,.15); color: #FF6B7A; }
[data-theme="dark"] .share-social-btn[data-share="reddit"]    .share-social-btn__icon { background: rgba(255,69,0,.15); color: #FF7043; }
[data-theme="dark"] .share-social-btn[data-share="linkedin"]  .share-social-btn__icon { background: rgba(10,102,194,.18); color: #5599E8; }
[data-theme="dark"] .share-social-btn[data-share="viber"]     .share-social-btn__icon { background: rgba(115,96,242,.18); color: #A99CF8; }
[data-theme="dark"] .share-social-btn[data-share="sms"]       .share-social-btn__icon { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .share-social-btn[data-share="line"]      .share-social-btn__icon { background: rgba(6,199,85,.15); color: #4ade80; }
[data-theme="dark"] .share-social-btn[data-share="mastodon"]  .share-social-btn__icon { background: rgba(99,100,255,.18); color: #9899FF; }

/* ── 12. CONTACT FORM FIELDS (contact.html) ─────────────────── */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea {
  background: #2A2218;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder,
[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="email"]::placeholder,
[data-theme="dark"] input[type="tel"]::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--c-text-faint);
}
[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(196,98,26,.15);
  outline: none;
}
[data-theme="dark"] label {
  color: var(--c-text-muted);
}

/* ── 13. COOKIE BANNER IN DARK MODE ─────────────────────────── */
/* index.html uses an inline-styled cookie banner — fix its colors */
[data-theme="dark"] #cookie-banner {
  background: #0F0A05 !important;
  border-top-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] #cookie-banner p {
  color: var(--c-text-muted) !important;
}
[data-theme="dark"] #cookie-banner a {
  color: #F4AC70 !important;
}
[data-theme="dark"] #cookie-accept {
  background: var(--c-primary) !important;
}

/* ── 14. HARDCODED WHITE BACKGROUNDS IN OUTPUT COMPONENTS ────── */
/* .stat-item uses rgba(255,255,255,0.8) — hardcoded white */
[data-theme="dark"] .stat-item {
  background: rgba(42,34,24,0.85) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.03) inset !important;
}
/* .output-recommendation uses rgba(255,255,255,0.9) */
[data-theme="dark"] .output-recommendation {
  background: rgba(42,34,24,0.85) !important;
}
/* variety-chip uses rgba(255,255,255,.7) */
[data-theme="dark"] .variety-chip {
  background: rgba(30,63,171,.12) !important;
}

/* ── 15. LEGAL PAGES — notice-box, hero gradient, TOC ──────────
   legal.css uses hardcoded #FFF8F1, #FFF8E7, #F5D87A, #5C4500
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .legal-hero {
  background: linear-gradient(160deg, #1A100A 0%, #150D08 100%);
  border-bottom-color: var(--c-border);
}
[data-theme="dark"] .legal-prose .notice-box {
  background: rgba(228,168,0,.08);
  border-color: rgba(228,168,0,.25);
  border-left-color: rgba(228,168,0,.6);
  color: var(--c-text-muted);
}
[data-theme="dark"] .legal-prose .notice-box strong {
  color: var(--c-text);
}
[data-theme="dark"] .legal-prose h2 {
  border-bottom-color: rgba(196,98,26,.25);
}
[data-theme="dark"] .legal-toc {
  background: var(--c-surface);
  border-color: var(--c-border);
}
[data-theme="dark"] .legal-header {
  background: rgba(15,10,5,0.94);
  border-bottom-color: var(--c-border);
}
[data-theme="dark"] .about-tool {
  background: var(--c-surface);
  border-color: var(--c-border);
}

/* ── 16. COMPARE PAGES — answer-box, vs-card, when-card, etc. ──
   compare.css hardcodes #241A0F, #1D1710, #241A0F for dark      */
[data-theme="dark"] .answer-box {
  background: rgba(196,98,26,.07);
  border-color: rgba(196,98,26,.25);
}
[data-theme="dark"] .vs-card {
  background: #241A0F;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .vs-card--winner {
  border-color: rgba(196,98,26,.65);
}
[data-theme="dark"] .vs-stat {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .when-card {
  background: #241A0F;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .faq-item-c {
  background: #241A0F;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .faq-item-c .faq-ans {
  background: rgba(255,255,255,.03);
}
[data-theme="dark"] .related-card {
  background: #241A0F;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .related-card:hover {
  border-color: rgba(196,98,26,.5);
}
[data-theme="dark"] .hub-card {
  background: #241A0F;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .hub-card:hover {
  border-color: rgba(196,98,26,.5);
}
[data-theme="dark"] .hub-card__meta {
  border-top-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .data-pill {
  background: linear-gradient(135deg, #1D1710 0%, rgba(196,98,26,.08) 100%);
  border-color: rgba(196,98,26,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ── 17. HERO-RATING (visible star widget, index.html) ──────── */
[data-theme="dark"] .hero-rating span {
  color: var(--c-text-muted) !important;
}

/* ── 18. GUIDE-CARD BADGE — hardcoded light pastel bgs ──────── */
[data-theme="dark"] .guide-card__badge--light   { background: #0D2B12; color: #81C784; }
[data-theme="dark"] .guide-card__badge--avg     { background: #3B2410; color: #F4AC70; }
[data-theme="dark"] .guide-card__badge--hungry  { background: #2D1A00; color: #FFB74D; }
[data-theme="dark"] .guide-card__badge--vhungry { background: #2A0A10; color: #EF9A9A; }

/* ── 19. EVENT-ITEM BADGES — hardcoded pastel greens/oranges ── */
[data-theme="dark"] .event-item__badge--add    { background: #0D2B12; color: #81C784; }
[data-theme="dark"] .event-item__badge--reduce { background: #2D1A00; color: #FFB74D; }

/* ── 20. TIP-BOX — hardcoded #E8EDFC blue light bg ───────────── */
[data-theme="dark"] .tip-box {
  background: #10143A;
  border-color: rgba(30,63,171,.35);
  color: #B8C8F8;
}

/* ── 21. DIETARY SUGGESTION — hardcoded green rgba bg ────────── */
[data-theme="dark"] .dietary-suggestion {
  background: rgba(100,180,60,.1);
  border-color: rgba(100,180,60,.22);
  color: #8cca5c;
}
[data-theme="dark"] .dietary-suggestion svg { color: #8cca5c; }

/* ── 22. CUSTOM-SLICES ROW — hardcoded rgba orange bg ────────── */
[data-theme="dark"] .custom-slices-row {
  background: rgba(196,98,26,.06);
  border-color: rgba(196,98,26,.15);
}
[data-theme="dark"] .custom-slices-control .input-hint {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-faint);
}

/* ── 23. SITE HEADER — hardcoded rgba(253,248,243) bg ─────────── */
[data-theme="dark"] .site-header {
  background: rgba(15,10,5,0.92);
  border-bottom-color: var(--c-border);
}

/* ── 24. TOC BAR — hardcoded rgba(253,248,243) bg ────────────── */
[data-theme="dark"] .toc-bar {
  background: rgba(24,18,14,0.95);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .toc-bar__inner::after {
  background: linear-gradient(to right, transparent, rgba(24,18,14,0.97));
}
[data-theme="dark"] .toc-bar__list {
  background: rgba(24,18,14,0.99);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .toc-bar__toggle {
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
}