/* ============================================================
   CipAuto Fuel Calculator — Frontend Styles
   Designed to match Figma: CIP / Calculator costuri consum
   ============================================================ */

/* ---- CSS custom property for uniform control height ---- */
:root {
  --cafc-control-h: 44px;
}

.cafc-wrap {
  font-family: 'Jost', sans-serif;
  max-width: 480px;
  margin: 0 auto;
  color: #000;
}

/* ---- Card ---- */
.cafc-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
}

/* ---- Titles ---- */
.cafc-title {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.2;
}
.cafc-title--prices {
  margin-top: 4px;
}
.cafc-title--results {
  text-align: left;
  margin-bottom: 4px;
  font-size: 20px;
}

/* ---- Cars row ---- */
.cafc-cars-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 12px;
}

.cafc-car-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cafc-car-header {
  border-radius: 6px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cafc-control-h);
}

/* SVG car icons */
.cafc-car-svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.cafc-price-svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* VS badge — centred vertically against the header row only */
.cafc-vs-badge {
  align-self: start;
  margin-top: calc((var(--cafc-control-h) / 2) - 13px); /* centre of header - half badge height */
  flex-shrink: 0;
  background: #ff005d;
  color: #fff;
  border-radius: 100px;
  border: 2px solid #fff;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  margin-left: -7px;
  margin-right: -7px;
}

/* ---- Field groups ---- */
.cafc-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cafc-field-group--half {
  flex: 1;
}

.cafc-label {
  font-size: 12px;
  font-weight: 400;
  padding-left: 12px;
}

/* ---- Inputs — uniform height ---- */
.cafc-input {
  border: 1px solid #000;
  border-radius: 4px;
  padding: 0 12px;
  height: var(--cafc-control-h);
  font-size: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  color: #000;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.cafc-input:focus {
  border-color: #3b00dd;
}
.cafc-input::placeholder {
  opacity: 0.5;
}

.cafc-input-unit-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: var(--cafc-control-h);
}
.cafc-input-unit-wrap .cafc-input {
  border: none;
  flex: 1;
  min-width: 0;
  padding-right: 4px;
  height: 100%;
}
.cafc-unit-label {
  font-size: 14px;
  opacity: 0.5;
  white-space: nowrap;
  padding: 0 12px 0 0;
  font-family: 'Jost', sans-serif;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ---- Selects — uniform height ---- */
.cafc-select-wrap {
  position: relative;
}
.cafc-select {
  width: 100%;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 0 32px 0 12px;
  height: var(--cafc-control-h);
  font-size: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  color: #000;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cafc-select:focus {
  border-color: #3b00dd;
}
.cafc-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
}

/* ---- Bottom row ---- */
.cafc-bottom-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---- Buttons — uniform height ---- */
.cafc-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: #3b00dd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  height: var(--cafc-control-h);
  font-size: 16px;
  font-weight: 800;
  font-family: 'Jost', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.cafc-btn-primary:hover {
  background: #2a009e;
}
.cafc-btn-primary:active {
  transform: scale(0.98);
}
.cafc-btn-primary:disabled {
  background: #aaa;
  cursor: not-allowed;
}
.cafc-btn-arrow {
  font-size: 18px;
  flex-shrink: 0;
}

.cafc-btn-back {
  width: 100%;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-family: 'Jost', sans-serif;
  color: #555;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.cafc-btn-back:hover {
  border-color: #3b00dd;
  color: #3b00dd;
}

