/* ============================================================
   ATN Driver Signup — design system
   Brand-aligned with ukatn.com: corporate royal-navy + white,
   blue accent, clean structured layout. Archivo (display) +
   Hanken Grotesk (body). Overrides Bootstrap component classes
   so existing markup lifts automatically.
   ============================================================ */

:root {
    --navy:       #1F3A66;
    --navy-700:   #16294A;
    --navy-500:   #45618B;

    --blue:       #2E6DB4;
    --blue-600:   #255A95;
    --blue-100:   #E2EDF8;

    --canvas:     #F4F6FA;
    --card:       #FFFFFF;
    --line:       #E1E7F0;
    --card-line:  #E7ECF3;

    --text:       #1A2433;
    --muted:      #5E6B7B;
    --success:    #2E7D5B;
    --success-100:#DCEFE5;
    --danger:     #C0392B;
    --danger-50:  #FBEBE9;

    --radius:     10px;
    --radius-sm:  8px;
    --shadow-sm:  0 1px 2px rgba(20,41,74,.06), 0 1px 3px rgba(20,41,74,.07);
    --shadow-md:  0 10px 30px -12px rgba(20,41,74,.22), 0 2px 6px rgba(20,41,74,.06);
    --shadow-lg:  0 24px 56px -20px rgba(20,41,74,.30);

    --font-display: "Archivo", ui-sans-serif, system-ui, Arial, sans-serif;
    --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, Arial, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

h1, h2, h3, h4, .navbar-brand {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    color: var(--navy);
    font-weight: 700;
}

a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-600); }

/* ---------- app shell ---------- */
.app-header {
    background: var(--navy);
    border-bottom: 3px solid var(--blue);
}
.app-header .container { max-width: 820px; }

.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    color: #fff; text-decoration: none; padding: .85rem 0;
}
.brand:hover { color: #fff; }
.brand .plane { color: #fff; width: 26px; height: 26px; flex: none; }
.brand .logo { width: 40px; height: 40px; flex: none; border-radius: 50%; }

[x-cloak] { display: none !important; }
.brand .brand-mark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.55rem; letter-spacing: .02em;
    line-height: 1; color: #fff;
}
.brand-tag {
    font-family: var(--font-body); font-weight: 500;
    font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.62); align-self: center;
    padding-left: .7rem; margin-left: .1rem; border-left: 1px solid rgba(255,255,255,.22);
}
@media (max-width: 459.98px) { .brand-tag { display: none; } }

main.app-main { max-width: 820px; }

.app-footer {
    color: var(--muted); font-size: .82rem;
    border-top: 1px solid var(--line); margin-top: 4rem;
    background: #fff;
}
.app-footer .container { max-width: 820px; }
.app-footer .lock { color: var(--success); }

/* ---------- surfaces ---------- */
.panel {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2.25rem;
}
@media (max-width: 575.98px) { .panel { padding: 1.5rem; } }

.eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--blue);
    margin-bottom: .6rem;
}

.page-title { font-size: 1.65rem; margin: 0 0 .3rem; }
.page-sub   { color: var(--muted); margin: 0 0 1.6rem; font-size: .98rem; }

/* ---------- auth (mobile entry / OTP) ---------- */
.auth-wrap { min-height: calc(100vh - 220px); display: flex; align-items: center; }
.auth-card { width: 100%; max-width: 440px; margin: 2.5rem auto; }
.auth-badge {
    width: 56px; height: 56px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--navy-500), var(--navy));
    color: #fff; box-shadow: var(--shadow-sm);
    margin-bottom: 1.3rem;
}
.auth-badge svg { width: 26px; height: 26px; }

/* ---------- forms ---------- */
.form-label {
    font-weight: 600; color: var(--navy);
    font-size: .9rem; margin-bottom: .4rem;
}
.form-label .text-muted { font-weight: 400; }

