/* Car Depreciation Calculator — scoped styles.
   Every selector is prefixed with .cdc- and nested under .cdc-widget
   so it cannot leak into (or be affected by) the surrounding theme. */

.cdc-widget{
  --cdc-bg:#14171b;
  --cdc-surface:#1d2227;
  --cdc-surface-2:#262b31;
  --cdc-border:#31373e;
  --cdc-text:#ece9e2;
  --cdc-text-dim:#9aa0a6;
  --cdc-text-faint:#6b7178;
  --cdc-amber:#f2a63b;
  --cdc-teal:#4fc3a1;
  --cdc-violet:#a084ea;
  --cdc-sky:#5b9bd9;
  --cdc-coral:#e2604f;
  --cdc-radius:14px;

  all: initial;
  display:block;
  direction:rtl;
  font-family:'Vazirmatn', sans-serif;
  color:var(--cdc-text);
  background:
    radial-gradient(circle at 20% 0%, #1b2a2680 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, #2a1f1080 0%, transparent 40%),
    var(--cdc-bg);
  border-radius:20px;
  padding:24px 18px 32px;
  max-width:920px;
  margin:24px auto;
  box-sizing:border-box;
  line-height:1.6;
}
.cdc-widget *, .cdc-widget *::before, .cdc-widget *::after{
  box-sizing:border-box;
  font-family:inherit;
}

.cdc-locked-overlay{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:160px;
  text-align:center;
  color:var(--cdc-text-dim);
  font-size:14px;
  border:1px dashed var(--cdc-border);
  border-radius:14px;
  padding:24px;
}

.cdc-header{text-align:center; margin-bottom:24px;}
.cdc-header .cdc-eyebrow{
  font-size:12px; letter-spacing:.12em; color:var(--cdc-amber);
  text-transform:uppercase; font-weight:600; font-family:'JetBrains Mono',monospace;
  display:inline-block; border:1px solid #3a3120; background:#241d10;
  padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
.cdc-header h2{font-size:24px; font-weight:800; margin:0 0 8px; color:var(--cdc-text);}
.cdc-header p{color:var(--cdc-text-dim); font-size:14px; max-width:560px; margin:0 auto; line-height:1.9;}

.cdc-dash{
  background: linear-gradient(180deg,#191d22, #14171a);
  border:1px solid var(--cdc-border);
  border-radius:20px;
  padding:22px 20px 18px;
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
  box-shadow: inset 0 1px 0 #ffffff08, 0 20px 40px -20px #000a;
}
.cdc-dash-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em;
  color:var(--cdc-text-faint); text-transform:uppercase; margin-bottom:10px;
}
.cdc-dash-row{display:flex; flex-wrap:wrap; gap:14px; align-items:stretch;}
.cdc-dash-cell{
  flex:1 1 220px;
  background:#00000030;
  border:1px solid #ffffff0f;
  border-radius:12px;
  padding:16px 18px;
  position:relative;
}
.cdc-dash-cell.cdc-primary{
  flex:1 1 280px;
  border-color:#f2a63b33;
  background:linear-gradient(160deg, #2a220f60, #00000030);
}
.cdc-k{font-size:12px; color:var(--cdc-text-dim); margin-bottom:6px;}
.cdc-v{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:28px; letter-spacing:.01em;
  color:var(--cdc-amber);
  text-shadow: 0 0 18px #f2a63b55;
  direction:ltr; text-align:right;
}
.cdc-primary .cdc-v{font-size:36px;}
.cdc-v-teal{font-size:22px; color:var(--cdc-teal); text-shadow:0 0 18px #4fc3a155;}
.cdc-v-coral{font-size:22px; color:var(--cdc-coral); text-shadow:0 0 18px #e2604f55;}
.cdc-u{font-size:12px; color:var(--cdc-text-faint); margin-top:4px;}
.cdc-unit-inline{font-size:13px; color:var(--cdc-text-dim); font-family:'Vazirmatn',sans-serif; margin-right:4px;}

.cdc-scan{
  position:absolute; right:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--cdc-amber), transparent);
  opacity:.6; animation:cdc-scan 3.2s linear infinite;
}
@keyframes cdc-scan{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
@media (prefers-reduced-motion: reduce){
  .cdc-scan{animation:none;}
}

.cdc-breakdown{margin-top:16px;}
.cdc-bar{
  display:flex; width:100%; height:14px; border-radius:8px; overflow:hidden;
  background:var(--cdc-surface-2); border:1px solid var(--cdc-border);
}
.cdc-bar > div{height:100%; transition:width .2s ease;}
.cdc-c-tire{background:var(--cdc-teal);}
.cdc-c-oil{background:var(--cdc-amber);}
.cdc-c-brake{background:var(--cdc-violet);}
.cdc-c-other{background:var(--cdc-sky);}
.cdc-c-dep{background:var(--cdc-coral);}

.cdc-legend{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; font-size:12.5px; color:var(--cdc-text-dim);}
.cdc-legend-item{display:flex; align-items:center; gap:6px;}
.cdc-dot{width:9px; height:9px; border-radius:3px; display:inline-block;}
.cdc-amt{font-family:'JetBrains Mono',monospace; color:var(--cdc-text); direction:ltr;}

.cdc-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media(max-width:720px){ .cdc-grid{grid-template-columns:1fr;} }

.cdc-card{
  background:var(--cdc-surface); border:1px solid var(--cdc-border); border-radius:var(--cdc-radius);
  padding:18px 18px 16px;
}
.cdc-card.cdc-full{grid-column:1 / -1;}
.cdc-card-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.cdc-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:#00000030; border:1px solid #ffffff0f;
}
.cdc-icon-tire{color:var(--cdc-teal);}
.cdc-icon-oil{color:var(--cdc-amber);}
.cdc-icon-brake{color:var(--cdc-violet);}
.cdc-icon-other{color:var(--cdc-sky);}
.cdc-icon-dep{color:var(--cdc-coral);}
.cdc-card-head h3{font-size:15px; font-weight:700; margin:0; color:var(--cdc-text);}
.cdc-toggle-wrap{margin-right:auto; display:flex; align-items:center; gap:8px;}

.cdc-field{margin-bottom:12px;}
.cdc-field:last-child{margin-bottom:0;}
.cdc-field label{display:block; font-size:12.5px; color:var(--cdc-text-dim); margin-bottom:6px;}
.cdc-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cdc-input-unit{position:relative;}
.cdc-input-unit input{
  width:100%; background:var(--cdc-surface-2); border:1px solid var(--cdc-border); color:var(--cdc-text);
  border-radius:9px; padding:9px 62px 9px 12px; font-size:14px;
  font-family:'JetBrains Mono',monospace; direction:ltr; text-align:left;
  appearance:none; margin:0; line-height:normal;
}
.cdc-input-unit input:focus{outline:none; border-color:var(--cdc-amber);}
.cdc-input-unit .cdc-unit{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:11.5px; color:var(--cdc-text-faint); font-family:'Vazirmatn',sans-serif; pointer-events:none;
}
.cdc-hint{font-size:11.5px; color:var(--cdc-text-faint); margin:8px 0 0; line-height:1.7;}

.cdc-switch{position:relative; width:38px; height:21px; flex-shrink:0; display:inline-block;}
.cdc-switch input{opacity:0; width:0; height:0; position:absolute;}
.cdc-slider{
  position:absolute; inset:0; background:var(--cdc-surface-2); border:1px solid var(--cdc-border);
  border-radius:999px; cursor:pointer; transition:.15s;
}
.cdc-slider::before{
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  background:var(--cdc-text-dim); top:2px; right:3px; transition:.15s;
}
.cdc-switch input:checked + .cdc-slider{background:#3a2f14; border-color:var(--cdc-amber);}
.cdc-switch input:checked + .cdc-slider::before{background:var(--cdc-amber); transform:translateX(-17px);}

.cdc-disabled-fade{opacity:.4; pointer-events:none; filter:grayscale(.4);}

.cdc-subtotal-tag{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--cdc-border);
  display:flex; justify-content:space-between; font-size:12.5px; color:var(--cdc-text-dim);
}
.cdc-subtotal-tag b{font-family:'JetBrains Mono',monospace; color:var(--cdc-text); direction:ltr;}

.cdc-trip-card{display:flex; flex-wrap:wrap; align-items:center; gap:16px;}
.cdc-trip-input{flex:1 1 200px;}
.cdc-trip-input label{display:block; font-size:12.5px; color:var(--cdc-text-dim); margin-bottom:6px;}
.cdc-trip-result{
  flex:1 1 220px; text-align:center; background:#00000030; border:1px solid #ffffff0f;
  border-radius:12px; padding:14px;
}
.cdc-trip-result .cdc-v{font-size:24px;}
.cdc-trip-result .cdc-k{margin-top:4px;}

.cdc-footer{margin-top:22px; font-size:11.5px; line-height:2; color:var(--cdc-text-faint); text-align:center;}