/* Driver Onboarding Redesign Sprint — mobile-first 5-step wizard.
   Built on the shared design tokens (assets/css/tokens.css) for visual
   consistency with the rest of the site; every rule below is scoped
   under .tlp-ob so it can never leak into/be overridden by the old
   .tlp-auth-card styles auth.css still ships for other pages. */

.tlp-ob {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--tlp-space-6) var(--tlp-space-4) var(--tlp-space-12);
    font-family: var(--tlp-font);
    color: var(--tlp-text);
}

.tlp-ob-progress {
    margin-bottom: var(--tlp-space-6);
}

.tlp-ob-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--tlp-gray-100);
    overflow: hidden;
}

.tlp-ob-progress-fill {
    height: 100%;
    width: 20%;
    background: var(--tlp-yellow);
    border-radius: 999px;
    transition: width .35s ease;
}

.tlp-ob-progress-label {
    margin-top: var(--tlp-space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--tlp-gray-600);
    text-align: center;
}

.tlp-ob-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--tlp-navy);
}

.tlp-ob-subtitle {
    font-size: 15px;
    color: var(--tlp-gray-600);
    margin: 0 0 var(--tlp-space-6);
    line-height: 1.5;
}

.tlp-ob-step {
    animation: tlp-ob-fade-in .25s ease;
}

@keyframes tlp-ob-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.tlp-ob-field {
    margin-bottom: var(--tlp-space-4);
}

.tlp-ob-field-row {
    display: flex;
    gap: var(--tlp-space-3);
    margin-bottom: var(--tlp-space-4);
}

.tlp-ob-field-row .tlp-ob-field {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.tlp-ob-field label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--tlp-navy);
}

.tlp-ob-input-lg,
.tlp-ob input[type="text"],
.tlp-ob input[type="tel"],
.tlp-ob input[type="number"],
.tlp-ob input[type="date"],
.tlp-ob select {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
    font-size: 17px;
    border: 2px solid var(--tlp-gray-300);
    border-radius: var(--tlp-radius-control);
    background: var(--tlp-white);
    color: var(--tlp-text);
    -webkit-appearance: none;
    appearance: none;
}

.tlp-ob-input-lg:focus,
.tlp-ob select:focus {
    outline: none;
    border-color: var(--tlp-yellow);
    box-shadow: 0 0 0 3px rgba(255,196,0,.25);
}

.tlp-ob-input-code {
    letter-spacing: 8px;
    font-size: 24px;
    text-align: center;
    font-weight: 700;
}

.tlp-ob-input-plate {
    text-transform: uppercase;
}

.tlp-ob-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: var(--tlp-radius-control);
    cursor: pointer;
    text-align: center;
    min-height: 56px;
    transition: transform .1s ease, opacity .15s ease;
}

.tlp-ob-btn:active {
    transform: scale(.98);
}

.tlp-ob-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tlp-ob-btn-primary {
    background: var(--tlp-black);
    color: var(--tlp-black-text);
}

.tlp-ob-btn-primary:hover:not(:disabled) {
    background: var(--tlp-black-hover);
}

.tlp-ob-btn-secondary {
    background: var(--tlp-gray-100);
    color: var(--tlp-navy);
    border: 2px solid var(--tlp-gray-300);
}

.tlp-ob-btn-ghost {
    background: transparent;
    color: var(--tlp-gray-600);
    border: 2px solid var(--tlp-gray-300);
}

.tlp-ob-btn-link {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--tlp-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    padding: 10px;
    cursor: pointer;
    margin-top: 4px;
}

.tlp-ob-camera-btn {
    margin-top: 12px;
}

.tlp-ob-alert {
    padding: 14px 16px;
    border-radius: var(--tlp-radius-control);
    font-size: 14px;
    margin-bottom: var(--tlp-space-4);
    line-height: 1.5;
}

.tlp-ob-alert-error {
    background: #FBEAE8;
    color: var(--tlp-error);
    border: 1px solid rgba(192,57,43,.25);
}

.tlp-ob-alert-info {
    background: #FFF7DC;
    color: #6B5300;
    border: 1px solid rgba(255,196,0,.4);
}

.tlp-ob-alert-success {
    background: #E7F6EE;
    color: var(--tlp-success);
    border: 1px solid rgba(30,142,90,.25);
}

/* Photo/document capture tiles (Steps 4 & 5) */
.tlp-ob-photo-tile {
    display: flex;
    align-items: center;
    gap: var(--tlp-space-3);
    padding: var(--tlp-space-3);
    border: 2px solid var(--tlp-gray-300);
    border-radius: var(--tlp-radius-card);
    margin-bottom: var(--tlp-space-4);
    background: var(--tlp-white);
}

.tlp-ob-photo-tile.tlp-ob-done {
    border-color: var(--tlp-success);
    background: #F3FBF7;
}

.tlp-ob-photo-tile.tlp-ob-warn {
    border-color: #D98C00;
    background: #FFF8EC;
}

