/* ============================================================
   CITS Car Tools — Design System v2.0.0
   Premium UI — GeneratePress / Elementor override-safe
   ============================================================ */

/* ── Token System ─────────────────────────────────────────── */
:root {
  --tc-red:         #e63946;
  --tc-red-dark:    #b81c28;
  --tc-red-soft:    rgba(230,57,70,.1);
  --tc-red-grd:     linear-gradient(145deg, #e63946 0%, #b81c28 100%);
  --tc-dark:        #0f172a;
  --tc-text:        #1e293b;
  --tc-muted:       #64748b;
  --tc-subtle:      #94a3b8;
  --tc-surface:     #ffffff;
  --tc-bg:          #f8fafc;
  --tc-bg2:         #f1f5f9;
  --tc-border:      rgba(15,23,42,.09);
  --tc-border-focus:rgba(230,57,70,.55);
  --tc-success:     #10b981;
  --tc-success-bg:  #ecfdf5;
  --tc-warning:     #f59e0b;
  --tc-warning-bg:  #fffbeb;
  --tc-danger:      #ef4444;
  --tc-danger-bg:   #fef2f2;
  --tc-halal:       #059669;
  --tc-halal-bg:    #ecfdf5;
  --tc-info:        #3b82f6;
  --tc-info-bg:     #eff6ff;
  --tc-r:           14px;
  --tc-r-sm:        9px;
  --tc-r-xs:        6px;
  --tc-sh-xs:       0 1px 2px rgba(15,23,42,.04);
  --tc-sh-sm:       0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
  --tc-sh:          0 1px 4px rgba(15,23,42,.07), 0 6px 20px rgba(15,23,42,.06);
  --tc-sh-md:       0 2px 8px rgba(15,23,42,.09), 0 12px 32px rgba(15,23,42,.08);
  --tc-sh-red:      0 4px 16px rgba(230,57,70,.35);
  --tc-trans:       all .18s cubic-bezier(.4,0,.2,1);
}

/* keep legacy aliases so older JS/inline styles still work */
:root {
  --tool-primary:   var(--tc-red);
  --tool-primary-h: var(--tc-red-dark);
  --tool-dark:      var(--tc-dark);
  --tool-bg:        var(--tc-bg);
  --tool-border:    #e2e8f0;
  --tool-success:   var(--tc-success);
  --tool-warning:   var(--tc-warning);
  --tool-danger:    var(--tc-danger);
  --tool-info:      var(--tc-info);
  --tool-halal:     var(--tc-halal);
  --tool-text:      var(--tc-text);
  --tool-muted:     var(--tc-muted);
  --tool-small:     var(--tc-subtle);
  --tool-radius:    var(--tc-r);
  --tool-radius-sm: var(--tc-r-sm);
  --tool-shadow:    var(--tc-sh-sm);
  --tool-shadow-md: var(--tc-sh-md);
  --tool-surface:   var(--tc-surface);
  --tool-accent:    var(--tc-success);
}

/* ── Root wrapper ─────────────────────────────────────────── */
.cits-tool {
  max-width: 880px !important;
  margin: 0 auto !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
  color: var(--tc-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── Section divider (multi-tool pages) ───────────────────── */
.cits-tool-section {
  padding-top: 52px !important;
  margin-top: 52px !important;
  border-top: 1px solid var(--tc-border) !important;
}
.cits-tool-section:first-child {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Tool Header ──────────────────────────────────────────── */
.cits-tool-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--tc-border) !important;
}

/* Icon box — gradient square with SVG inside */
.cits-tool-header-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  background: var(--tc-red-grd) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--tc-sh-red), inset 0 1px 0 rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
}
.cits-tool-header-icon svg {
  width: 26px !important;
  height: 26px !important;
  color: #fff !important;
  display: block !important;
  stroke-width: 1.75px !important;
}

.cits-tool-header-text {
  flex: 1 !important;
  min-width: 0 !important;
}
.cits-tool-header-text h2 {
  margin: 0 0 3px !important;
  padding: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--tc-dark) !important;
  line-height: 1.25 !important;
  border: none !important;
  letter-spacing: -.25px !important;
}
.cits-tool-header-text p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: var(--tc-muted) !important;
  line-height: 1.5 !important;
}

