/* ===========================================================================
   File: apply_driver.css
   Location: C:\xampp\htdocs\taxi_app\assets\driver_css\apply_driver.css
   Connected to: /driver/apply_driver.php
   Description:
     Modern public driver application UI with a cleaner language toggle,
     stronger section hierarchy, and a more polished document upload layout.
     Theme/background colors still come from admin theme_settings through CSS vars.
   =========================================================================== */

:root{
  --success:#0ea5a4;
  --success-soft:rgba(14,165,164,.12);
  --danger:#e11d48;
  --danger-soft:rgba(225,29,72,.10);
  --surface-strong:rgba(255,255,255,.98);
  --ring:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);
  --shadow-lg:0 24px 70px rgba(15,23,42,.16);
  --shadow-md:0 16px 42px rgba(15,23,42,.11);
  --shadow-sm:0 10px 28px rgba(15,23,42,.08);
  --r:22px;
  --r2:16px;
  --r3:14px;
  --t:all .22s ease;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{
  font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif;
  min-height:100vh;
  background:var(--page-bg);
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  color:var(--text);
  position:relative;
}
html[dir="rtl"] body{font-family:Tahoma,Arial,sans-serif}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(15,23,42,.08), transparent 28%);
  pointer-events:none;
}
body.has-bg-image{background-image:var(--page-bg-image);background-size:cover;background-position:center;background-attachment:fixed}
.page{position:relative;z-index:1}
.wrap{max-width:1120px;margin:0 auto}
.content{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.apply-driver-form{display:flex;flex-direction:column;gap:18px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 20px;
  border-radius:28px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--top-nav-bg) 92%, white 8%), var(--top-nav-bg));
  color:var(--top-nav-text);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 420px}
.brand .badge{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;flex:0 0 54px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(2,10,20,.16);font-size:22px;color:var(--top-nav-text);
}
.titles{min-width:0}
.titles h1{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:900;line-height:1.15;color:var(--top-nav-text)}
.titles p{margin-top:6px;font-size:13px;line-height:1.5;color:color-mix(in srgb, var(--top-nav-text) 78%, transparent)}

.lang-menu{position:relative}
.lang-menu summary{list-style:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang__toggle{
  min-height:52px;
  border-radius:999px;
  padding:7px 14px 7px 7px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:var(--top-nav-text);
  box-shadow:0 12px 30px rgba(2,10,20,.12);
  display:flex;align-items:center;gap:10px;cursor:pointer;
}
.lang__toggle-badge{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:0 0 36px;
  background:rgba(255,255,255,.96);color:var(--accent);border:1px solid rgba(0,0,0,.05);
}
.lang__toggle-badge i{font-size:15px}
.lang__toggle-current{font-size:12px;font-weight:900;letter-spacing:.08em;min-width:2.5ch;text-align:center}
.lang__caret{font-size:12px;transition:.18s ease}
.lang-menu[open] .lang__caret{transform:rotate(180deg)}
.lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:196px;padding:8px;border-radius:20px;
  background:rgba(255,255,255,.985);border:1px solid rgba(15,23,42,.08);
  box-shadow:0 26px 56px rgba(15,23,42,.18);display:flex;flex-direction:column;gap:6px;z-index:60;
}
html[dir="rtl"] .lang__menu{right:auto;left:0}
.lang__menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:14px;font-size:13px;font-weight:800;color:#111827;transition:var(--t)}
.lang__menu-item:hover,.lang__menu-item.is-active{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12)}
.lang__menu-name{font-size:13px;font-weight:800}
.lang__menu-code{opacity:.7;font-size:11px;font-weight:900;letter-spacing:.06em}

.card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, white 4%), var(--card-bg));
  border-radius:28px;
  box-shadow:var(--shadow-md);
  padding:22px;
  color:var(--text);
  border:var(--card-border);
  backdrop-filter:blur(10px);
}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-head h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;line-height:1.2}
.section-head h2 i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.10);color:var(--accent)}
.section-head p{color:var(--muted);font-size:13px;line-height:1.55;max-width:440px}
.section-head--stack{flex-direction:column;align-items:flex-start}

