/* Mobile-first Bootstrap-based stylesheet (unique look) */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');

:root{
  --mc-primary: #0a74da;
  --mc-accent: #6dd3ff;
  --mc-bg: #f7f9fb;
  --mc-card: #ffffff;
  --mc-muted: #6c757d;
  --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--mc-bg);
  color:#0f1720;
  -webkit-font-smoothing:antialiased;
}

/* Form container - mobile-first */
.motor-form{
  max-width:720px;
  margin:1rem auto;
  padding:1rem;
}

.motor-form > h2{
  margin:0 0 .8rem 0;
  font-size:1.1rem;
  font-weight:700;
  color:var(--mc-primary);
  background:linear-gradient(90deg,var(--mc-accent), rgba(10,116,218,.08));
  padding:.6rem .75rem;
  border-radius:calc(var(--radius) - 4px);
}

.motor-form{background:var(--mc-card); border-radius:var(--radius); box-shadow:0 8px 24px rgba(12,18,31,0.06);}

/* Labels and help text */
.motor-form label{display:block; font-size:.9rem; font-weight:600; margin-top:.6rem; color:#0b2540}
.motor-form .help{font-size:.8rem; color:var(--mc-muted); margin-top:.25rem}

/* Small visible label used for inputs that don't support placeholders (eg. date) */
.motor-form .small-label{display:block; font-size:.85rem; color:var(--mc-muted); font-weight:600; margin-bottom:.35rem}

/* Inputs: large touch targets */
.motor-form input[type="text"],
.motor-form input[type="password"],
.motor-form input[type="date"],
.motor-form input[type="number"],
.motor-form select,
.motor-form textarea{
  width:100%;
  padding:.85rem .75rem;
  margin-top:.35rem;
  border:1px solid rgba(15,23,32,0.08);
  border-radius:10px;
  font-size:1rem;
  background:#ffffff;
}

.motor-form input:focus, .motor-form select:focus, .motor-form textarea:focus{outline:none; box-shadow:0 0 0 4px rgba(10,116,218,0.06); border-color:var(--mc-primary)}

/* Two-column rows for wider screens */
.form-row{display:grid; grid-template-columns:1fr; gap:.65rem;}
@media (min-width:576px){ .form-row{ grid-template-columns:1fr 1fr; } }

/* Submit button: prominent CTA */
.motor-form button[type="submit"]{
  display:block; width:100%; margin-top:1rem; padding:.85rem; font-size:1.05rem; font-weight:700;
  color:#fff; background: linear-gradient(90deg, #007bff, #005bb5); border:0; border-radius:12px; cursor:pointer;
}
.motor-form button[type="submit"]:active{transform:translateY(1px)}

/* Next button: same as submit */
#nextBtn{
  display:block; width:100%; margin-top:1rem; padding:.85rem; font-size:1.05rem; font-weight:700;
  color:#fff; background:linear-gradient(90deg,var(--mc-primary),#0066cc); border:0; border-radius:12px; cursor:pointer;
}
#nextBtn:active{transform:translateY(1px)}

/* Previous button: same as submit */
#prevBtn{
  display:block; width:100%; margin-top:1rem; padding:.85rem; font-size:1.05rem; font-weight:700;
  color:#fff; background:linear-gradient(90deg,var(--mc-primary),#0066cc); border:0; border-radius:12px; cursor:pointer;
}
#prevBtn:active{transform:translateY(1px)}

/* Footer spacing to avoid overlap on small screens */
.motor-form .spacer{height:6px}

/* Utility: compact two-column grid (use in future) */
.mc-grid{display:grid; gap:.6rem; grid-template-columns:1fr}
@media(min-width:576px){.mc-grid{grid-template-columns:1fr 1fr}}

/* Larger layouts: center card */
@media(min-width:900px){
  .motor-form{margin:2.25rem auto; padding:1.25rem 1.5rem}
}

/* Small tweaks for accessibility */
.motor-form input, .motor-form select, .motor-form textarea{font-size:1rem; font-weight:600}

/* Keep Bootstrap utilities available; avoid overriding .row */
/* Floating-label styles (for inputs like date) */
.floating{position:relative}
.floating input,.floating select,.floating textarea{padding-top:1.25rem}
.floating label{
  position:absolute; left:.85rem; top:.55rem; font-size:.95rem;
  color:var(--mc-muted); transition:transform .15s ease, font-size .15s ease, top .15s ease;
  pointer-events:none; font-weight:600; background:transparent; padding:0 .25rem;
}
.floating.filled label,
.floating input:focus + label,
.floating textarea:focus + label,
.floating select:focus + label{
  transform: translateY(-0.95rem) scale(.92);
  color:var(--mc-primary);
  font-size:.82rem; top:.2rem;
}

/* Placeholder and select placeholder styling */
.motor-form ::placeholder { /* standard */
  color: #6c757d; /* muted but readable */
  font-weight: 600;
  opacity: 1; /* ensure consistent visibility across browsers */
}
.motor-form ::-webkit-input-placeholder { color: #6c757d; font-weight:600; }
.motor-form ::-moz-placeholder { color: #6c757d; font-weight:600; }
.motor-form ::-ms-input-placeholder { color: #6c757d; font-weight:600; }
.motor-form ::-ms-input-placeholder { color: #6c757d; font-weight:600; }

/* Style the disabled placeholder option in selects */
.motor-form select { color: var(--mc-muted); }
.motor-form select option[disabled] { color: var(--mc-muted); font-weight:600; }
.motor-form select option { font-weight:600; }
/* When a real value is selected, make the displayed select text darker */
.motor-form select.has-value { color: #0f1720; }

/* Validation states */
.field-error { border-color: #dc3545 !important; background-color: rgba(220,53,69,.05) !important; }
.error-tooltip { color: #dc3545; font-size: .83rem; margin-top: .2rem; display: block; }
.validation-alert { display:none; padding:1rem; background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; border-radius:8px; margin-bottom:1rem; }
.validation-alert.show { display:block; }
.validation-alert h5 { margin:0 0 .5rem 0; }
.validation-alert ul { margin:0; padding-left:1.5rem; }

/* Remove number input spinners */
.motor-form input[type="number"]::-webkit-inner-spin-button,
.motor-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.motor-form input[type="number"] { -moz-appearance: textfield; }