/* ── Page shell ─────────────────────────────────────────── */
#rca-root .rca-shell {
  min-height: 100vh;
  padding: 0 16px 28px;
  position: relative;
}

#rca-root .rca-container {
  max-width: 1100px;
  margin: 0 auto;
}

#rca-root .rca-page-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--rca-text);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

#rca-root .rca-page-sub {
  font-size: 0.9rem;
  color: var(--rca-text-muted);
  margin-bottom: 28px;
}

/* ── Step indicator ─────────────────────────────────────── */
#rca-root .rca-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 16px 0;
}

#rca-root .rca-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#rca-root .rca-step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  outline: none;
}

#rca-root .rca-step-btn.clickable {
  cursor: pointer;
}

#rca-root .rca-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid #b8c5d6;
  background: var(--rca-white);
  color: #64748b;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

#rca-root .rca-step-num.active {
  background: var(--rca-primary);
  border-color: var(--rca-primary);
  color: var(--rca-white);
  box-shadow: 0 0 0 4px rgba(30, 106, 181, 0.15);
}

#rca-root .rca-step-num.done {
  background: var(--rca-primary);
  border-color: var(--rca-primary);
  color: var(--rca-white);
}

#rca-root .rca-step-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--rca-text-muted);
  text-align: center;
  white-space: nowrap;
}

#rca-root .rca-step-label.active {
  color: var(--rca-primary);
  font-weight: 700;
}

#rca-root .rca-step-label.done {
  color: var(--rca-primary);
  font-weight: 600;
}

#rca-root .rca-step-connector {
  flex: 1;
  height: 2px;
  margin-top: 15px;
  background: var(--rca-border);
  border-radius: 1px;
  transition: background 0.3s ease;
}

#rca-root .rca-step-connector.done {
  background: linear-gradient(90deg, #003478, #00449e);
}

/* ── Main 2-col layout ──────────────────────────────────── */
#rca-root .rca-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#rca-root .rca-main {
  flex: 3 1 0;
  min-width: 0;
}

#rca-root .rca-sidebar {
  flex: 2 1 0;
  min-width: 0;
}

/* ── Desktop: sidebar sticky, form scrolls with page ────── */
@media (min-width: 641px) {
  #rca-root .rca-sidebar {
    position: sticky;
    top: 64px;
    /* below sticky steps bar */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rca-border) transparent;
  }

  #rca-root .rca-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  #rca-root .rca-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  #rca-root .rca-sidebar::-webkit-scrollbar-thumb {
    background: var(--rca-border);
    border-radius: 2px;
  }
}

@media (max-width: 640px) {
  #rca-root .rca-body {
    flex-direction: column;
  }

  /* The sidebar holds two different kinds of thing: the scan banners
     (Incarca / Pozeaza) and the purely informational cards. Hiding the whole
     sidebar on mobile took the scan banners with it, so the entire OCR
     feature was invisible on every phone - on the one device where
     photographing a document actually makes sense. Keep the sidebar in the
     flow, show only the scan banner, and move it above the fields: the
     intended order is "photograph the document, we fill this in for you",
     then the manual fields as the fallback. */
  #rca-root .rca-sidebar {
    display: block;
    order: -1;
    /* .rca-body sets align-items: flex-start. Once the direction is column
       that stops being a vertical alignment and becomes a horizontal one, so
       children shrink to their content width instead of filling the row. The
       sidebar was display:none here, so nothing ever showed it; unhiding it
       exposed a banner that stopped short of the right edge. */
    align-self: stretch;
    width: 100%;
  }

  /* Exemplu talon / Informatii utile stay hidden - useful reference on a wide
     screen, just something to scroll past on a phone. */
  #rca-root .rca-sidebar .rca-sidebar-card {
    display: none;
  }

  /* The .rca-scan-section chrome is stripped in components.css, not here:
     that file loads later and declares the same selector at equal
     specificity, so a rule written here loses regardless of the media query.
     Media queries do not add specificity. */
}

/* ── Form card (steps 1+2) ──────────────────────────────── */
#rca-root .rca-form-card {
  background: #F8F8F6;
  border: 1px solid var(--rca-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--rca-shadow-card);
}

/* ── Form card header ───────────────────────────────────── */
#rca-root .rca-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rca-border);
}

#rca-root .rca-form-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--rca-primary-light) 0%, #dceffe 100%);
  border: 1px solid var(--rca-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(30, 106, 181, 0.12);
}

#rca-root .rca-form-header-center {
  flex: 1;
  text-align: left;
  min-width: 0;
}

#rca-root .rca-form-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rca-text);
  letter-spacing: -0.01em;
}

#rca-root .rca-form-header-sub {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--rca-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  opacity: 0.7;
}

