/* ==========================================================================
   FleetFlow — Login + OTP pages (presentation only)

   One composition for both pages:  Doha scene (left) · flowing navy/gold
   curve · warm-white form (right).  Desktop: the card keeps the reference
   proportions (same aspect ratio, 920px maximum width) and EVERYTHING inside is sized in container units
   (cqw), so it scales as one picture from 1024 to 1920 px; small readable
   floors stop text getting tiny.  <= 900px: stacked layout (scene band on top
   with a curved bottom edge, form below) — not a shrunken desktop.
   ========================================================================== */
:root{
  --navy:#0a1f4d; --navy-2:#071a45; --gold:#c8a24e; --gold-2:#e9c568; --gold-deep:#b98a30;
  --ink:#0b1f4a; --muted:#5f6d88; --line:#dfe4ee; --paper:#fdfbf7;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --brand-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --sans:Inter,'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.auth-body{min-height:100vh;background:#f4f0e9;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
/* Soft ivory, champagne and pale blue background behind the card. */
.auth-body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 18% 20%,rgba(225,211,180,.40),transparent 60%),radial-gradient(ellipse at 85% 80%,rgba(199,216,225,.38),transparent 60%),linear-gradient(135deg,#f8f5ee,#f1ede6 55%,#edf2f4);z-index:0;pointer-events:none}
.auth-body::after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.35),transparent 72%);z-index:0;pointer-events:none}
.auth-stage{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:clamp(10px,3vh,34px) clamp(8px,2.4vw,36px)}
.auth-defs{position:absolute;width:0;height:0}
[hidden]{display:none !important}

/* ---- card -------------------------------------------------------------- */
.auth-card{position:relative;width:100%;background:var(--paper);border-radius:22px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.06)}
.auth-visual{position:relative;overflow:hidden;color:#fff;background:#0a1836}
.auth-scene{position:absolute;inset:0;background:url(../auth/scene.jpg?v=20261001-current) 30% 100%/cover no-repeat}
.auth-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,34,.42) 0%,rgba(4,12,34,0) 42%,rgba(4,12,34,0) 68%,rgba(3,9,26,.6) 100%),linear-gradient(90deg,rgba(4,12,34,0) 62%,rgba(6,16,44,.55) 100%)}
.auth-curve{display:none}
.auth-skyline{display:block;pointer-events:none;user-select:none}

