/* ============================================================
   Vectis Booking Wizard (PRO UI + Responsive)
   - Compatible con core.js + steps 1..5 (vanilla)
   - Tipografía: inherit (no rompe Elementor/Tema)
   - Diseñado para los Steps 2-5 que enviaste
   ============================================================ */

:root {
  --vw-primary: #111827;

  --vw-bg: #ffffff;
  --vw-card-bg: #ffffff;

  --vw-text: #0f172a;
  --vw-muted: #6b7280;

  --vw-border: #e5e7eb;

  --vw-soft: #f3f4f6;
  --vw-soft-2: #f9fafb;

  --vw-radius: 16px;
  --vw-radius-sm: 12px;

  --vw-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  --vw-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);

  --vw-ring: 0 0 0 4px rgba(17, 24, 39, 0.12);

  --vw-danger-bg: #fef2f2;
  --vw-danger-border: #fecaca;
  --vw-danger-text: #991b1b;

  --vw-success-bg: #ecfdf5;
  --vw-success-border: #bbf7d0;
  --vw-success-text: #065f46;
}

/* ------------------------------------------------------------
   Scope + base
   ------------------------------------------------------------ */
.vectis-wizard,
.vectis-wizard * {
  box-sizing: border-box;
}

.vectis-wizard {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;

  font-family: inherit;
  color: var(--vw-text);
}

.vectis-wizard a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vectis-wizard a:hover {
  opacity: 0.9;
}

/* ------------------------------------------------------------
   Steps header
   ------------------------------------------------------------ */
.vw-steps {
  margin-bottom: 14px;

  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding: 10px;

  background: var(--vw-soft-2);
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);

  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.vw-steps::-webkit-scrollbar {
  height: 8px;
}
.vw-steps::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 999px;
}
.vw-steps::-webkit-scrollbar-track {
  background: transparent;
}

.vw-step {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  background: #fff;
  border: 1px solid var(--vw-border);

  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  color: var(--vw-text);

  user-select: none;
  cursor: pointer;

  transition:
    transform 0.06s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.vw-step:hover {
  background: var(--vw-soft-2);
}

.vw-step:active {
  transform: translateY(1px);
}

.vw-step.is-active {
  background: var(--vw-primary);
  border-color: var(--vw-primary);
  color: #fff;
}

/* ------------------------------------------------------------
   Cards / sections
   ------------------------------------------------------------ */
.vw-card {
  background: var(--vw-card-bg);
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius);
  padding: 18px;
  box-shadow: var(--vw-shadow);
  overflow: hidden;
}

/* Cuando anidas .vw-card dentro de .vw-card (tú lo haces en step2/5)
   que sea más suave y no “doble sombra” fuerte */
.vw-card .vw-card {
  box-shadow: var(--vw-shadow-sm);
  border-radius: 14px;
}

/* Títulos */
.vw-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.vw-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.vw-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.vw-help {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--vw-muted);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Grid form
   ------------------------------------------------------------ */
.vw-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .vw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vw-field label {
  display: block;
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.85);
}

/* inputs */
.vw-field input,
.vw-field select,
.vw-field textarea {
  width: 100%;
  border: 1px solid var(--vw-border);
  border-radius: 14px;

  padding: 12px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--vw-text);

  background: #fff;
  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.06s ease,
    background 0.15s ease;
}

.vw-field input::placeholder,
.vw-field textarea::placeholder {
  color: rgba(107, 114, 128, 0.85);
}

.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus {
  border-color: var(--vw-primary);
  box-shadow: var(--vw-ring);
}

.vw-field input:disabled,
.vw-field select:disabled,
.vw-field textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--vw-soft-2);
}

/* datetime-local: mejora visual en mobile */
.vw-field input[type='datetime-local'] {
  min-height: 44px;
}

/* ------------------------------------------------------------
   Consent block (Step 1)
   ------------------------------------------------------------ */
.vw-consent {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;

  background: var(--vw-soft-2);
  border: 1px solid rgba(229, 231, 235, 0.9);
}

.vw-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.82);
  font-family: inherit;
}

.vw-consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Buttons / actions
   ------------------------------------------------------------ */
.vw-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;

  flex-wrap: wrap;
  justify-content: flex-end;
}