.form-control, .form-select {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    color: var(--text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #A7B0BD; }
.form-control:hover, .form-select:hover { border-color: #C3CDDB; }
.form-control:focus, .form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(46,109,180,.16);
    background-color: #fff;
}
.form-control-lg, .form-select-lg { font-size: 1.05rem; padding: .85rem 1rem; }

/* coded inputs (OTP) */
.input-code {
    text-align: center; letter-spacing: .55em; text-indent: .55em;
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
}

/* validation */
.text-danger { color: var(--danger) !important; }
.field-validation-error, .validation-summary-errors { color: var(--danger); }
.input-validation-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 4px var(--danger-50) !important;
}

.alert-danger {
    background: var(--danger-50); border: 1px solid #F0C5BF;
    color: #8E2A20; border-radius: var(--radius-sm);
    font-size: .92rem;
}
.alert-danger:empty { display: none; }
.alert ul, .alert ol { margin-bottom: 0; }
.alert-success {
    background: var(--success-100); border: 1px solid #BFE2D0;
    color: #1E5E43; border-radius: var(--radius-sm);
}

/* radios / checks */
.form-check-input { border: 1.5px solid #C3CDDB; cursor: pointer; }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46,109,180,.16); }
.form-check-label { cursor: pointer; }

/* a selectable option row (radios that read like cards) */
.option-grid { display: grid; gap: .55rem; }
.option-row {
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: .75rem .9rem; margin: 0; transition: border-color .15s, background .15s;
}
.option-row:hover { border-color: #C3CDDB; background: #F8FAFD; }
.option-row:has(.form-check-input:checked) {
    border-color: var(--navy); background: #F5F8FC;
    box-shadow: inset 0 0 0 1px var(--navy);
}

/* ---------- buttons ---------- */
.btn {
    font-family: var(--font-body); font-weight: 600;
    border-radius: var(--radius-sm); letter-spacing: -.01em;
    padding: .6rem 1.1rem; transition: transform .04s ease, background .15s, box-shadow .15s, border-color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .85rem 1.4rem; font-size: 1.02rem; }

.btn-primary {
    background: var(--navy); border-color: var(--navy); color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px rgba(46,109,180,.35); }
.btn-check:focus + .btn-primary, .btn-primary:active { background: var(--navy) !important; border-color: var(--navy) !important; }

.btn-success {
    background: var(--success); border-color: var(--success); color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-success:hover, .btn-success:focus { background: #266B4D; border-color: #266B4D; color: #fff; }

.btn-outline-secondary {
    color: var(--navy); border: 1.5px solid var(--line); background: transparent;
}
.btn-outline-secondary:hover { background: #fff; border-color: var(--navy); color: var(--navy); }

/* bright-blue accent button, for optional secondary CTAs */
.btn-accent { background: var(--blue); border: 1px solid var(--blue); color: #fff; font-weight: 700; }
.btn-accent:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ---------- wizard progress ---------- */
.wiz { margin-bottom: 1.6rem; }
.wiz-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .78rem; color: var(--muted); margin-bottom: .55rem;
    letter-spacing: .02em;
}
.wiz-meta .cur { font-weight: 600; color: var(--navy); }
.wiz-track {
    display: flex; gap: 6px; align-items: center;
}
.wiz-seg {
    flex: 1; height: 6px; border-radius: 999px; background: var(--line);
    overflow: hidden; position: relative;
}
.wiz-seg.done   { background: var(--navy); }
.wiz-seg.active::after {
    content: ""; position: absolute; inset: 0; width: 55%;
    background: var(--blue); border-radius: 999px;
}
.wiz-labels {
    display: flex; justify-content: space-between; margin-top: .5rem;
    font-size: .68rem; letter-spacing: .04em; color: #94A0AF;
    text-transform: uppercase;
}
.wiz-labels span { flex: 1; text-align: center; }
.wiz-labels span:first-child { text-align: left; }
.wiz-labels span:last-child  { text-align: right; }
.wiz-labels span.on { color: var(--blue); font-weight: 700; }
@media (max-width: 575.98px) { .wiz-labels { display: none; } }

/* ---------- nested bootstrap components inside panels ---------- */
.alert-info {
    background: var(--blue-100); border: 1px solid #C8DCF0; color: var(--navy);
    border-radius: var(--radius-sm); font-size: .92rem;
}
.card {
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: none; background: #FAFCFE;
}
.card-header {
    background: transparent; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 700; color: var(--navy);
}
.form-text { color: var(--muted); font-size: .82rem; }
.badge.bg-success { background: var(--success) !important; font-weight: 600; letter-spacing: .01em; }
dl.row dt { color: var(--navy); font-weight: 600; }
dl.row dd { color: var(--text); }

/* ---------- document cards (step 5) ---------- */
.doc-card .doc-preview { max-height: 200px; object-fit: contain; }

/* ---------- page entrance ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .panel, .auth-card { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
}