/* Halal badge — keep only meaningful badges */
.cits-tool-priority {
  display: none !important;
}
.cits-tool-priority.halal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--tc-halal-bg) !important;
  color: var(--tc-halal) !important;
  border: 1.5px solid rgba(5,150,105,.2) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.cits-tool .cits-card {
  background: var(--tc-surface) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-r) !important;
  padding: 24px !important;
  box-shadow: var(--tc-sh-sm) !important;
  margin-bottom: 16px !important;
  position: relative !important;
}
.cits-tool .cits-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tc-dark) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: -.1px !important;
}

/* ── Labels ───────────────────────────────────────────────── */
.cits-tool .cits-label,
.cits-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--tc-muted) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  line-height: 1 !important;
}

/* ── Inputs ───────────────────────────────────────────────── */
.cits-tool input[type="text"],
.cits-tool input[type="number"],
.cits-tool input[type="email"],
.cits-tool input[type="url"],
.cits-tool select,
.cits-tool textarea,
.cits-input,
.cits-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--tc-r-sm) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  box-shadow: var(--tc-sh-xs) !important;
  outline: none !important;
  line-height: 1.4 !important;
}
.cits-tool input[type="number"] {
  font-size: 15px !important;
  font-weight: 500 !important;
}
.cits-tool select,
.cits-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
.cits-tool input:focus,
.cits-tool select:focus,
.cits-tool textarea:focus,
.cits-input:focus,
.cits-select:focus {
  border-color: var(--tc-red) !important;
  box-shadow: 0 0 0 3px var(--tc-red-soft), var(--tc-sh-xs) !important;
  outline: none !important;
  background: #fff !important;
}
.cits-tool input:disabled,
.cits-tool select:disabled {
  background: var(--tc-bg2) !important;
  color: var(--tc-subtle) !important;
  cursor: not-allowed !important;
}

/* ── Range Slider ─────────────────────────────────────────── */
.cits-tool input[type="range"],
.cits-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 5px !important;
  border-radius: 100px !important;
  background: #e2e8f0 !important;
  outline: none !important;
  border: none !important;
  padding: 0 !important;
  min-height: 5px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.cits-tool input[type="range"]::-webkit-slider-thumb,
.cits-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--tc-red) !important;
  cursor: pointer !important;
  border: 2.5px solid #fff !important;
  box-shadow: 0 2px 8px rgba(230,57,70,.4), 0 1px 3px rgba(0,0,0,.15) !important;
  transition: transform .15s !important;
}
.cits-tool input[type="range"]::-webkit-slider-thumb:hover,
.cits-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}
.cits-tool input[type="range"]::-moz-range-thumb,
.cits-slider::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--tc-red) !important;
  border: 2.5px solid #fff !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(230,57,70,.4) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.cits-tool .cits-btn,
.cits-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 22px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: none !important;
  border-radius: var(--tc-r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: var(--tc-trans) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: .1px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
/* PRIMARY */
.cits-tool .cits-btn-primary,
.cits-btn-primary {
  background: var(--tc-red-grd) !important;
  background-color: var(--tc-red) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.cits-tool .cits-btn-primary:hover,
.cits-btn-primary:hover {
  background: linear-gradient(145deg, #d42b37 0%, #a0151f 100%) !important;
  background-color: var(--tc-red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--tc-sh-red), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.cits-tool .cits-btn-primary:active,
.cits-btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.2) !important;
}
/* OUTLINE */
.cits-tool .cits-btn-outline,
.cits-btn-outline {
  background: var(--tc-surface) !important;
  color: var(--tc-text) !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: var(--tc-sh-xs) !important;
}
.cits-tool .cits-btn-outline:hover,
.cits-btn-outline:hover {
  border-color: var(--tc-red) !important;
  color: var(--tc-red) !important;
  background: var(--tc-bg) !important;
  box-shadow: var(--tc-sh-sm) !important;
}
/* FULL WIDTH */
.cits-tool .cits-btn-full,
.cits-btn-full {
  width: 100% !important;
}
/* DISABLED */
.cits-tool button:disabled,
.cits-btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Tab Bar ──────────────────────────────────────────────── */
.cits-tool .cits-tab-bar {
  display: flex !important;
  gap: 3px !important;
  background: var(--tc-bg2) !important;
  padding: 4px !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--tc-border) !important;
}
.cits-tool .cits-tab-item {
  flex: 1 !important;
  padding: 9px 10px !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--tc-muted) !important;
  transition: var(--tc-trans) !important;
  min-height: 38px !important;
  text-align: center !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}