.msg{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:18px;background:var(--surface-strong);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm)}
.msg.err{background:var(--danger-soft);border-color:rgba(225,29,72,.18);color:#9f1239}
.msg i{font-size:18px;margin-top:2px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.span2{grid-column:1 / -1}
.field{position:relative}
label{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;margin-bottom:8px;color:var(--text)}
label i{color:var(--accent);font-size:13px}
.req{color:#ef4444;margin-inline-start:2px}
.opt{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:rgba(15,23,42,.06);font-size:11px;font-weight:800;color:var(--muted)}

input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select{
  width:100%;min-height:52px;padding:14px 15px;border-radius:16px;border:var(--input-border);background:var(--input-bg);
  color:var(--input-text-color, var(--text));outline:none;transition:var(--t);font-size:14px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;background-size:6px 6px, 6px 6px;background-repeat:no-repeat;padding-inline-end:38px}
html[dir="rtl"] select{background-position:14px 50%, 20px 50%;padding-inline-end:15px;padding-inline-start:38px}
input:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring)}
input::placeholder{color:color-mix(in srgb, var(--input-hint-color) 72%, var(--muted) 28%);opacity:1}

.hint{margin-top:8px;font-size:12px;font-weight:800;color:var(--muted);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.16);padding:9px 11px;border-radius:13px;display:inline-flex;gap:8px;align-items:center}
.hint.err,.inline.hint.err{background:var(--danger-soft);border-color:rgba(225,29,72,.2);color:#9f1239}
.inline{margin-top:10px;display:inline-flex}

.filegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.filebox{
  position:relative;min-height:196px;padding:18px;border-radius:22px;overflow:hidden;text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border:1.5px dashed rgba(var(--accent-r),var(--accent-g),var(--accent-b),.28);
  box-shadow:var(--shadow-sm);transition:var(--t);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
}
.filebox::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(var(--accent-r),var(--accent-g),var(--accent-b),.03), transparent 42%);pointer-events:none}
.filebox:hover{transform:translateY(-2px);border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.5);box-shadow:0 18px 38px rgba(15,23,42,.12)}
.filebox.is-filled{border-style:solid;border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.34)}
.filebox input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.filebox .icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.10);color:var(--accent);font-size:24px;position:relative;z-index:1}
.filebox .name{font-weight:900;font-size:14px;color:var(--text);position:relative;z-index:1;line-height:1.45}
.filebox .hint2{font-size:12px;color:var(--muted);position:relative;z-index:1;line-height:1.45}
.filename{margin-top:8px;font-size:12px;font-weight:800;color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.16);padding:9px 36px 9px 11px;border-radius:12px;display:none;word-break:break-word;position:relative;z-index:1}
html[dir="rtl"] .filename{padding:9px 11px 9px 36px}
.remove-btn{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:10px;border:1px solid rgba(225,29,72,.28);background:rgba(225,29,72,.10);color:#be123c;display:none;place-items:center;cursor:pointer;z-index:2;transition:var(--t)}
html[dir="rtl"] .remove-btn{right:auto;left:12px}
.remove-btn.show{display:grid}
.remove-btn:hover{background:rgba(225,29,72,.16)}

.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{flex:1 1 220px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 18px;border:none;border-radius:18px;font-size:15px;font-weight:900;cursor:pointer;transition:var(--t);text-decoration:none;box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--btn-p-bg);color:var(--btn-p-txt)}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn.primary:active{transform:translateY(0) scale(.98);background:var(--btn-p-active)}
.btn.ghost{background:var(--btn-s-bg);color:var(--btn-s-txt);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18)}
.btn.ghost:hover{background:var(--btn-s-hover)}
.btn.ghost:active{background:var(--btn-s-active);transform:scale(.98)}
.btn:disabled{opacity:.72;cursor:not-allowed;transform:none}

.note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08);font-size:12px;color:var(--muted);line-height:1.6}
.note i{color:var(--accent);margin-top:2px}

.success{text-align:center;padding:30px 24px}
.success .big{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;margin:0 auto 14px;background:var(--success-soft);color:var(--success);font-size:34px;box-shadow:0 18px 36px rgba(14,165,164,.18)}
.success h2{font-size:22px;font-weight:900;margin-bottom:10px;color:var(--text)}
.success p{color:var(--muted);line-height:1.7;max-width:520px;margin:0 auto}
.redir{margin-top:14px;display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
.success .spinner{border-color:rgba(15,23,42,.12);border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:860px){
  .grid,.grid--two{grid-template-columns:1fr}
  .span2{grid-column:auto}
}
@media (max-width:640px){
  body{padding:calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom))}
  .topbar,.card{padding:18px}
  .topbar{border-radius:24px}
  .brand{flex:1 1 100%}
  .titles p{font-size:12px}
  .actions,.btn{width:100%}
  .lang__toggle{padding-inline-end:12px}
  .filegrid{grid-template-columns:1fr}
  .filebox{min-height:176px}
}