/* brand block */
.auth-brand{position:relative;z-index:2;text-align:center}
.auth-mark{display:block;margin:0 auto;height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))}
.auth-name{font-family:var(--brand-serif);font-weight:600;color:#ecd9a2;letter-spacing:.075em;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.auth-rule{height:1px;margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,#d2ae58 22%,#e9c568 50%,#d2ae58 78%,transparent)}
.auth-tagline{font-family:var(--sans);font-weight:400;color:#e2dccb;letter-spacing:.5em;text-indent:.5em;white-space:nowrap}
.auth-feats{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start}
.auth-feats li{display:flex;flex-direction:column;align-items:center;text-align:center;color:#dcd6c6;letter-spacing:.2em;line-height:1.35;font-weight:400}
.auth-feats li+li{border-left:1px solid rgba(255,255,255,.2)}
.auth-feats svg{fill:none;stroke:#eadcb2;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.auth-foot{position:relative;z-index:2;text-align:center}
.auth-city{font-family:var(--brand-serif);font-weight:500;color:#ead9a6;letter-spacing:.3em;display:flex;align-items:center;justify-content:center;gap:1.6em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.auth-city i{width:1px;height:1.15em;background:rgba(255,255,255,.55)}
.auth-mile{display:flex;align-items:center;justify-content:center;gap:1.6em;color:#e6e0d0;letter-spacing:.34em;font-weight:400;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.auth-mile b{height:1px;width:4.4em;background:linear-gradient(90deg,transparent,#d2ae58)}
.auth-mile b:last-child{background:linear-gradient(90deg,#d2ae58,transparent)}

/* form area */
.auth-form{position:relative;z-index:3}
.auth-lang{position:absolute;right:0;top:0}
.auth-lang-btn{display:flex;align-items:center;gap:.55em;border:0;background:transparent;font:500 inherit var(--sans);color:var(--ink);cursor:pointer;padding:.4em .5em;border-radius:8px}
.auth-lang-btn:hover{background:rgba(10,31,77,.05)}
.auth-lang-btn svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.auth-lang-btn .chev{width:1.05em;height:1.05em}
.auth-lang-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(10,31,77,.18);z-index:5}
.auth-lang-menu li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border-radius:7px;font-size:14px;color:var(--ink)}
.auth-lang-menu li[aria-current]{background:rgba(200,162,78,.14);font-weight:600}
.auth-lang-menu svg{width:16px;height:16px;fill:none;stroke:var(--gold-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.auth-h1{font-family:var(--serif);font-weight:700;color:var(--navy);margin:0;letter-spacing:-.005em;line-height:1.08}
.auth-sub{color:var(--muted);margin:0;line-height:1.45}
.auth-masked{margin:0;color:#8a7a4c;font-weight:500;letter-spacing:.02em}
.auth-note{background:rgba(200,162,78,.13);border:1px solid rgba(200,162,78,.35);color:#6b5520;border-radius:10px;font-size:13px;line-height:1.4;padding:9px 12px;margin:0 0 12px}

.auth-field label{display:block;font-weight:500;color:var(--ink)}
.auth-input{position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.auth-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,78,.22)}
.auth-input .ico{position:absolute;left:1.05em;width:1.5em;height:1.5em;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.auth-input input{width:100%;border:0;outline:0;background:transparent;font:400 inherit var(--sans);color:var(--ink);padding:0 3.2em 0 3.4em;height:100%}
.auth-input input::placeholder{color:#8a96ad}
.auth-input.plain input{padding:12px 14px;height:auto}
.auth-eye{position:absolute;right:.55em;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#7b879e;cursor:pointer;width:2.2em;height:2.2em;display:grid;place-items:center;border-radius:8px}
.auth-eye:hover{color:var(--navy)}
.auth-eye svg{width:1.45em;height:1.45em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.auth-field.invalid .auth-input{border-color:#d0475b;box-shadow:0 0 0 3px rgba(208,71,91,.14)}
.auth-err{color:#b3263c;font-size:13px;line-height:1.35;margin-top:7px}
.auth-err.center{text-align:center}
.auth-row{display:flex;justify-content:flex-end;align-items:center}
.auth-link{border:0;background:transparent;font:500 inherit var(--sans);color:#0b5cc4;cursor:pointer;padding:.2em 0}
.auth-link:hover{text-decoration:underline}
.auth-link.gold{color:#9a7424;font-weight:500}
.auth-link:disabled{cursor:default;opacity:.85}
.auth-link:disabled:hover{text-decoration:none}
.auth-help{margin-top:10px;background:#f4f6fb;border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.5;color:var(--muted);padding:10px 12px}
.auth-link:focus-visible,.auth-eye:focus-visible,.auth-lang-btn:focus-visible,.auth-btn:focus-visible,.otp-box:focus-visible{outline:3px solid rgba(200,162,78,.55);outline-offset:2px}

.auth-btn{position:relative;width:100%;border:0;cursor:pointer;color:#fff;font-family:var(--sans);font-weight:500;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:.7em;border-radius:12px;
  background:linear-gradient(90deg,#071a45 0%,#0c2456 38%,#5c5a4e 66%,#a48746 86%,#c9a24d 100%);box-shadow:0 8px 22px rgba(7,26,69,.28);transition:transform .12s,box-shadow .15s,filter .15s}
.auth-btn:hover{filter:brightness(1.07);box-shadow:0 10px 26px rgba(7,26,69,.34)}
.auth-btn:active{transform:translateY(1px)}
.auth-btn .arr{width:1.25em;height:1.25em;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.auth-btn .spin{display:none;width:1.15em;height:1.15em;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:authspin .7s linear infinite}
.auth-btn.loading{pointer-events:none;filter:saturate(.8) brightness(.95)}
.auth-btn.loading .arr{display:none}
.auth-btn.loading .spin{display:inline-block}
@keyframes authspin{to{transform:rotate(360deg)}}

.auth-motto{display:flex;align-items:center;justify-content:center;gap:1.4em;color:#7c88a0;text-align:center}
.auth-motto::before,.auth-motto::after{content:"";height:1px;width:3.6em;background:linear-gradient(90deg,transparent,#d2ae58)}
.auth-motto::after{background:linear-gradient(90deg,#d2ae58,transparent)}
.auth-motto a{color:#7c88a0;text-decoration:none}
.auth-motto a:hover{color:var(--navy);text-decoration:underline}
.auth-slogan{color:#a08b55;letter-spacing:.32em;text-indent:.32em;text-align:center;font-weight:400;white-space:nowrap}

/* OTP */
.auth-shield svg{display:block;width:100%;height:auto}
.otp-group{display:flex;justify-content:center}
.otp-box{width:1em;flex:0 0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--navy);font:600 inherit var(--sans);padding:0;outline:0;caret-color:var(--gold-deep);transition:border-color .12s,box-shadow .12s}
.otp-box:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,78,.25)}
.otp-box.filled{border-color:#c9d1e2;background:#fbfcff}
.otp-group.has-error .otp-box{border-color:#d0475b;animation:authshake .35s}
@keyframes authshake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.otp-resend{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.5em;color:var(--muted)}
.otp-resend .cd{font-variant-numeric:tabular-nums}
.otp-expiry{margin:0;text-align:center;color:#8a95ab;font-size:12.5px;line-height:1.4}
.otp-countdown{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy)}
.otp-countdown.expired{color:#b3263c}
.auth-body.no-js-only{}
.no-js .otp-group{display:none}

/* ==========================================================================
   DESKTOP (> 900px) — compact, centred card (920px maximum width)
   The card keeps ONE aspect ratio and is sized against the viewport, so a wide
   band of the soft color background stays visible on all four sides.  Type and
   spacing are container units with px floors / ceilings (not a transform).
   The left visual is ~50-52% of the card, the form sits in a centred column
   no wider than 400px.
   ========================================================================== */
@media (min-width:901px){
  .auth-card{
    container-type:size;
    width:min(920px,90vw,calc(80vh * 1.794));
    aspect-ratio:1220/680;
    box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.07);
  }
  /* the visual is 92% of the card so the curve lands at ~50% (top) / ~52% (middle) / ~64% (bottom) */
  .auth-visual{position:absolute;inset:0 auto 0 0;width:92%;clip-path:url(#authVisualClip)}
  .auth-scene{inset:0 auto 0 0;height:100%;width:auto;aspect-ratio:824/920;background-size:100% 100%;background-position:0 0;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 90%,transparent 100%)}
  .auth-curve{display:block;position:absolute;inset:0 auto 0 0;width:92%;height:100%;z-index:2;pointer-events:none}

  .auth-brand{position:absolute;left:0;top:5%;width:51%}
  .auth-mark{width:20.5cqw}
  .auth-name{margin-top:.9cqw;font-size:clamp(14px,1.9cqw,24px)}
  .auth-rule{width:25cqw;margin-top:1.2cqw}
  .auth-tagline{margin-top:1.3cqw;font-size:max(9px,1cqw)}
  .auth-feats{margin-top:2cqw}
  .auth-feats li{padding:0 1.9cqw;font-size:max(8px,.78cqw)}
  .auth-feats svg{width:max(22px,2.6cqw);height:max(22px,2.6cqw);margin-bottom:.7cqw}
  .auth-foot{position:absolute;left:0;bottom:3%;width:48%}
  .auth-city{font-size:max(12.5px,1.45cqw)}
  .auth-mile{margin-top:.7cqw;font-size:max(8.5px,.88cqw)}

  /* right column: centred, never wider than 400px */
  .auth-form{position:absolute;left:56%;width:40%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:3% 0 17.5%}
  .auth-lang{right:0;top:4.5%;font-size:max(12.5px,1.1cqw)}
  .auth-formbody{position:static;width:100%;max-width:400px;margin:0 auto}
  .auth-formbody.center{text-align:center}
  .auth-h1{font-size:clamp(34px,3.5cqw,44px)}
  .auth-h1.sm{font-size:clamp(26px,2.8cqw,34px);margin-top:.8cqw}
  .auth-sub{margin-top:.6cqw;font-size:clamp(13px,1.2cqw,15px)}
  .auth-formbody.center .auth-sub{font-size:clamp(12.5px,1.15cqw,14.5px);margin-top:.7cqw}
  .auth-masked{margin-top:.4cqw;font-size:clamp(11.5px,.95cqw,13px)}
  .auth-note{margin-top:.9cqw;font-size:max(11.5px,.9cqw)}

  .auth-field{margin-top:1.8cqw}
  .auth-field+.auth-field{margin-top:1.4cqw}
  .auth-field label{font-size:clamp(12.5px,1.05cqw,14px);margin-bottom:.5cqw}
  .auth-input{height:clamp(44px,4cqw,52px);font-size:clamp(13.5px,1.1cqw,15px)}
  .auth-input input{font-size:clamp(13.5px,1.1cqw,15px)}
  .auth-row{margin-top:.9cqw;font-size:clamp(12.5px,1.05cqw,14px)}
  .auth-help{font-size:max(11.5px,.9cqw)}
  .auth-btn{margin-top:1.5cqw;height:clamp(46px,4.2cqw,54px);font-size:clamp(15px,1.4cqw,17px)}
  .auth-motto{margin-top:1.7cqw;font-size:clamp(11.5px,1cqw,13px)}

  .auth-skyline{position:absolute;left:62.5%;width:27%;bottom:6.8%;height:auto;z-index:2}
  .auth-shield{width:clamp(40px,4.4cqw,54px);margin:0 auto}
  .otp-group{gap:clamp(8px,.9cqw,12px);margin-top:1.7cqw;font-size:max(18px,1.9cqw)}
  .otp-box{width:clamp(40px,4.1cqw,50px);height:clamp(40px,4.1cqw,50px);font-size:clamp(19px,1.95cqw,24px)}
  .auth-err{font-size:max(11.5px,.9cqw)}
  .auth-formbody.center .auth-btn{margin-top:1.2cqw}
  .otp-resend{margin-top:1.5cqw;font-size:clamp(12.5px,1.05cqw,14px)}
  .otp-expiry{margin-top:.7cqw;font-size:max(10.5px,.82cqw)}
  .auth-otp .auth-motto{margin-top:1.1cqw}
  .auth-otp .auth-skyline{bottom:7.6%}
  .auth-body:not(.auth-otp) .auth-form{padding-bottom:12.5%}
  .auth-body:not(.auth-otp) .auth-skyline{bottom:7.4%}
  .auth-body:not(.auth-otp) .auth-field{margin-top:2cqw}
  .auth-body:not(.auth-otp) .auth-field+.auth-field{margin-top:1.5cqw}
  .auth-slogan{position:absolute;left:56%;width:40%;bottom:2.8%;font-size:max(8.5px,.82cqw)}
}
@media (min-width:1200px){
  .auth-card{width:min(920px,64vw,calc(70vh * 1.794))}
}

/* ==========================================================================
   TABLET / MOBILE (<= 900px) — stacked, purpose-built (not a shrunken desktop)
   ========================================================================== */
@media (max-width:900px){
  .auth-stage{padding:clamp(8px,2.4vw,20px)}
  .auth-card{max-width:520px;margin:0 auto}
  .auth-visual{height:clamp(250px,40vh,330px);min-height:250px;display:flex;flex-direction:column;justify-content:center}
  .auth-scene{background-position:22% 78%;background-size:cover}
  .auth-shade{background:linear-gradient(180deg,rgba(4,12,34,.55) 0%,rgba(4,12,34,.25) 55%,rgba(4,12,34,.55) 100%)}
  .auth-visual::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-1px;height:34px;background:var(--paper);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -3px 0 #d2ae58}
  .auth-brand{padding:18px 14px 30px}
  .auth-mark{width:clamp(108px,30vw,150px)}
  .auth-name{margin-top:6px;font-size:clamp(14px,3.9vw,19px)}
  .auth-rule{width:min(240px,62%);margin-top:8px}
  .auth-tagline{margin-top:8px;font-size:clamp(8.5px,2.3vw,11px);letter-spacing:.4em;text-indent:.4em}
  .auth-feats{display:none}
  .auth-foot{display:none}
  .auth-form{padding:2px clamp(20px,6.5vw,44px) 0}
  .auth-lang{position:absolute;right:clamp(12px,4vw,24px);top:-22px;z-index:6;font-size:13px}
  .auth-lang-btn{background:rgba(253,251,247,.94);box-shadow:0 2px 10px rgba(0,0,0,.18);padding:.35em .7em}
  .auth-formbody{padding-top:8px}
  .auth-formbody.center{text-align:center}
  .auth-h1{font-size:clamp(30px,8.6vw,42px)}
  .auth-h1.sm{font-size:clamp(26px,7.4vw,34px);margin-top:8px}
  .auth-sub{margin-top:6px;font-size:clamp(14px,3.9vw,16px)}
  .auth-masked{margin-top:4px;font-size:13px}
  .auth-field{margin-top:18px}
  .auth-field label{font-size:14px;margin-bottom:7px}
  .auth-input{height:52px;font-size:15px}
  .auth-input input{font-size:16px}
  .auth-row{margin-top:8px;font-size:14px}
  .auth-btn{margin-top:18px;height:54px;font-size:17px}
  .auth-motto{margin-top:20px;font-size:13.5px}
  .auth-skyline{width:min(86%,380px);margin:10px auto 8px;height:auto}
  .auth-shield{width:54px;margin:2px auto 0}
  .otp-group{gap:clamp(6px,2.2vw,12px);margin-top:20px}
  .otp-box{width:clamp(40px,11.6vw,58px);height:clamp(48px,14vw,64px);font-size:clamp(22px,6vw,28px)}
  .otp-resend{margin-top:16px;font-size:14px}
  .auth-slogan{font-size:10.5px;padding:0 0 18px}
  .auth-otp .auth-btn{margin-top:20px}
}
@media (max-width:420px){
  .auth-card{border-radius:18px}
  .auth-visual{height:clamp(220px,34vh,280px);min-height:220px}
  .auth-form{padding-left:18px;padding-right:18px}
  .otp-group{gap:6px}
  .otp-box{width:calc((100% - 30px) / 6);max-width:56px}
}
@media (max-height:520px) and (min-width:901px){ .auth-stage{align-items:start} }
@media (prefers-reduced-motion:reduce){ .otp-group.has-error .otp-box,.auth-btn .spin{animation:none} }