.cits-tool .cits-tab-item.active {
  background: var(--tc-surface) !important;
  color: var(--tc-red) !important;
  box-shadow: var(--tc-sh-sm) !important;
  font-weight: 600 !important;
}
.cits-tool .cits-tab-item.halal-tab.active {
  color: var(--tc-halal) !important;
}
.cits-tool .cits-tab-item:hover:not(.active) {
  color: var(--tc-text) !important;
  background: rgba(255,255,255,.6) !important;
}

/* ── Halal / Riba notices ─────────────────────────────────── */
.cits-halal-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: var(--tc-halal-bg) !important;
  color: #065f46 !important;
  border: 1px solid rgba(5,150,105,.2) !important;
  border-radius: var(--tc-r-sm) !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
}
.cits-riba-disclaimer {
  background: var(--tc-warning-bg) !important;
  border: 1px solid rgba(245,158,11,.25) !important;
  border-radius: var(--tc-r-sm) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #78350f !important;
  line-height: 1.6 !important;
  display: none !important;
  margin-bottom: 14px !important;
}
.cits-riba-disclaimer.visible { display: block !important; }
.cits-riba-disclaimer a { color: var(--tc-halal) !important; font-weight: 600 !important; }

/* ── Results section ──────────────────────────────────────── */
.cits-results {
  display: none;
  animation: citsIn .24s cubic-bezier(.4,0,.2,1);
}
.cits-results.visible { display: block; }
@keyframes citsIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Big number */
.cits-result-big {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--tc-dark) !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
  font-variant-numeric: tabular-nums !important;
}
.cits-result-label {
  font-size: 11px !important;
  color: var(--tc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-top: 4px !important;
  font-weight: 600 !important;
}

/* ── Stat mini-cards ──────────────────────────────────────── */
.cits-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}
.cits-stat-card {
  background: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-r-sm) !important;
  padding: 14px 12px !important;
  text-align: center !important;
}
.cits-stat-card .sc-label {
  font-size: 10.5px !important;
  color: var(--tc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .45px !important;
  margin: 0 0 5px !important;
  font-weight: 600 !important;
}
.cits-stat-card .sc-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tc-dark) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Badges ───────────────────────────────────────────────── */
.cits-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.cits-badge-success { background: var(--tc-success-bg) !important; color: #065f46 !important; }
.cits-badge-warning { background: var(--tc-warning-bg) !important; color: #78350f !important; }
.cits-badge-danger  { background: var(--tc-danger-bg)  !important; color: #7f1d1d !important; }
.cits-badge-info    { background: var(--tc-info-bg)    !important; color: #1e3a5f !important; }

/* ── Table ────────────────────────────────────────────────── */
.cits-tool .cits-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  border-radius: var(--tc-r-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--tc-border) !important;
  margin: 0 !important;
}
.cits-tool .cits-table th {
  background: var(--tc-bg2) !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--tc-muted) !important;
  border-bottom: 1px solid var(--tc-border) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
}
.cits-tool .cits-table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tc-border) !important;
  color: var(--tc-text) !important;
  font-size: 13px !important;
  background: var(--tc-surface) !important;
  transition: background .1s !important;
}
.cits-tool .cits-table tr:last-child td { border-bottom: none !important; }
.cits-tool .cits-table tbody tr:hover td { background: var(--tc-bg) !important; }

/* ── Two-column grid ──────────────────────────────────────── */
.cits-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}

/* ── Causes / fixes columns ───────────────────────────────── */
.cits-causes-fixes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 16px !important;
}
.cits-causes-fixes h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--tc-muted) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
.cits-causes-fixes ol {
  padding-left: 18px !important;
  margin: 0 !important;
}
.cits-causes-fixes li {
  font-size: 13px !important;
  color: var(--tc-text) !important;
  margin-bottom: 5px !important;
  line-height: 1.5 !important;
}

/* OBD2 specific */
.cits-obd2-code-id {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--tc-dark) !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
}

/* ── Amazon Products — Carousel ───────────────────────────── */
.cits-products-section {
  background: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-r) !important;
  padding: 18px 20px 14px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cits-products-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.cits-products-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tc-dark) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
