/* =====================================================
   YAM — Youssef Ahmad Moussawi
   تخليص كافة معاملات هيئة إدارة السير
   Theme: navy blue taken from the YAM logo
===================================================== */

:root{
  /* brand navy (sampled from the logo) */
  --navy-900:#0E2244;
  --navy-800:#15315B;
  --navy-700:#1E4076;   /* main brand color */
  --navy-600:#27528F;
  --navy-500:#3268AE;
  --navy-400:#4A80C4;
  --slate:#4A6E9C;      /* logo subtitle color */

  --bg:#EEF3F9;
  --card:#ffffff;
  --text:#0E1B2E;
  --muted:#5B7291;
  --primary:var(--navy-700);
  --primary2:var(--navy-500);
  --border:#DCE5F0;

  --ok-bg:#DCFCE7;
  --ok-bd:#16A34A;
  --bad-bg:#FEE2E2;
  --bad-bd:#EF4444;

  --shadow:0 20px 60px rgba(14,34,68,.18);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:auto; min-height:100%; -webkit-text-size-adjust:100%; overflow-x:hidden;}
body{display:flex; flex-direction:column;}

body{
  font-family:"Cairo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
}

h1,h2,h3{font-weight:900; letter-spacing:-.3px;}

/* Android / Samsung Internet tap fixes */
button, .btn, .choice, a{
  touch-action:manipulation;
  -ms-touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
@media (hover:none){
  .choice:hover, button:hover, .landing-btn:hover{transform:none !important; filter:none !important;}
}

.hidden{display:none !important;}

/* =====================================================
   LANDING PAGE
===================================================== */

.landing-hero{
  min-height:100vh;
  min-height:100svh; /* avoids the iOS/Android toolbar cutting the hero */
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 18px;
  text-align:center;
  color:#fff;

  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(74,128,196,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-600) 100%);
}

/* oversized car silhouette lifted from the logo, as a watermark */
.landing-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/hero-car.svg");
  background-repeat:no-repeat;
  background-position:left -70px bottom 8%;
  background-size:min(820px, 92%) auto;
  pointer-events:none;
  z-index:0;
}

/* dashed lane marking running under the car */
.landing-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(8% - 26px);
  height:3px;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.13) 0 46px,
    transparent 46px 92px
  );
  pointer-events:none;
  z-index:0;
}

.glass{
  position:relative;
  z-index:2;
  width:min(980px, 100%);
  padding:26px 22px 30px;
}

/* --- brand card (white, so the navy logo stays readable) --- */
.brand-card{
  width:min(560px, 100%);
  margin:0 auto;
  background:#fff;
  border-radius:26px;
  padding:26px 24px 22px;
  box-shadow:var(--shadow);
}

.brand-logo{
  width:min(360px, 86%);
  height:auto;
  display:block;
  margin:0 auto 6px;
}

.brand-name{
  color:var(--navy-700);
  font-size:26px;
  font-weight:900;
  line-height:1.35;
}

.brand-tagline{
  margin-top:6px;
  color:var(--slate);
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}

.brand-divider{
  width:70px;
  height:4px;
  border-radius:999px;
  margin:14px auto;
  background:linear-gradient(90deg, var(--navy-700), var(--navy-400));
}

/* --- phones --- */
.landing-phones{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.phone-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  direction:ltr;
  unicode-bidi:plaintext;

  padding:10px 18px;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.5px;

  background:var(--navy-700);
  color:#fff;
  text-decoration:none;
  border:2px solid var(--navy-700);
  transition:.18s ease;
}
.phone-pill:hover{background:var(--navy-600); border-color:var(--navy-600); transform:translateY(-2px);}
.phone-pill .ico{font-size:15px; line-height:1;}

.phone-pill.whatsapp{
  background:#fff;
  color:var(--navy-700);
}
.phone-pill.whatsapp:hover{background:#EAF1FB;}

.landing-title{
  margin:26px 0 0;
  font-size:30px;
  font-weight:900;
  color:#fff;
  line-height:1.4;
  text-shadow:0 10px 26px rgba(0,0,0,.35);
}

.landing-subtitle{
  margin-top:6px;
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,.82);
}

