/* =============================================
   car-cost-calculator.css
   تكاليف السفر بالسيارة
   ============================================= */

.car-cost-section{
  margin-top: 32px;
  padding: 0 0 20px;
}

.cc-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
}

/* Header */
.cc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cc-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(242,177,75,.18), rgba(125,211,252,.12));
  border: 1px solid rgba(242,177,75,.25);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cc-header-text h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #eaf0ff;
}
.cc-header-text p {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(234,240,255,.55);
}

/* Total Box */
.cc-total-box {
  margin: 16px 20px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(242,177,75,.10) 0%, rgba(125,211,252,.08) 100%);
  border: 1px solid rgba(242,177,75,.18);
  text-align: center;
}
.cc-total-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-total-eur {
  font-size: 36px;
  font-weight: 800;
  color: #f2b14b;
  letter-spacing: -0.5px;
}
.cc-total-sar {
  font-size: 16px;
  font-weight: 600;
  color: rgba(234,240,255,.70);
}
.cc-total-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(234,240,255,.55);
  flex-wrap: wrap;
}

/* Breakdown */
.cc-breakdown {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-break-item {
  display: grid;
  grid-template-columns: 36px 1fr 100px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.cc-break-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cc-break-icon.fuel {
  background: rgba(242,177,75,.12);
  border: 1px solid rgba(242,177,75,.20);
}
.cc-break-icon.toll {
  background: rgba(125,211,252,.12);
  border: 1px solid rgba(125,211,252,.20);
}
.cc-break-icon.vignette {
  background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.18);
}
.cc-break-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cc-break-label {
  font-size: 13px;
  font-weight: 600;
  color: #eaf0ff;
}
.cc-break-value {
  font-size: 14px;
  font-weight: 700;
  color: #f2b14b;
}
.cc-break-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  grid-column: 1 / -1;
}
.cc-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s ease;
}
.cc-bar-fill.fuel {
  background: linear-gradient(90deg, rgba(242,177,75,.80), rgba(242,177,75,.50));
}
.cc-bar-fill.toll {
  background: linear-gradient(90deg, rgba(125,211,252,.80), rgba(125,211,252,.50));
}
.cc-bar-fill.vignette {
  background: linear-gradient(90deg, rgba(52,211,153,.80), rgba(52,211,153,.50));
}

/* Detail Section */
.cc-detail-section {
  padding: 0 20px 16px;
}
.cc-detail-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #eaf0ff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Segments */
.cc-segments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-segment {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s;
}
.cc-segment:hover {
  border-color: rgba(255,255,255,.12);
}
.cc-seg-route {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cc-seg-flag {
  font-size: 16px;
}
.cc-seg-city {
  font-size: 13px;
  font-weight: 600;
  color: #eaf0ff;
}
.cc-seg-arrow {
  color: rgba(234,240,255,.35);
  font-size: 14px;
}
.cc-seg-details {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(234,240,255,.55);
}

/* Vignettes */
.cc-vignettes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-vignette-item {
  padding: 14px;
  border-radius: 14px;
  background: rgba(242,177,75,.05);
  border: 1px solid rgba(242,177,75,.12);
}
.cc-vig-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cc-vig-flag {
  font-size: 18px;
}
.cc-vig-country {
  font-size: 14px;
  font-weight: 700;
  color: #eaf0ff;
  flex: 1;
}
.cc-vig-price {
  font-size: 15px;
  font-weight: 800;
  color: #f2b14b;
}
.cc-vig-detail {
  font-size: 11px;
  color: rgba(234,240,255,.55);
  line-height: 1.6;
  margin-bottom: 4px;
}
.cc-vig-buy {
  font-size: 11px;
  color: rgba(52,211,153,.70);
}

/* Warnings */
.cc-warnings {
  padding: 0 20px 16px;
}
.cc-warning-item {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(242,177,75,.06);
  border: 1px solid rgba(242,177,75,.12);
  font-size: 12px;
  color: rgba(242,177,75,.85);
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Settings */
.cc-settings {
  padding: 0 20px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.cc-setting-row label {
  font-size: 12px;
  color: rgba(234,240,255,.55);
  white-space: nowrap;
}
.cc-setting-row select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #eaf0ff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  direction: rtl;
}
.cc-setting-row select:focus {
  border-color: rgba(242,177,75,.30);
}
.cc-setting-row select option {
  background: #0b1220;
  color: #eaf0ff;
}

/* Disclaimer */
.cc-disclaimer {
  padding: 12px 20px 16px;
  font-size: 11px;
  color: rgba(234,240,255,.40);
  line-height: 1.7;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .cc-total-eur {
    font-size: 28px;
  }
  .cc-total-sar {
    font-size: 14px;
  }
  .cc-break-item {
    grid-template-columns: 32px 1fr;
  }
  .cc-settings {
    flex-direction: column;
  }
  .cc-setting-row {
    min-width: unset;
  }
}

@media (max-width: 480px) {
  .cc-header {
    padding: 16px 14px 12px;
  }
  .cc-total-box {
    margin: 12px 14px;
    padding: 16px;
  }
  .cc-breakdown,
  .cc-detail-section,
  .cc-warnings,
  .cc-settings {
    padding-left: 14px;
    padding-right: 14px;
  }
  .cc-seg-route {
    gap: 6px;
  }
}