/* Carousel nav (prev/next + counter) */
.cits-carousel-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.cits-carousel-count {
  font-size: 11px !important;
  color: var(--tc-muted) !important;
  min-width: 38px !important;
  text-align: center !important;
}
.cits-carousel-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--tc-border) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-text) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--tc-trans) !important;
  padding: 0 !important;
}
.cits-carousel-btn:hover:not(:disabled) {
  border-color: var(--tc-red) !important;
  color: var(--tc-red) !important;
  background: #fff5f5 !important;
}
.cits-carousel-btn:disabled {
  opacity: .3 !important;
  cursor: default !important;
}

/* Carousel track — hides scrollbar, shows 2 cards */
.cits-product-grid {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  margin: 0 0 10px !important;
}
.cits-product-grid::-webkit-scrollbar { display: none !important; }

/* Each card: exactly half the track width */
.cits-product-card {
  flex: 0 0 calc(50% - 5px) !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-r-sm) !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: var(--tc-text) !important;
  transition: var(--tc-trans) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-sh-xs) !important;
  overflow: hidden !important;
  position: relative !important;
}
.cits-product-card:hover {
  box-shadow: var(--tc-sh-md) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(230,57,70,.25) !important;
}
.cits-product-card.best-choice {
  border-color: var(--tc-warning) !important;
}

/* "Top Pick" badge */
.cits-product-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: var(--tc-warning) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 100px !important;
  letter-spacing: .3px !important;
  z-index: 1 !important;
}

/* Image container — fixed height, no blowout */
.cits-product-img-wrap {
  width: 100% !important;
  height: 120px !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--tc-border) !important;
}
.cits-product-img {
  max-width: 100% !important;
  max-height: 110px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Card content */
.cits-product-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 10px 8px !important;
  flex: 1 !important;
}
.cits-product-title {
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0 0 6px !important;
  flex: 1 !important;
  color: var(--tc-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.cits-product-rating {
  font-size: 11px !important;
  color: var(--tc-warning) !important;
  margin-bottom: 4px !important;
}
.cits-product-rating small {
  color: var(--tc-muted) !important;
  font-size: 10px !important;
}
.cits-product-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tc-dark) !important;
  margin-bottom: 8px !important;
  font-variant-numeric: tabular-nums !important;
}
.cits-product-cta {
  background: linear-gradient(180deg, #ff9f00, #e68900) !important;
  color: #111 !important;
  text-align: center !important;
  padding: 6px 8px !important;
  border-radius: var(--tc-r-xs) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: block !important;
  text-decoration: none !important;
}
.cits-affiliate-disclosure {
  font-size: 11px !important;
  color: var(--tc-subtle) !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}

/* ── Loading spinner ──────────────────────────────────────── */
.cits-spinner {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 2.5px solid rgba(255,255,255,.35) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: cits-spin .65s linear infinite !important;
  vertical-align: middle !important;
}
@keyframes cits-spin { to { transform: rotate(360deg); } }

/* ── Term buttons (car payment) ───────────────────────────── */
.cits-term-btn {
  padding: 8px 14px !important;
  font-size: 13px !important;
  min-height: 38px !important;
  border-radius: var(--tc-r-xs) !important;
}
.cits-term-btn.active {
  background: var(--tc-red) !important;
  background-image: var(--tc-red-grd) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(230,57,70,.3) !important;
}

/* ── OBD2 autocomplete ────────────────────────────────────── */
#cits-obd2-suggest {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--tc-surface) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-r-sm) !important;
  box-shadow: var(--tc-sh-md) !important;
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 4px 0 0 !important;
  z-index: 99 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}
#cits-obd2-suggest li {
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-family: 'Menlo', monospace !important;
  font-size: 13px !important;
  color: var(--tc-text) !important;
  transition: background .1s !important;
}
#cits-obd2-suggest li:hover {
  background: var(--tc-bg) !important;
  color: var(--tc-red) !important;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cits-tool .cits-card       { padding: 16px !important; }
  .cits-two-col               { grid-template-columns: 1fr !important; }
  .cits-causes-fixes          { grid-template-columns: 1fr !important; }
  .cits-product-card          { flex: 0 0 calc(75% - 5px) !important; }
  .cits-result-big            { font-size: 30px !important; }
  .cits-tool-header-text h2   { font-size: 18px !important; }
  .cits-tool .cits-tab-item   { font-size: 12px !important; padding: 8px 6px !important; }
  .cits-stat-grid             { grid-template-columns: repeat(2, 1fr) !important; }
  .cits-tool-header-icon      { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; }
  .cits-tool-header-icon svg  { width: 22px !important; height: 22px !important; }
}

