/* Shared styles for the public learner enrolment pages:
 *   enrol.php  — the multi-step enrolment wizard
 *   rtw.php    — the standalone "send your right to work documents" page
 * Extracted from enrol.php so both pages stay visually identical. The .ef-*
 * classes and the :root palette below are the single source of truth.
 */
:root { --navy:#0a3050; --navy-d:#072237; --line:#e2e8f0; --muted:#64748b; --bg:#f1f5f9; --green:#16a34a; --red:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font-family:"visby-cf","Segoe UI",system-ui,sans-serif; background:var(--bg); color:#0f172a; line-height:1.5; }
/* Slow-navigation page loader (shown by js/page_loader.js) */
.page-loader { position:fixed; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:rgba(10,48,80,.45); backdrop-filter:blur(2px); z-index:20000; animation:page-loader-fade .18s ease-out; }
.page-loader.is-visible { display:flex; }
.page-loader-spinner { width:54px; height:54px; border-radius:50%; border:5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:page-loader-spin .7s linear infinite; }
.page-loader-text { color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em; }
@keyframes page-loader-fade { from { opacity:0; } to { opacity:1; } }
@keyframes page-loader-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loader-spinner { animation-duration:1.6s; } }
.ef-header { background:var(--navy); color:#fff; padding:28px 20px; text-align:center; }
.ef-header img { max-height:72px; max-width:220px; object-fit:contain; margin-bottom:14px; background:#fff; padding:8px 12px; border-radius:8px; }
.ef-header h1 { margin:0; font-size:24px; font-weight:700; }
.ef-header .ef-sub { margin:6px 0 0; opacity:.85; font-size:15px; }
.ef-wrap { max-width:820px; margin:0 auto; padding:24px 16px 64px; }
.ef-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.ef-intro { color:#334155; }
.ef-intro p:first-child { margin-top:0; }
.ef-intro p:last-child { margin-bottom:0; }
.ef-section-title { font-size:16px; font-weight:700; color:var(--navy); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.ef-section-sub { color:var(--muted); font-size:13px; margin:0 0 16px; }
.ef-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
@media (max-width:600px){ .ef-grid { grid-template-columns:1fr; } }
.ef-group { display:flex; flex-direction:column; }
.ef-group.ef-full { grid-column:1 / -1; }
label.ef-label { font-size:13px; font-weight:600; color:#334155; margin-bottom:4px; }
.ef-label .req { color:var(--red); }
input.ef-input, select.ef-input, textarea.ef-input {
    font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%;
}
input.ef-input:focus, select.ef-input:focus, textarea.ef-input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,48,80,.12); }
.ef-input.is-error { border-color:var(--red); }
.ef-error { color:var(--red); font-size:12px; margin-top:4px; }
.ef-help { color:var(--muted); font-size:12px; margin-top:4px; }
/* Highlighted conditional field (e.g. average hours when contracted < 16) */
.ef-highlight { background:#fffbeb; border:1px solid #fde68a; border-left:4px solid #f59e0b; border-radius:10px; padding:14px 16px; }
.ef-highlight label.ef-label { color:#92400e; }
.ef-highlight label.ef-label .bi { color:#f59e0b; }
.ef-signature { font-family:"Brush Script MT","Segoe Script","Bradley Hand",cursive; font-size:24px; letter-spacing:.5px; }
.ef-flash { animation:efFlash .9s ease-out; }
@keyframes efFlash { 0% { background:#fde68a; box-shadow:0 0 0 4px rgba(245,158,11,.25); } 100% { background:#fffbeb; box-shadow:0 0 0 0 rgba(245,158,11,0); } }
.ef-subsection-title { font-size:16px; color:var(--navy); display:flex; align-items:center; gap:8px; margin:22px 0 4px; padding-top:18px; border-top:1px solid var(--line); }
.ef-uploaded { display:flex; align-items:center; gap:6px; color:#15803d; font-size:13px; margin:0 0 8px; }
/* Drag & drop file zone */
.ef-drop { position:relative; }
.ef-drop-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.ef-drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
    border:2px dashed var(--line); border-radius:10px; padding:20px 16px; color:var(--muted); cursor:pointer; background:#fff;
    transition:border-color .15s, background .15s; }
.ef-drop-zone:hover { border-color:var(--navy); }
.ef-drop-zone.is-dragover { border-color:#16a34a; background:rgba(22,163,74,.06); }
.ef-drop-zone .bi { font-size:26px; color:var(--navy); }
.ef-drop-zone .ef-drop-browse { color:var(--navy); text-decoration:underline; }
.ef-file.is-error + .ef-drop-zone, .ef-drop-input.is-error ~ .ef-drop-zone { border-color:var(--red); }
.ef-drop-file { font-size:13px; color:var(--navy); margin-top:8px; display:flex; align-items:center; gap:6px; }
.ef-drop-file .bi { color:#15803d; }
.ef-consent { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:#334155; cursor:pointer; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.ef-consent.is-error { border-color:var(--red); background:#fef2f2; }
.ef-consent input { margin-top:2px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--navy); }
.ef-link { background:none; border:none; padding:0; color:var(--navy); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }
.ef-link:hover { color:var(--navy-d); }
.ef-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.ef-modal-overlay.is-open { display:flex; }
.ef-modal { background:#fff; border-radius:14px; max-width:680px; width:100%; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.ef-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); background:#fff; flex:0 0 auto; }
.ef-modal-head h3 { margin:0; font-size:18px; color:var(--navy); display:flex; align-items:center; gap:8px; }
.ef-modal-close { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--muted); padding:0 4px; }
.ef-modal-close:hover { color:var(--navy); }
.ef-modal-body { padding:18px 22px 8px; color:#334155; font-size:14px; line-height:1.6; overflow:auto; flex:1 1 auto; }
.ef-modal-body h2, .ef-modal-body h3, .ef-modal-body h4 { color:var(--navy); margin:18px 0 6px; font-size:15px; }
.ef-modal-body h2 { font-size:17px; }
.ef-modal-body h3 { font-size:16px; }
.ef-modal-body a { color:var(--navy); }
.ef-modal-body p, .ef-modal-body ul { margin:0 0 10px; }
.ef-modal-body ul { padding-left:20px; }
.ef-modal-foot { padding:14px 22px; text-align:right; border-top:1px solid var(--line); background:#fff; flex:0 0 auto; }
.ef-hp { position:absolute; left:-9999px; top:-9999px; }
.ef-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }
.ef-btn { font:inherit; font-weight:700; background:var(--navy); color:#fff; border:none; padding:13px 28px; border-radius:10px; cursor:pointer; font-size:16px; }
.ef-btn:hover { background:var(--navy-d); }
.ef-btn-back { background:none; color:var(--navy); border:1px solid var(--line); }
.ef-btn-back:hover { background:#fff; border-color:var(--navy); }
.ef-alert { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.ef-thanks { text-align:center; padding:30px 10px; }
.ef-thanks i { font-size:52px; color:var(--green); }
.ef-thanks h2 { margin:14px 0 6px; color:var(--navy); }
.ef-thanks p { color:#334155; margin:0 auto; max-width:480px; }
.ef-foot { text-align:center; color:var(--muted); font-size:12px; padding-bottom:20px; }
.ef-resume { display:flex; gap:12px; align-items:flex-start; background:#eef6ff; border:1px solid #cfe3fb; color:#0f3a63; padding:14px 16px; border-radius:12px; margin-bottom:16px; font-size:14px; }
.ef-resume > i { font-size:22px; line-height:1; margin-top:1px; }
.ef-resume-body { flex:1; }
.ef-resume-row { display:flex; gap:8px; margin-top:8px; }
.ef-resume-link { flex:1; font:inherit; font-size:13px; padding:8px 10px; border:1px solid #cfe3fb; border-radius:8px; background:#fff; color:#0f3a63; }
.ef-resume-copy { font:inherit; font-weight:700; border:none; background:var(--navy); color:#fff; padding:8px 16px; border-radius:8px; cursor:pointer; }
.ef-resume-copy:hover { background:var(--navy-d); }
.ef-resume-note { margin-top:8px; font-size:13px; color:#0f3a63; }
.ef-resume-note i { color:var(--green); }
/* Step progress */
.ef-steps { display:flex; gap:6px; margin-bottom:18px; }
.ef-step { flex:1; text-align:center; font-size:12px; font-weight:600; color:var(--muted); }
.ef-step .ef-dot { display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 auto 6px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--muted); }
.ef-step.is-active .ef-dot { background:var(--navy); border-color:var(--navy); color:#fff; }
.ef-step.is-done .ef-dot { background:var(--green); border-color:var(--green); color:#fff; }
.ef-step.is-active, .ef-step.is-done { color:var(--navy); }
.ef-saved { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:13px; font-weight:600; margin-bottom:14px; }

/* Admin preview banner (enrol.php &preview=1), including the "use the live form"
   switch that lets staff fill the form in on a learner's behalf. */
.ef-preview { display:flex; gap:10px; align-items:flex-start; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.ef-preview > i { font-size:18px; line-height:1.4; flex-shrink:0; }
.ef-preview-body { flex:1; }
.ef-preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; }
.ef-preview-btn { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; text-decoration:none; background:#9a3412; color:#fff; padding:8px 14px; border-radius:8px; }
.ef-preview-btn:hover { background:#7c2d12; }
.ef-preview-note { font-size:13px; opacity:.9; }