/**
 * Share My Ride — Driver Application wizard + status screen
 * ([smr_driver_apply]). Self-contained color namespace (--smr-da-*)
 * rather than relying on smr-auth.css's --smr-auth-* variables, since
 * those are scoped to descendants of .smr-auth and this wizard has its
 * own top-level wrapper — same pattern smr-dashboard.css uses for its
 * own --smr-p-* namespace.
 */
/**
 * Color/spacing tokens live at :root (not scoped to .smr-apply-wrap)
 * because this stylesheet is used two ways: the standalone
 * [smr_driver_apply] page (which does have a .smr-apply-wrap wrapper)
 * and the driver signup flow embedded inside register.php's own
 * .smr-auth-card (which does NOT — nesting .smr-apply-wrap's own
 * layout chrome inside the login-style panel would fight its width).
 * Scoping the vars to .smr-apply-wrap meant every var(--smr-da-*)
 * reference silently failed to resolve in the embedded context —
 * CSS treats a var() with no fallback and an undefined custom
 * property as invalid, which drops the WHOLE declaration, not just
 * that value. That's what was making borders and button backgrounds
 * disappear entirely once this got embedded.
 */
:root {
	--smr-da-brand: #00808c;
	--smr-da-brand-dark: #006670;
	--smr-da-navy: #0f2942;
	--smr-da-bg: #f3f4f6;
	--smr-da-border: #e5e7eb;
	--smr-da-text: #111827;
	--smr-da-text-muted: #6b7280;
	--smr-da-text-faint: #9ca3af;
	--smr-da-danger: #dc2626;
	--smr-da-danger-tint: #fef2f2;
	--smr-da-success: #059669;
	--smr-da-success-tint: #ecfdf5;
	--smr-da-orange: #d97706;
	--smr-da-orange-tint: #fffbeb;
}
.smr-apply-wrap {
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--smr-da-text);
	max-width: 780px;
	margin: 32px auto;
	padding: 0 16px;
}
.smr-apply-wrap *, [data-smr-apply-form] * { box-sizing: border-box; }

.smr-apply-card {
	background: #fff; border-radius: 20px; padding: 36px 40px 28px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(15, 41, 66, 0.08);
}

/* ---------- Header ---------- */
.smr-apply-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--smr-da-navy); margin-bottom: 22px; }
.smr-apply-header h1 { font-size: 25px; font-weight: 700; color: var(--smr-da-navy); margin: 0 0 6px; }
.smr-apply-header p { font-size: 13.5px; color: var(--smr-da-text-muted); margin: 0 0 26px; }