/* ── Print / PDF ──────────────────────────────────────────── */
@media print {
  @page { margin: 1.5cm 2cm; size: A4; }

  /* ── Site chrome ── */
  #wpadminbar,
  .site-header,
  .site-navigation,
  .main-navigation,
  .site-footer,
  header:not(.cits-tool-header),
  footer,
  nav,
  .widget-area,
  .sidebar,
  #secondary,
  .navigation { display: none !important; }

  /* ── Tool page: hide everything except the tool embed ── */
  .cits-hero,
  .cits-breadcrumb,
  .cits-page-intro,
  .cits-page-section,
  .cits-page-related,
  .cits-page-sidebar,
  .cits-ad-unit,
  .cits-products-section,
  .cits-affiliate-disclosure,
  .cits-tire-actions,
  .cits-carousel-nav { display: none !important; }

  /* ── Hide all buttons ── */
  .cits-btn,
  button { display: none !important; }

  /* ── Hide tool input controls (keep result displays & tables) ── */
  .cits-tool input,
  .cits-tool select,
  .cits-tool .cits-slider,
  .cits-tool .cits-label,
  .cits-tool .cits-tire-group-label,
  .cits-tool .cits-tire-size-display,
  .cits-tool .cits-term-btn,
  .cits-tool .cits-two-col > div:first-child,
  .cits-tool details > summary,
  .cits-tool #cits-switch-to-halal { display: none !important; }

  /* For tools with a separate .cits-results div: hide the sibling input card */
  .cits-tool:has(.cits-results) > .cits-card { display: none !important; }

  /* ── Flatten layout ── */
  .cits-page-body    { display: block !important; padding: 0 !important; }
  .cits-page-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .cits-page-wrap    { padding: 0 !important; }
  .cits-tool-embed   { padding: 0 !important; margin: 0 !important; }
  .cits-tool-section { padding: 0 !important; box-shadow: none !important; border: none !important; background: none !important; }

  /* ── Force results visible ── */
  .cits-results,
  .cits-results.visible { display: block !important; }

  /* ── Tool header in print ── */
  .cits-tool-header {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 2px solid #000 !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 14px !important;
    color: #000 !important;
  }
  .cits-tool-header-icon {
    background: none !important;
    border: 1px solid #888 !important;
    box-shadow: none !important;
  }
  .cits-tool-header-icon svg { color: #000 !important; fill: #000 !important; }
  .cits-tool-header-text h2  { color: #000 !important; font-size: 18px !important; margin: 0 !important; }
  .cits-tool-header-text p   { color: #444 !important; font-size: 12px !important; margin: 2px 0 0 !important; }

  /* ── Tables ── */
  .cits-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11px !important;
  }
  .cits-table th,
  .cits-table td {
    border: 1px solid #aaa !important;
    padding: 5px 8px !important;
    color: #000 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .cits-table thead th {
    background: #e8e8e8 !important;
    font-weight: 700 !important;
  }
  .cits-table tr:nth-child(even) td { background: #f5f5f5 !important; }

  /* ── Stat cards ── */
  .cits-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cits-stat-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: none !important;
    break-inside: avoid !important;
    padding: 8px !important;
  }
  .cits-result-label { color: #444 !important; font-size: 10px !important; }
  .cits-result-big   { color: #000 !important; font-size: 22px !important; }
  .cits-result-unit  { color: #444 !important; }

  /* ── Cards ── */
  .cits-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    padding: 12px !important;
    background: #fff !important;
    break-inside: avoid !important;
  }

  /* ── SVG tire diagram ── */
  svg, canvas { max-width: 100% !important; height: auto !important; }

  /* ── Default WordPress page title — hide in print too ── */
  body.cits-tool-template h1:not(.cits-hero-title):not(.cits-hub-title),
  body.cits-tool-template .entry-header,
  body.cits-tool-template .entry-title,
  body.cits-tool-template .page-title,
  body.cits-tool-template h1.entry-title,
  body.cits-tool-template h1.page-title { display: none !important; }
}