.tlp-ob-photo-preview {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--tlp-gray-100) center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--tlp-gray-600);
}

.tlp-ob-photo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tlp-ob-photo-info strong {
    font-size: 14px;
    color: var(--tlp-navy);
}

.tlp-ob-photo-status {
    font-size: 12px;
    color: var(--tlp-gray-600);
}

.tlp-ob-photo-tile.tlp-ob-done .tlp-ob-photo-status {
    color: var(--tlp-success);
    font-weight: 600;
}

.tlp-ob-photo-warning {
    font-size: 12px;
    color: #D98C00;
    font-weight: 600;
}

.tlp-ob-camera-btn {
    flex-shrink: 0;
    width: auto;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 13px;
    white-space: nowrap;
}

/* The theme's bootstrap.css has an "input[type=\"file\"] { display: block; }"
   rule with the same specificity as "[hidden] { display: none; }" and loads
   after it, so it wins the cascade and makes our hidden file inputs render
   as visible native controls, overlapping the "Fotoğraf Çek" label text.
   Force them hidden again, scoped to just these camera-trigger buttons. */
.tlp-ob-camera-btn input[type="file"] {
    display: none;
}

/* Shared photo/document upload tiles (vehicle photos + all Belgeler docs:
   Ehliyet, Ruhsat, Vergi Levhası, K1, Psikoteknik). Let the camera button
   wrap onto its own line instead of squeezing into one row when the
   preview + title + status text don't fit narrow (mobile) widths - that
   squeeze is what was causing the text/button overlap. The existing
   "gap" on this flex container spaces the wrapped line automatically,
   and the card has no fixed height so it grows with wrapped content.
   Desktop is unaffected: there's normally enough width for one row. */
.tlp-ob-photo-tile {
    flex-wrap: wrap;
}

.tlp-ob-photo-info,
.tlp-ob-photo-status,
.tlp-ob-photo-warning {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.tlp-ob-review {
    margin-top: var(--tlp-space-6);
    padding-top: var(--tlp-space-4);
    border-top: 1px solid var(--tlp-gray-300);
}

.tlp-ob-review-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tlp-navy);
    margin: 0 0 4px;
}

.tlp-ob-consents {
    margin-top: var(--tlp-space-6);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tlp-ob-consent-details {
    font-size: 13px;
    margin-bottom: 6px;
}

.tlp-ob-consent-body {
    max-height: 160px;
    overflow: auto;
    margin-top: 6px;
    color: var(--tlp-gray-600);
}

.tlp-ob-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.tlp-ob-checkbox input {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tlp-ob-nav {
    display: flex;
    gap: var(--tlp-space-3);
    margin-top: var(--tlp-space-8);
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--tlp-white) 70%, rgba(255,255,255,0));
    padding-top: var(--tlp-space-4);
    padding-bottom: var(--tlp-space-4);
}

.tlp-ob-nav .tlp-ob-btn-ghost {
    flex: 0 0 96px;
}

.tlp-ob-nav .tlp-ob-btn-primary {
    flex: 1;
}

.tlp-ob-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tlp-success);
    color: var(--tlp-white);
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tlp-space-6);
}

#tlp-ob-step-6 {
    text-align: center;
}

#tlp-ob-step-7 {
    text-align: center;
}

.tlp-ob-location-card {
    background: var(--tlp-gray-100);
    border-radius: var(--tlp-radius-card);
    padding: var(--tlp-space-8) var(--tlp-space-6);
    margin-top: var(--tlp-space-6);
}

.tlp-ob-location-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tlp-white);
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tlp-space-4);
}

.tlp-ob-location-card[data-state="granted"] .tlp-ob-location-icon {
    background: var(--tlp-success);
    color: var(--tlp-white);
}

.tlp-ob-location-card[data-state="denied"] .tlp-ob-location-icon,
.tlp-ob-location-card[data-state="error"] .tlp-ob-location-icon {
    background: var(--tlp-error);
    color: var(--tlp-white);
}

.tlp-ob-location-status-text {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 var(--tlp-space-6);
}

.tlp-ob-location-card .tlp-ob-btn {
    margin: 0 auto;
    max-width: 320px;
}

.tlp-ob-location-hint {
    font-size: 14px;
    color: var(--tlp-gray-600);
    margin: var(--tlp-space-4) 0 0;
}

@media (min-width: 560px) {
    .tlp-ob {
        padding-top: var(--tlp-space-12);
    }
}


/* Step 2 optional profile photo (2026-08-29) */
.tlp-ob-profile-photo-field { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 20px; }
.tlp-ob-profile-photo-preview { width: 84px; height: 84px; border-radius: 50%; background: var(--tlp-gray-100, #f2f2f2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #99a; border: 2px solid var(--tlp-gray-100, #e2e2e2); }
.tlp-ob-profile-photo-field .tlp-ob-photo-status { font-size: 12px; color: #667; min-height: 14px; }