/* ---- Prices grid ---- */
.cafc-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.cafc-price-card {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cafc-price-card--benzina98  { border-color: #e90051; }
.cafc-price-card--benzina95  { border-color: #ff001a; }
.cafc-price-card--diesel     { border-color: #ff7300; }
.cafc-price-card--lpg        { border-color: #00c4ff; }
.cafc-price-card--cng        { border-color: #0070e0; }
.cafc-price-card--ev         { border-color: #00e16d; }

.cafc-price-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cafc-price-category {
  font-size: 10px;
  font-weight: 400;
}
.cafc-price-name {
  font-size: 16px;
  font-weight: 800;
}
.cafc-price-value {
  font-size: 10px;
  font-weight: 700;
}
.cafc-price-value strong {
  font-weight: 700;
}
.cafc-price-value small {
  font-weight: 400;
}

/* ---- Disclaimer ---- */
.cafc-disclaimer {
  font-size: 12px;
  text-align: center;
  color: #000;
  opacity: 0.6;
  margin: 8px 0 0;
}

/* ============================================================
   RESULTS SCREEN
   ============================================================ */

/* ---- Header: title col + diff summary, centred vertically ---- */
.cafc-results-header {
  display: flex;
  align-items: center;          /* Figma: items-center */
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.cafc-results-title-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* Figma: gap-[16px] between title and km text */
}
.cafc-results-distance {
  font-size: 12px;
  line-height: 14px;
  margin: 0;
}

/* Diff summary box — gap 10px between lines per Figma */
.cafc-diff-summary {
  background: #f3f3f3;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;                    /* Figma: gap-[10px] */
  flex-shrink: 0;
  white-space: nowrap;
}
.cafc-diff-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}
/* Value: JS injects <strong> for number + <span> for symbol */
.cafc-diff-value {
  font-size: 20px;
  line-height: 1;
}
.cafc-diff-value strong { font-weight: 800; }
.cafc-diff-value span   { font-weight: 400; }
/* 3y line: JS injects <strong> for number + normal for text */
.cafc-diff-3y {
  font-size: 12px;
  line-height: 14px;
}
.cafc-diff-3y strong { font-weight: 800; }

/* ---- Currency toggle ---- */
.cafc-currency-row {
  background: #f3f3f3;
  border-radius: 6px;
  padding: 12px 16px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cafc-currency-label {
  font-size: 12px;
  white-space: nowrap;
}
.cafc-currency-toggle {
  display: flex;
  background: #fff;
  border-radius: 100px;
}
.cafc-currency-btn {
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: 'Jost', sans-serif;
  cursor: pointer;
  background: transparent;
  color: #000;
  opacity: 0.5;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
  line-height: 1;
}
.cafc-currency-btn strong { font-weight: 800; }
.cafc-currency-btn .cafc-currency-sym { font-weight: 400; }

/* Active state: border violet per your request */
.cafc-currency-btn--active {
  border-color: #3b00dd;
  opacity: 1;
}
/* Hover on inactive: text violet, no background */
.cafc-currency-btn:not(.cafc-currency-btn--active):hover {
  color: #3b00dd;
  opacity: 1;
}

/* ---- Car summary badges ---- */
.cafc-car-summary-row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;             /* breakdown has border-top, controls spacing */
}
.cafc-car-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
/* Pill car 1: fixed 60px wide per Figma */
.cafc-car-badge-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 44px;
  padding: 6px 12px;
  flex-shrink: 0;
}
.cafc-car-badge-pill--1 {
  background: #ff005d;
  width: 60px;                  /* Figma: w-[60px] fixed */
  justify-content: center;
}
.cafc-car-badge-pill--2 {
  background: #00e5b9;
  /* auto width per Figma */
}
.cafc-car-badge-num { font-size: 14px; font-weight: 400; }

.cafc-car-badge-info {
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* Figma: gap-[10px] */
}
/* Consum: bold number + normal /unit (injected by JS as <strong>/<span>) */
.cafc-car-badge-info strong {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
}
.cafc-car-badge-info strong .cafc-unit { font-size: 12px; font-weight: 400; }
.cafc-car-badge-info span   { font-size: 12px; font-weight: 400; line-height: 14px; }

/* ---- Breakdown (annual bar section) ---- */
.cafc-breakdown {
  border-top: 1px solid #dbd9df;
  border-bottom: 1px solid #dbd9df;
  padding: 16px 0;
  margin-bottom: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cafc-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
}
.cafc-breakdown-header strong { font-weight: 700; font-size: 14px; }
.cafc-breakdown-header span   { font-size: 12px; font-weight: 400; }

.cafc-bar-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cafc-bar {
  height: 12px;
  border-radius: 14px;
  min-width: 12px;
  transition: width 0.4s ease;
}
.cafc-bar--1 { background: #ff005d; }
.cafc-bar--2 { background: #00e5b9; }
.cafc-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  align-items: baseline;
  line-height: 14px;
}
/* "1. 2600 litri Benzină 98+" — number bold, rest normal */
.cafc-bar-text .cafc-bar-num { font-weight: 700; }
.cafc-bar-cost { font-size: 12px; font-weight: 700; white-space: nowrap; }
.cafc-bar-cost .cafc-cost-sym { font-weight: 400; }

/* ---- Differences section ---- */
.cafc-diff-section {
  border-bottom: 1px solid #dbd9df;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.cafc-diff-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
/* Two separate lines per Figma: heading 20px bold + sub 14px normal */
.cafc-diff-section-heading {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.cafc-diff-heading-main {
  font-size: 20px;
  font-weight: 800;
  display: block;
}
.cafc-diff-heading-sub {
  font-size: 14px;
  font-weight: 400;
  display: block;
}

.cafc-share-btn {
  background: #f3f3f3;
  border: none;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cafc-share-btn:hover { background: #e0e0e0; }

.cafc-diff-periods {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.cafc-diff-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-align: center;
}
.cafc-diff-period strong    { font-size: 14px; font-weight: 800; white-space: nowrap; }
.cafc-diff-period-label     { font-size: 12px; font-weight: 400; white-space: nowrap; }

/* ---- Email section ---- */
.cafc-email-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}
/* Email input: height 40px per Figma (not 44px) */
.cafc-input--email {
  height: 40px;
}
.cafc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.cafc-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #3b00dd;
}

/* Send button: text left-aligned + SVG arrow right per Figma */
.cafc-btn-primary--send {
  justify-content: space-between; /* text left, icon right */
  height: 40px;                   /* Figma: h-[40px] */
  margin-bottom: 0;
}
.cafc-btn-label {
  flex: 1;
  text-align: left;
}
.cafc-btn-arrow-svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.cafc-email-msg {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.cafc-email-msg--success {
  background: #e6fff5;
  color: #00a855;
  border: 1px solid #00e16d;
}
.cafc-email-msg--error {
  background: #fff0f0;
  color: #cc0000;
  border: 1px solid #ff5555;
}