/* --- CTA buttons --- */
.landing-actions{
  margin-top:22px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.landing-btn{
  padding:14px 40px;
  font-size:16px;
  font-weight:900;

  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--navy-800);

  text-decoration:none;
  border:2px solid transparent;
  min-width:230px;
  text-align:center;

  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:.2s ease;
}
.landing-btn:hover{transform:translateY(-2px); background:#fff;}

.landing-btn.secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.landing-btn.secondary:hover{background:rgba(255,255,255,.2);}

.landing-btn.third{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.landing-btn.third:hover{background:rgba(255,255,255,.2);}

/* --- features --- */
.feature-grid{
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  width:min(820px, 100%);
}

.feature-card{
  padding:18px 16px;
  border-radius:18px;

  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 40px rgba(0,0,0,.25);

  display:flex;
  align-items:center;
  gap:12px;

  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.13);
}

.feature-badge{
  width:48px;
  height:48px;
  border-radius:14px;
  flex:0 0 auto;

  display:grid;
  place-items:center;

  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.feature-icon{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
  opacity:.95;
}

.feature-text{
  font-size:15px;
  font-weight:800;
  line-height:1.45;
  color:rgba(255,255,255,.94);
  text-align:right;
}

.landing-footer{
  margin-top:28px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.65);
}

/* =====================================================
   QUIZ PAGES
===================================================== */

.page{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
  padding-top:max(16px, env(safe-area-inset-top));
}

.card{
  width:min(760px, 100%);
  background:var(--card);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(14,34,68,.14);
  margin-bottom:30px;
}

/* back button pinned to the start edge, logo stays centered in the row */
.quiz-topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
}