#rca-root .rca-next-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--rca-primary-light);
  border: 1px solid var(--rca-primary-border);
  border-radius: 20px;
  padding: 5px 11px;
  color: var(--rca-primary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

#rca-root .rca-next-btn:hover {
  background: #d6e8f5;
  box-shadow: 0 2px 8px rgba(30, 106, 181, 0.15);
}

#rca-root .rca-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--rca-border);
  border-radius: 20px;
  padding: 5px 11px;
  color: var(--rca-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

#rca-root .rca-back-btn:hover {
  background: var(--rca-bg);
  border-color: var(--rca-border-hover);
}

/* ── Input with icon wrapper ─────────────────────────────── */
#rca-root .rca-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
#rca-root .rca-input-icon {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  stroke: #6b7280;
  fill: none;
  pointer-events: none;
  flex-shrink: 0;
}
#rca-root .rca-input-with-icon {
  padding-right: 40px;
}

/* ── Card 2 header ───────────────────────────────────────── */
#rca-root .rca-form-header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

#rca-root .rca-form-header-icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(30, 106, 181, 0.08);
  margin: 0 auto;
}

#rca-root .rca-form-header-next {
  display: flex;
  justify-content: flex-end;
}

#rca-root .rca-form-title-centered {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rca-text);
  text-align: center;
  margin-bottom: 12px;
}

#rca-root .rca-divider-line {
  border: none;
  border-top: 1px solid var(--rca-border);
}

/* ── Grid helpers ───────────────────────────────────────── */
#rca-root .rca-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rca-gap);
}

#rca-root .rca-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--rca-gap);
}

#rca-root .rca-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}

#rca-root .rca-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rca-gap);
}

#rca-root .rca-stack-lg {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#rca-root .rca-max-xs {
  max-width: 220px;
}

/* Nr. inmatriculare no longer has a lookup button (InsureTech has no plate
   search - only VIN), so it needs far less width than VIN, which also carries
   the "Completați automat" button. min-width guard: an #id selector would
   otherwise outrank the .rca-grid-2 stacking rule below 480px. */
@media (min-width: 481px) {
  /* fr units, not %: percentage tracks here do NOT subtract the grid gap
     first, so "30% 70%" overflows the card by exactly one gap-width (16px) -
     verified by measuring the live page, the VIN column's right edge sat
     16px past the grid's own right edge, matching --rca-gap exactly. fr
     units divide the space that's already left over after the gap. */
  #rca-root #rca-plate-vin-grid {
    grid-template-columns: 3fr 7fr;
  }
  /* Grid items default to min-width:auto - without this, the VIN column's
     content (input + un-shrinkable button) could still force the track
     wider than its share instead of letting the input shrink into it. */
  #rca-root #rca-plate-vin-grid > div {
    min-width: 0;
  }
}
/* No plate yet ("în vederea înmatriculării/înregistrării") - VIN fills the
   whole row instead of sitting in its 70% column with an empty gap. */
#rca-root #rca-plate-vin-grid.rca-plate-hidden #rca-vin-wrap {
  grid-column: 1 / -1;
}

/* ── Autofill row (input + "Completați automat") ─────────── */
#rca-root .rca-autofill-inline-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#rca-root .rca-autofill-inline-row .rca-input {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The shared .rca-autofill-btn (also used by the ANAF CUI lookup) is sized
   for standing next to a full rca-grid-2 column. Next to a single plate/VIN
   input it visually outweighs the field it belongs to, so it's trimmed down
   here only - the ANAF button is untouched. Fixed width (set from JS, see
   init.js) so swapping the label to "Se caută..." doesn't resize it. */
#rca-root .rca-autofill-inline-row .rca-autofill-btn {
  padding: 0 10px;
  font-size: 0.75rem;
  height: auto;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 480px) {

  #rca-root .rca-grid-2,
  #rca-root .rca-grid-3 {
    grid-template-columns: 1fr;
  }

  #rca-root .rca-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Separate, wider breakpoint: the plate/VIN row needs more room than a
   generic rca-grid-2 column before input+button fit side by side. */
@media (max-width: 640px) {
  #rca-root .rca-autofill-inline-row {
    flex-direction: column;
  }
  #rca-root .rca-autofill-inline-row .rca-autofill-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
  }
}

/* ── Step 3 ─────────────────────────────────────────────── */
#rca-root .rca-step3-wrap {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#rca-root .rca-step3-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

#rca-root .rca-step3-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rca-primary), #4d94d6);
  color: var(--rca-white);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#rca-root .rca-section-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#rca-root .rca-section-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--rca-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#rca-root .rca-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

#rca-root .rca-step3-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}