.vw-btn {
  appearance: none;
  border: 1px solid var(--vw-border);
  background: #fff;
  color: var(--vw-text);

  border-radius: 12px;
  padding: 11px 14px;

  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  font-family: inherit;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition:
    transform 0.06s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.vw-btn:hover {
  background: var(--vw-soft-2);
}

.vw-btn:active {
  transform: translateY(1px);
}

.vw-btn:focus-visible {
  outline: none;
  box-shadow: var(--vw-ring);
}

.vw-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.vw-btn-primary {
  background: var(--vw-primary);
  border-color: var(--vw-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16);
}

.vw-btn-primary:hover {
  opacity: 0.95;
}

/* Mobile actions full width si hay varios */
@media (max-width: 420px) {
  .vw-actions {
    justify-content: stretch;
  }
  .vw-actions .vw-btn {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------
   Errors / success / loading / empty
   ------------------------------------------------------------ */
.vw-error {
  margin-top: 12px;
  padding: 12px;

  border-radius: 12px;
  background: var(--vw-danger-bg);
  border: 1px solid var(--vw-danger-border);
  color: var(--vw-danger-text);

  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.vw-success {
  margin-top: 12px;
  padding: 12px;

  border-radius: 12px;
  background: var(--vw-success-bg);
  border: 1px solid var(--vw-success-border);
  color: var(--vw-success-text);

  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.vw-loading,
.vw-empty {
  padding: 12px;
  border-radius: 12px;
  background: var(--vw-soft-2);
  border: 1px dashed var(--vw-border);
  color: var(--vw-muted);
  font-size: 13px;
}

.vw-muted {
  color: var(--vw-muted);
  font-weight: 800;
}

/* ------------------------------------------------------------
   Vehicle box (Step2)
   (tú usas .vw-card + #vw_vehicle_card con estilos inline,
   aquí solo “pulimos” para que se vea más pro)
   ------------------------------------------------------------ */
#vw_vehicle_box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

#vw_vehicle_box img {
  display: block;
}

/* ------------------------------------------------------------
   Lists (Insurances / Extras)
   ------------------------------------------------------------ */
.vw-list {
  display: grid;
  gap: 10px;
}

.vw-item {
  border: 1px solid var(--vw-border);
  border-radius: 14px;
  background: #fff;

  padding: 12px;
  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.06s ease,
    box-shadow 0.15s ease;
}

/* Tu markup a veces es label.vw-item (seguro) y a veces div.vw-item (extras) */
label.vw-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
}

div.vw-item {
  display: grid;
  gap: 10px;
  align-items: start;
}

.vw-item:hover {
  background: var(--vw-soft-2);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.vw-item:active {
  transform: translateY(1px);
}

.vw-item-left {
  padding-top: 2px;
}

.vw-check,
.vw-radio {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.vw-item-title {
  display: flex;
  gap: 8px;
  align-items: center;

  font-size: 14px;
  font-weight: 950;
  color: var(--vw-text);
  line-height: 1.2;
}

.vw-item-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--vw-muted);
  line-height: 1.35;
}

.vw-item-right {
  text-align: right;
  white-space: nowrap;
}

.vw-item-price {
  font-size: 13px;
  font-weight: 950;
  color: var(--vw-text);
}

/* Badge */
.vw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;
  border-radius: 999px;

  background: rgba(17, 24, 39, 0.08);
  color: var(--vw-text);

  font-size: 11px;
  font-weight: 950;
  border: 1px solid rgba(17, 24, 39, 0.12);
}

/* Si el seguro está obligatorio, que destaque un poco más */
label.vw-item[data-required='1'] .vw-badge {
  background: rgba(17, 24, 39, 0.12);
}

/* Mejor “estado seleccionado”:
   (JS marca el radio/check, pero no le pones clase al item)
   Usamos :has para navegadores modernos, y fallback con focus-within */
.vw-item:focus-within {
  border-color: rgba(17, 24, 39, 0.35);
  box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08);
}

@supports selector(.vw-item:has(input:checked)) {
  .vw-item:has(input:checked) {
    border-color: rgba(17, 24, 39, 0.45);
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  }
}

/* Disabled radios cuando hay requiredId */
.vw-item input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   Qty controls (Step4 Extras)
   ------------------------------------------------------------ */
.vw-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vw-qty button {
  width: 36px;
  height: 36px;
  border-radius: 10px;

  border: 1px solid var(--vw-border);
  background: #fff;
  color: var(--vw-text);

  font-weight: 950;
  font-family: inherit;
  cursor: pointer;

  transition:
    background 0.15s ease,
    transform 0.06s ease,
    box-shadow 0.15s ease;
}

.vw-qty button:hover {
  background: var(--vw-soft-2);
}

.vw-qty button:active {
  transform: translateY(1px);
}

.vw-qty button:focus-visible {
  outline: none;
  box-shadow: var(--vw-ring);
}

.vw-qty input {
  width: 64px;
  text-align: center;

  border-radius: 10px;
  border: 1px solid var(--vw-border);

  padding: 9px 8px;
  font-weight: 950;
  font-family: inherit;

  outline: none;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.vw-qty input:focus {
  border-color: var(--vw-primary);
  box-shadow: var(--vw-ring);
}

/* Ocultar “spinners” en number (más limpio) */
.vw-qty input[type='number']::-webkit-outer-spin-button,
.vw-qty input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vw-qty input[type='number'] {
  -moz-appearance: textfield;
}

/* ------------------------------------------------------------
   Summary (Step5)
   - tú metes <ul> inline, y bloques con <hr>
   ------------------------------------------------------------ */
#vw_sum_box ul {
  margin: 0;
  padding-left: 18px;
}

#vw_sum_box li {
  margin: 6px 0;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.92);
}

#vw_sum_box hr {
  border: none;
  border-top: 1px solid var(--vw-border);
}

/* Totales: que se vean como “rows” */
#vw_sum_totals > div {
  background: #fff;
}

/* Links en success: que se vea tipo botón-link */
#vw_sum_success a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 8px;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.25);
  text-decoration: none;
  font-weight: 950;
}

#vw_sum_success a:hover {
  background: var(--vw-soft-2);
}

/* ------------------------------------------------------------
   Code styling (por si aparece)
   ------------------------------------------------------------ */
.vw-card code {
  background: var(--vw-soft-2);
  border: 1px solid var(--vw-border);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
}

/* ------------------------------------------------------------
   Responsive spacing
   ------------------------------------------------------------ */
@media (min-width: 720px) {
  .vectis-wizard {
    padding: 18px;
  }

  .vw-card {
    padding: 20px;
  }

  .vw-steps {
    padding: 12px;
    gap: 12px;
  }

  .vw-step {
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  /* En móvil, los list items (seguros/extras) se acomodan mejor */
  label.vw-item {
    grid-template-columns: 24px 1fr;
  }
  label.vw-item .vw-item-right {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 8px;
    white-space: normal;
  }

  /* En extras, el bloque derecho puede bajar */
  div.vw-item {
    grid-template-columns: 1fr;
  }
}