/* ═══════════════════════════════════════════════════
   DTV MOTORS — Calculator Dark Theme Override
   Rethemes the calculator to match the site's dark design
   ═══════════════════════════════════════════════════ */

/* Override calculator CSS variables for dark theme */
.calculator-page {
  --color-yellow: #f2c400;
  --color-yellow-soft: rgba(242, 196, 0, 0.12);
  --color-dark: #ffffff;
  --color-white: #1a1a1e;
  --color-grey-light: #111113;
  --color-grey-dark: #a1a1aa;
  --color-text: #e4e4e7;
  --border: #2e2e35;
  --card-shadow: 0 2px 16px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.03);
  --radius: 14px;
  --radius-sm: 10px;
}

/* Page background — override original body flex layout */
.calculator-page {
  background: #0a0a0b;
  background-image: radial-gradient(circle at 20% 0%, rgba(242,196,0,0.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 100%, rgba(242,196,0,0.03) 0%, transparent 50%);
  background-attachment: fixed;
  color: #e4e4e7;
  padding-top: 6rem; /* space for fixed nav */
  /* Override original calculator body styles that break full-page layout */
  display: block !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: unset !important;
}

/* Center the calculator container within the page */
.calculator-page .calculator-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 0;
}

/* Give calculator content some breathing room on mobile */
@media (max-width: 1040px) {
  .calculator-page .calculator-container {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* Calculator container */
.calculator-page .calculator-container {
  background: #1a1a1e;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Header */
.calculator-page .calculator-header {
  background: linear-gradient(135deg, #111113 0%, #1a1a1e 60%, #1e1b14 100%);
}
.calculator-page .calculator-header::after {
  background: linear-gradient(90deg, #f2c400 0%, rgba(242,196,0,0.3) 100%);
}
.calculator-page .calculator-header h2 { color: #f2c400; }

/* Cards */
.calculator-page .card {
  background: #1a1a1e;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.03);
}
.calculator-page .card > h2 {
  color: #ffffff;
  border-bottom-color: #f2c400;
}
.calculator-page .card h3,
.calculator-page .sectionTitle {
  color: #ffffff;
  border-bottom-color: #f2c400;
}

/* Form inputs */
.calculator-page select,
.calculator-page input {
  background: #111113;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page select:focus,
.calculator-page input:focus {
  border-color: #f2c400;
  box-shadow: 0 0 0 4px rgba(242,196,0,0.15);
  background: #1a1a1e;
}
.calculator-page select:hover,
.calculator-page input:hover {
  border-color: #3e3e45;
}

.calculator-page input.locked,
.calculator-page input[readonly] {
  background: #111113;
  border-color: #2e2e35;
  border-style: dashed;
}

/* Labels */
.calculator-page label {
  color: #a1a1aa;
}

/* Location dropdown */
.calculator-page .locTrigger {
  background: #111113;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page .locPanel {
  background: #1a1a1e;
  border-color: #f2c400;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.calculator-page .locSearchBox {
  background: #111113;
  border-bottom-color: #2e2e35;
}
.calculator-page .locSearchInput {
  color: #e4e4e7 !important;
}
.calculator-page .locOption {
  color: #e4e4e7;
  border-bottom-color: rgba(255,255,255,0.05);
}
.calculator-page .locOption:hover,
.calculator-page .locOption.highlighted {
  background: rgba(242,196,0,0.14);
}
.calculator-page .locOption.selected {
  background: rgba(242,196,0,0.22);
}
.calculator-page .locOption .locOptPort {
  color: #a1a1aa;
  background: #111113;
}

/* Pills */
.calculator-page .pill {
  background: linear-gradient(135deg, rgba(242,196,0,0.08), rgba(242,196,0,0.04));
  border-color: rgba(242,196,0,0.2);
  color: #e4e4e7;
}

/* Tables */
.calculator-page td {
  border-bottom-color: rgba(255,255,255,0.05);
  color: #e4e4e7;
}
.calculator-page td.right { color: #ffffff; }
.calculator-page .bigTotal { color: #ffffff; }

/* Total row */
.calculator-page tr.totalRow td {
  background: linear-gradient(135deg, rgba(242,196,0,0.18), rgba(242,196,0,0.08));
  color: #ffffff;
}
.calculator-page tr.totalRow td.right { color: #ffffff; }

/* Details/accordion */
.calculator-page details {
  background: #111113;
  border-color: rgba(255,255,255,0.06);
}
.calculator-page .card details {
  background: #111113;
  border-color: rgba(255,255,255,0.06);
}
.calculator-page .card details > summary {
  background: #1a1a1e;
  color: #ffffff;
  border-bottom-color: #f2c400;
}
.calculator-page summary { color: #ffffff; }
.calculator-page summary:after { color: #a1a1aa; }

/* Fee rows */
.calculator-page .feeRow {
  border-bottom-color: rgba(255,255,255,0.08);
}
.calculator-page .feeName { color: #a1a1aa; }
.calculator-page .feeVal { color: #ffffff; }

/* Buttons */
.calculator-page .calculator-container button {
  background: #f2c400;
  color: #0a0a0b;
}
.calculator-page .calculator-container button:hover {
  background: #f9b740;
}
.calculator-page .btnSecondary {
  background: #1a1a1e;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page .btnSecondary:hover {
  background: #242429;
}

/* Quick bid buttons */
.calculator-page .qbid {
  background: #1a1a1e !important;
  border-color: #2e2e35 !important;
  color: #a1a1aa !important;
}
.calculator-page .qbid:hover {
  border-color: #f2c400 !important;
  color: #ffffff !important;
  background: rgba(242,196,0,0.1) !important;
}
.calculator-page .qbid.active {
  border-color: #f2c400 !important;
  background: #f2c400 !important;
  color: #0a0a0b !important;
}

/* Share/export buttons */
.calculator-page .btnShare {
  background: #f2c400;
  color: #0a0a0b;
}
.calculator-page .btnExport {
  background: #1a1a1e;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page .btnExport:hover {
  border-color: #f2c400;
  background: rgba(242,196,0,0.1);
}

/* Compare button */
.calculator-page .btnCompare {
  background: #1a1a1e;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page .btnCompare:hover {
  border-color: #f2c400;
  background: rgba(242,196,0,0.1);
}

/* Toast */
.calculator-page .toast {
  background: #242429;
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Footer */
.calculator-page .calcFooter {
  background: #111113;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.calculator-page .calcFooter .footerBrand { color: #f2c400; }
.calculator-page .calcFooter .footerLink { color: rgba(255,255,255,.45); }
.calculator-page .calcFooter .footerLink:hover { color: rgba(255,255,255,.8); }
.calculator-page .calcFooter .footerDisclaimer { color: rgba(255,255,255,.3); }

/* Afford button */
.calculator-page .affordBtn {
  border-color: rgba(242,196,0,0.35);
  background: linear-gradient(135deg, rgba(242,196,0,0.06), rgba(242,196,0,0.02));
}
.calculator-page .affordBtn:hover {
  background: rgba(242,196,0,0.08);
}
.calculator-page .affordBtnTitle { color: #ffffff; }
.calculator-page .affordBtnSub { color: #a1a1aa; }

/* Afford modal */
.calculator-page .affordModalBox {
  background: #1a1a1e;
}
.calculator-page .affordModalHeader {
  background: #111113;
}
.calculator-page .affordModalBody { background: #1a1a1e; }
.calculator-page .affordInputWrap {
  border-color: #2e2e35;
  background: #1a1a1e;
}
.calculator-page .affordInputWrap:focus-within {
  border-color: #f2c400;
}
.calculator-page .affordCurrency {
  background: #111113;
  border-right-color: #2e2e35;
  color: #ffffff;
}
.calculator-page .affordSelect {
  background: #1a1a1e;
  border-color: #2e2e35;
  color: #e4e4e7;
}
.calculator-page .affordResult {
  background: #111113;
  border-color: rgba(255,255,255,0.06);
}
.calculator-page .affordRangeBox {
  background: #1a1a1e;
  border-color: #2e2e35;
}
.calculator-page .affordRangeMin { border-color: rgba(242,196,0,0.5); }
.calculator-page .affordRangeVal { color: #ffffff; }
.calculator-page .affordModalFooter {
  background: #111113;
  border-top-color: rgba(255,255,255,0.05);
}
.calculator-page .affordCloseBtn {
  background: #1a1a1e;
  border-color: #2e2e35;
  color: #a1a1aa;
}

/* Compare modal */
.calculator-page .cmpModalBox {
  background: #1a1a1e;
}
.calculator-page .cmpModalHeader {
  background: #111113;
}
.calculator-page .cmpModalBody { background: #1a1a1e; }
.calculator-page .cmpTable th {
  background: #111113;
  color: #a1a1aa;
}
.calculator-page .cmpTable td {
  border-bottom-color: rgba(255,255,255,0.05);
  color: #e4e4e7;
}
.calculator-page .cmpModalFooter {
  background: #111113;
  border-top-color: rgba(255,255,255,0.05);
}

/* Donut chart */
.calculator-page .chartSection { border-top-color: rgba(255,255,255,0.05); }
.calculator-page .donutLegendItem { color: #e4e4e7; }
.calculator-page .donutLegendItem:hover { background: rgba(255,255,255,0.04); }
.calculator-page .donutLegendVal { color: #ffffff; }
.calculator-page .donutCenter { fill: #ffffff; }
.calculator-page .donutCenterSub { fill: #a1a1aa; }

/* Inline notice */
.calculator-page .inlineNotice {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.25);
  color: #fca5a5;
}

/* Empty state */
.calculator-page .calcEmptyState {
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(135deg, rgba(242,196,0,0.08), rgba(26,26,26,0.02));
}
.calculator-page .calcEmptyState h3 { color: #ffffff; }
.calculator-page .calcEmptyState p { color: #a1a1aa; }
.calculator-page .calcStep {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.calculator-page .calcStep .num {
  background: #f2c400;
  color: #0a0a0b;
}
.calculator-page .calcStep .txt { color: #e4e4e7; }
.calculator-page .calcHint {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
  color: #a1a1aa;
}

/* GIA info link */
.calculator-page .giaInfoLink {
  background: rgba(255,255,255,0.06);
  color: #a1a1aa;
}
.calculator-page .giaInfoLink:hover {
  background: #f2c400;
  color: #0a0a0b;
}

/* Muted text helper */
.calculator-page .muted { color: #71717a; }

/* Reset button */
.calculator-page .btnReset {
  background: #f2c400;
  color: #0a0a0b;
}