.back-btn{
  position:absolute;
  top:50%;
  right:0;            /* dir=rtl -> this is the start side */
  transform:translateY(-50%);

  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:8px 14px;
  min-height:42px;
  border-radius:999px;

  background:#E4ECF7;
  border:1px solid var(--border);
  color:var(--navy-800);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:.18s ease;
}
.back-btn:hover{background:#D6E3F4;}
.back-btn:active{transform:translateY(-50%) scale(.97);}

.back-ico{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.quiz-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  padding:4px 10px;   /* keeps the tap target >=44px on phones */
  transition:opacity .18s ease;
}
.quiz-brand:hover{opacity:.75;}
.quiz-brand img{height:56px; width:auto;}

.title{
  text-align:center;
  color:var(--navy-700);
  font-size:44px;
  font-weight:900;
}
.title.small{font-size:30px;}

.sub{
  text-align:center;
  color:var(--text);
  margin-top:6px;
  font-size:17px;
  font-weight:700;
}
.sub.user-phone{
  direction:ltr;
  unicode-bidi:plaintext;
  color:var(--slate);
  letter-spacing:.5px;
}

/* keeps latin digits from being reordered inside RTL text */
.ltr-num{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

.counter-top{
  text-align:center;
  color:var(--navy-700);
  font-weight:900;
  margin-top:12px;
  margin-bottom:6px;
}

.progress{
  margin:18px 0;
  height:10px;
  background:#DFE9F6;
  border-radius:999px;
  overflow:hidden;
}
.progress::after{
  content:"";
  display:block;
  height:100%;
  width:var(--p, 0%);
  background:linear-gradient(90deg, var(--navy-700), var(--navy-400));
  transition:width .25s ease;
}

/* QUESTION STRIP — tap a number to jump to that question */
.qnav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 10px;
  margin:-6px 0 10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.qnav::-webkit-scrollbar{height:6px;}
.qnav::-webkit-scrollbar-track{background:transparent;}
.qnav::-webkit-scrollbar-thumb{background:#C6D8EE; border-radius:999px;}

.qnav-item{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:11px;
  border:2px solid var(--border);
  background:#fff;
  color:var(--navy-800);
  font-family:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  direction:ltr;              /* keep the digits as digits */
  transition:.15s ease;
}
.qnav-item:hover{border-color:var(--navy-400);}

/* picked but not confirmed yet */
.qnav-item.marked{
  border-style:dashed;
  border-color:var(--navy-500);
  color:var(--navy-700);
}

.qnav-item.ok{
  background:var(--ok-bg);
  border-color:var(--ok-bd);
  color:#065F46;
}
.qnav-item.bad{
  background:var(--bad-bg);
  border-color:var(--bad-bd);
  color:#7F1D1D;
}

.qnav-item.current{
  border-style:solid;
  border-color:var(--navy-700);
  box-shadow:0 0 0 3px rgba(30,64,118,.18);
}
.qnav-item.current:not(.ok):not(.bad){
  background:var(--navy-700);
  color:#fff;
}

.qbox{
  background:#EDF3FB;
  border:1px solid #C6D8EE;
  border-radius:14px;
  padding:12px;
}

.question{
  font-size:22px;
  font-weight:800;
  text-align:center;
  line-height:1.7;
}

.qimg{
  width:100%;
  max-height:180px;
  object-fit:contain;
  display:block;
  margin:0 auto 8px;
  border-radius:12px;
  background:#fff;
  border:1px solid #C6D8EE;
  padding:8px;
}

/* CHOICES */
.choices{
  margin-top:12px;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
}

.choice{
  border:2px solid #D6E3F4;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font-size:18px;
  font-weight:800;
  font-family:inherit;
  color:var(--text);
  cursor:pointer;
  text-align:right;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:.15s;
}
.choice:hover{transform:translateY(-1px); border-color:var(--navy-400);}
.choice.selected{
  border-color:var(--navy-800);
  background:var(--navy-700);
  color:#fff;
}
.choice.correct{
  border-color:var(--ok-bd);
  background:var(--ok-bg);
  color:#065F46;
}
.choice.wrong{
  border-color:var(--bad-bd);
  background:var(--bad-bg);
  color:#7F1D1D;
}

.feedback{display:none !important;}

/* BUTTONS */
.actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  border:none;
  border-radius:999px;
  padding:14px 18px;
  font-size:16px;
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  min-height:48px;
  min-width:180px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary{
  background:linear-gradient(90deg, var(--navy-700), var(--navy-500));
  color:#fff;
}
.btn-secondary{background:#E4ECF7; color:var(--navy-800);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* السابق / التالي stay narrower than تأكيد الإجابة */
.btn-nav{min-width:140px; white-space:nowrap;}

/* RESULTS */
.score-box{
  margin:10px auto 18px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#F6F9FD;
  text-align:center;
}
.score-title{font-weight:900; color:var(--muted);}
.score-value{
  font-size:34px;
  font-weight:900;
  margin-top:6px;
  color:var(--navy-700);
}

.results-actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.result-status{margin-top:12px; font-size:22px; font-weight:900;}
.result-status.pass{color:#16A34A;}
.result-status.fail{color:#DC2626;}

/* REVIEW */
.review-list{display:grid; gap:12px; margin-top:10px;}
.review-item{border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff;}
.review-q{background:#EDF3FB; border:1px solid #C6D8EE; border-radius:12px; padding:12px;}
.review-num{font-weight:900; color:var(--navy-700); margin-bottom:6px;}
.review-text{font-weight:900; line-height:1.7;}
.review-answers{margin-top:10px; display:grid; gap:8px;}
.ans-row{padding:10px 12px; border-radius:12px; border:2px solid transparent; display:flex; gap:10px;}
.ans-label{font-weight:900; min-width:80px;}
.ans-value{font-weight:800;}
.ans-ok{background:var(--ok-bg); border-color:var(--ok-bd); color:#065F46;}
.ans-bad{background:var(--bad-bg); border-color:var(--bad-bd); color:#7F1D1D;}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:820px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-card{padding:16px;}
}

@media (max-width:768px){
  .page{padding:12px; padding-top:max(12px, env(safe-area-inset-top));}
  .card{padding:14px; border-radius:16px; margin-bottom:20px;}

  .glass{padding:18px 14px 26px;}
  .brand-card{padding:20px 16px 18px; border-radius:22px;}
  .brand-name{font-size:21px;}
  .brand-tagline{font-size:14px;}
  .landing-title{font-size:23px; margin-top:22px;}
  .landing-subtitle{font-size:14px;}

  .landing-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:min(420px, 100%);
    margin-left:auto;
    margin-right:auto;
  }
  .landing-btn{min-width:0; width:100%; padding:14px 18px;}

  .feature-grid{width:min(520px,100%); gap:12px; margin-top:22px;}
  .feature-card{padding:14px; border-radius:16px;}
  .feature-badge{width:44px; height:44px;}
  .feature-icon{width:24px; height:24px;}

  .title{font-size:28px;}
  .title.small{font-size:21px;}

  /* tighter quiz header so the question starts higher up the screen */
  .quiz-topbar{min-height:48px;}
  .back-btn{padding:7px 12px; font-size:13px; min-height:40px;}
  .quiz-brand{margin-bottom:2px;}
  .quiz-brand img{height:40px;}
  .sub{font-size:15px; margin-top:2px;}
  .counter-top{margin-top:8px; margin-bottom:4px;}
  .progress{margin:12px 0;}

  /* keep تأكيد / التالي permanently in thumb reach */
  .actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    margin:0;
    gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(14,34,68,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .actions .btn{flex:1 1 0; min-width:0;}
  .actions .btn-nav{flex:0 1 auto; min-width:92px; padding:12px 10px;}
  #quizView{padding-bottom:92px;}

  .qnav{gap:6px; padding-bottom:8px; margin:-4px 0 8px;}
  .qnav-item{width:34px; height:34px; font-size:13px; border-radius:10px;}

  .btn{min-width:120px; padding:12px 16px; font-size:15px; min-height:44px;}
  .choice{padding:12px 14px; font-size:15px; min-height:44px;}
  .qimg{max-height:160px; padding:6px;}
  .question{font-size:18px;}
}

@media (max-width:380px){
  .brand-name{font-size:19px;}
  .landing-title{font-size:20px;}
  .phone-pill{font-size:15px; padding:9px 14px;}
  .btn{min-width:100px; padding:11px 14px; font-size:14px; min-height:40px;}
  .actions .btn-nav{min-width:76px; padding:11px 8px; font-size:13px;}
  .qnav-item{width:32px; height:32px; font-size:12px;}
  .choice{padding:11px 12px; font-size:14px; min-height:40px;}
  .title.small{font-size:19px;}
  .question{font-size:16px;}
  .back-btn{padding:6px 10px; font-size:12px; min-height:38px;}
  .back-ico{width:16px; height:16px;}
}