/* ---------- Progress ---------- */
.smr-apply-progress {
	display: flex; list-style: none; margin: 0 0 30px; padding: 0;
	flex-wrap: wrap; justify-content: center; row-gap: 14px; gap: 2px;
}
.smr-apply-progress li {
	flex: 1; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px;
	position: relative; text-align: center;
}
.smr-apply-progress li:not(:last-child)::after {
	content: ""; position: absolute; top: 13px; left: calc(50% + 20px); right: calc(-50% + 20px);
	height: 2px; background: var(--smr-da-border);
}
.smr-apply-progress li.is-done:not(:last-child)::after { background: var(--smr-da-brand); }
.smr-apply-progress-dot {
	width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
	background: var(--smr-da-bg); color: var(--smr-da-text-faint);
	display: flex; align-items: center; justify-content: center;
	font-size: 11.5px; font-weight: 700; position: relative; z-index: 1;
	transition: background 0.15s ease, color 0.15s ease;
}
.smr-apply-progress li.is-active .smr-apply-progress-dot { background: var(--smr-da-brand); color: #fff; }
.smr-apply-progress li.is-done .smr-apply-progress-dot { background: var(--smr-da-success); color: #fff; }
.smr-apply-progress-label { font-size: 10.5px; font-weight: 600; color: var(--smr-da-text-faint); white-space: nowrap; }
.smr-apply-progress li.is-active .smr-apply-progress-label { color: var(--smr-da-navy); }
/* In a narrow panel, wrapping dots onto multiple rows makes the
   connecting lines point at the wrong neighbour — simplest to just
   drop them there and let the dots + labels speak for themselves. */
@container (max-width: 560px) {
	.smr-apply-progress li::after { content: none; }
	.smr-apply-progress li { min-width: 56px; }
}

/* ---------- Steps ---------- */
.smr-apply-step h2 { font-size: 18px; font-weight: 700; color: var(--smr-da-navy); margin: 0 0 4px; }
.smr-apply-step-sub { font-size: 13px; color: var(--smr-da-text-muted); margin: 0 0 22px; }

/* Sized by the actual panel it renders in (narrow login-style panel when
   embedded in registration, wider standalone page otherwise) — a plain
   viewport media query can't tell those apart, since the browser window
   itself is the same width either way. */
[data-smr-apply-form] { container-type: inline-size; }

.smr-apply-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 18px; }
@container (max-width: 560px) { .smr-apply-field-grid { grid-template-columns: 1fr; } }
.smr-apply-field-full { grid-column: 1 / -1; }
.smr-apply-field label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.smr-apply-input {
	width: 100%; padding: 10px 13px; border: 1.5px solid var(--smr-da-border); border-radius: 10px;
	font-size: 13.5px; font-family: inherit; color: var(--smr-da-text); background: #fff;
}
.smr-apply-input:focus { outline: none; border-color: var(--smr-da-brand); }
/* Firefox in particular draws a native red glow around empty/invalid
   required fields even before the user has tried to submit — since the
   wizard's later steps have plenty of required-but-not-yet-filled
   fields sitting off-screen, that shows up as an unintended wash of red
   the moment the page loads. This keeps validation messages (still
   shown via reportValidity() on Continue) without the ambient glow. */
.smr-apply-input:invalid { box-shadow: none; }
.smr-apply-input:required:not(:focus) { box-shadow: none; }
textarea.smr-apply-input { resize: vertical; min-height: 64px; }

/* ---------- Document / photo cards ---------- */
.smr-apply-doc-grid, .smr-apply-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.smr-apply-photo-grid { grid-template-columns: repeat(3, 1fr); }
@container (max-width: 560px) {
	.smr-apply-doc-grid { grid-template-columns: 1fr; }
	.smr-apply-photo-grid { grid-template-columns: 1fr; }
}
.smr-apply-doc-card {
	border: 1.5px solid var(--smr-da-border); border-radius: 14px; padding: 14px 16px;
	display: flex; flex-direction: column; gap: 10px;
}
.smr-apply-doc-card-compact { margin-bottom: 4px; }
.smr-apply-doc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.smr-apply-doc-card-head h4 { font-size: 13px; font-weight: 700; margin: 0 0 2px; color: var(--smr-da-navy); }
.smr-apply-doc-card-head p { font-size: 11px; color: var(--smr-da-text-faint); margin: 0; }
.smr-apply-doc-status {
	font-size: 11px; font-weight: 700; color: var(--smr-da-text-faint);
	background: var(--smr-da-bg); padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.smr-apply-doc-status.is-uploaded { background: var(--smr-da-success-tint); color: var(--smr-da-success); }
.smr-apply-doc-btn {
	align-self: flex-start; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--smr-da-border);
	background: #fff; color: var(--smr-da-brand); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.smr-apply-doc-btn:hover {
	border-color: #2563eb !important; background: #eff6ff !important; color: #2563eb !important;
}

/* ---------- Preview cards ---------- */
.smr-apply-preview-card {
	display: flex; align-items: center; gap: 14px;
	background: var(--smr-da-bg); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px;
}
.smr-apply-preview-avatar {
	width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
	background: var(--smr-da-brand); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.smr-apply-preview-name { font-size: 14.5px; font-weight: 700; color: var(--smr-da-navy); }
.smr-apply-preview-line { font-size: 12px; color: var(--smr-da-text-muted); margin-top: 2px; }
.smr-apply-preview-card-route { flex-direction: column; align-items: flex-start; gap: 8px; }
.smr-apply-preview-route { font-size: 15px; font-weight: 700; color: var(--smr-da-navy); }
.smr-apply-preview-meta { display: flex; gap: 20px; font-size: 12px; color: var(--smr-da-text-muted); }
.smr-apply-preview-meta strong { color: var(--smr-da-navy); }

/* ---------- Days grid / checkboxes ---------- */
.smr-apply-days-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.smr-apply-day-pill {
	position: relative; cursor: pointer;
}
.smr-apply-day-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.smr-apply-day-pill span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; padding: 8px 10px; border-radius: 999px; border: 1.5px solid var(--smr-da-border);
	font-size: 12px; font-weight: 600; color: var(--smr-da-text-muted); transition: all 0.12s ease;
}
.smr-apply-day-pill input:checked + span { background: var(--smr-da-brand); border-color: var(--smr-da-brand); color: #fff; }

.smr-apply-inline-checkbox {
	display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--smr-da-text);
	margin: 0 0 14px; cursor: pointer; line-height: 1.4;
}
.smr-apply-inline-checkbox input { margin-top: 3px; accent-color: var(--smr-da-brand); flex-shrink: 0; }

/* ---------- Step nav ---------- */
.smr-apply-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--smr-da-border); }
.smr-apply-btn-continue, .smr-apply-btn-submit {
	padding: 11px 26px; border: none; border-radius: 10px; background: var(--smr-da-brand); color: #fff;
	font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.smr-apply-btn-continue:hover, .smr-apply-btn-submit:hover { background: var(--smr-da-brand-dark); }
.smr-apply-btn-back {
	padding: 11px 20px; border: 1.5px solid var(--smr-da-border); border-radius: 10px; background: #fff;
	color: var(--smr-da-text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.smr-apply-btn-back:hover {
	border-color: #2563eb !important; color: #2563eb !important; background: #eff6ff !important;
}

/* ---------- Status / confirmation screen ---------- */
.smr-apply-status { display: flex; justify-content: center; padding: 60px 16px; }
.smr-apply-status-card {
	max-width: 440px; width: 100%; text-align: center; background: #fff; border-radius: 20px;
	padding: 40px 32px 34px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(15, 41, 66, 0.08);
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.smr-apply-status-icon {
	width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
}
.smr-apply-status-icon-pending { background: #fffbeb; color: #d97706; }
.smr-apply-status-icon-approved { background: #ecfdf5; color: #059669; }
.smr-apply-status-icon-rejected { background: #fef2f2; color: #dc2626; }
.smr-apply-status-card h1 { font-size: 21px; font-weight: 700; color: #0f2942; margin: 0 0 10px; }
.smr-apply-status-card p { font-size: 13.5px; color: #6b7280; line-height: 1.6; margin: 0 0 22px; }
.smr-apply-status-row {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 12.5px; font-weight: 600; color: #6b7280; margin-bottom: 26px;
}
.smr-apply-status-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.smr-apply-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.smr-apply-status-badge-pending { background: #fffbeb; color: #d97706; }
.smr-apply-status-badge-pending .smr-apply-status-dot { background: #d97706; }
.smr-apply-status-badge-approved { background: #ecfdf5; color: #059669; }
.smr-apply-status-badge-approved .smr-apply-status-dot { background: #059669; }
.smr-apply-status-badge-rejected { background: #fef2f2; color: #dc2626; }
.smr-apply-status-badge-rejected .smr-apply-status-dot { background: #dc2626; }
.smr-apply-status-cta {
	display: inline-block; padding: 11px 26px; border-radius: 10px; background: #00808c; color: #fff;
	font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.smr-apply-status-cta:hover { background: #006670; }
.smr-apply-status-cta-ghost { background: none; border: 1.5px solid #e5e7eb; color: #374151; }
.smr-apply-status-cta-ghost:hover { border-color: #00808c; color: #00808c; background: none; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
	.smr-apply-card { padding: 26px 20px 22px; }
	.smr-apply-field-grid { grid-template-columns: 1fr; }
	.smr-apply-doc-grid { grid-template-columns: 1fr; }
	.smr-apply-photo-grid { grid-template-columns: 1fr; }
	.smr-apply-progress-label { display: none; }
}