/* ==========================================================================
   صيف الفرص — أداة اختيار المهارة
   ========================================================================== */

/* الخط المعتمد رسمياً في دليل الهوية هو "Dubai". لا يتوفر عبر Google Fonts،
   لذا يُستخدم أولاً إن كان مثبتاً على جهاز الزائر، ثم Cairo كأقرب بديل شكلاً
   (خط عربي هندسي مستدير مشابه)، ثم Tajawal كخط احتياطي إضافي. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;900&display=swap');

:root{
  /* الألوان الرسمية من دليل هوية حملة "صيف الفرص" (اتجاه) */
  --navy-900:#0D2138;   /* كحلي - اللون الأساسي 60% */
  --navy-800:#152D48;
  --navy-700:#1F3E60;
  --navy-600:#2C5079;
  --gold-600:#B57F37;
  --gold-500:#D39A4A;   /* ذهبي - اللون الثانوي 25% */
  --gold-400:#E3B676;
  --gold-100:#F6EDE2;   /* بيج مساعد */
  --gray-light:#F3F4F6; /* رمادي فاتح - 5% */
  --danger:#E4573D;
  --ink:#0D2138;
  --paper:#FBFAF7;
  --card:#FFFFFF;       /* أبيض - 10% */
  --muted:#5C7089;
  --line:#E4E9F0;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-soft:0 18px 40px -20px rgba(13,33,56,.35);
  --shadow-card:0 10px 24px -14px rgba(13,33,56,.28);
  --transition:.2s ease;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Dubai', 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(211,154,74,.18), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(13,33,56,.10), transparent 55%),
    var(--paper);
  color:var(--ink);
  min-height:100vh;
  line-height:1.6;
}

img{ max-width:100%; display:block; }

button{ font-family:inherit; cursor:pointer; }

.hidden{ display:none !important; }

/* ---------- Layout ---------- */

.page-shell{
  max-width:1080px;
  margin:0 auto;
  padding:28px 20px 56px;
  position:relative;
}

.brand-header{
  display:flex;
  flex-direction:row-reverse; /* يضع شعار الحملة أقصى اليسار وشعار اتجاه أقصى اليمين، وفق الخيار المفضل بدليل الهوية */
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
  gap:16px;
}

.brand-logo{
  height:auto;
  object-fit:contain;
}

/* الحد الأدنى للعرض الرقمي وفق دليل الهوية: 90px لشعار الحملة (مربع)، 70px لشعار اتجاه (أفقي) */
.campaign-logo{ width:100px; }
.ettijah-logo{ width:128px; }

@media (max-width: 480px){
  .campaign-logo{ width:90px; }
  .ettijah-logo{ width:100px; }
}

.app-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:clamp(20px, 4vw, 44px);
  position:relative;
  z-index:1;
}

.site-footer{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color:#fff;
  border-radius:var(--radius-md);
  padding:16px 26px;
  font-size:14px;
  flex-wrap:wrap;
  gap:8px;
  box-shadow:var(--shadow-card);
}

.footer-tagline{
  margin:0;
  font-weight:700;
  font-size:15px;
}

.footer-tagline .accent{ color:var(--gold-400); }

.footer-handle{
  color:rgba(255,255,255,.72);
  font-size:13px;
  letter-spacing:.4px;
  direction:ltr;
}

/* ---------- Progress ---------- */

.progress-wrap{ margin-bottom:28px; }

.progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:700;
  color:var(--navy-700);
  margin-bottom:8px;
}

.progress-track{
  height:10px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.progress-bar{
  height:100%;
  width:17%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--navy-700), var(--gold-500));
  transition:width .35s ease;
}

/* ---------- Hero / Intro ---------- */

.hero-panel{ text-align:center; padding:12px 0 6px; }

.eyebrow{
  display:inline-block;
  background:rgba(13,33,56,.08);
  color:var(--navy-700);
  font-weight:700;
  font-size:13px;
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}

.hero-panel h1{
  font-size:clamp(24px, 4vw, 36px);
  font-weight:900;
  color:var(--navy-900);
  margin:0 0 14px;
  line-height:1.35;
}

.hero-panel h1 span{ color:var(--gold-500); }

.hero-panel p{
  color:var(--muted);
  max-width:560px;
  margin:0 auto 20px;
  font-size:16px;
}

.formula{
  display:inline-block;
  background:var(--navy-900);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:14px 22px;
  border-radius:var(--radius-md);
  margin-bottom:26px;
  box-shadow:var(--shadow-card);
}

/* ---------- Buttons ---------- */

.primary-btn{
  background:linear-gradient(90deg, var(--navy-900), var(--navy-700));
  color:#fff;
  border:none;
  font-weight:700;
  font-size:16px;
  padding:14px 32px;
  border-radius:999px;
  box-shadow:0 12px 24px -10px rgba(13,33,56,.5);
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.primary-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(13,33,56,.55); }
.primary-btn:active{ transform:translateY(0); }
.primary-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.secondary-btn{
  background:#fff;
  color:var(--navy-800);
  border:2px solid var(--line);
  font-weight:700;
  font-size:15px;
  padding:12px 26px;
  border-radius:999px;
  transition:border-color var(--transition), color var(--transition), transform var(--transition);
}

.secondary-btn:hover{ border-color:var(--gold-500); color:var(--gold-600); transform:translateY(-1px); }

.text-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  text-decoration:underline;
  padding:8px;
}

.text-btn:hover{ color:var(--navy-900); }

/* ---------- Step panels ---------- */

.step-panel{ padding:8px 0 4px; }

.step-tag{
  display:inline-block;
  background:rgba(211,154,74,.16);
  color:var(--gold-600);
  font-weight:700;
  font-size:12.5px;
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:12px;
}

.step-panel h2{
  font-size:clamp(20px, 3vw, 26px);
  font-weight:900;
  color:var(--navy-900);
  margin:0 0 8px;
}

.hint{
  color:var(--muted);
  font-size:14.5px;
  margin:0 0 22px;
}

/* ---------- Choice cards ---------- */

.option-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

.compact-grid{ grid-template-columns:repeat(2, 1fr); }

@media (max-width: 640px){
  .option-grid{ grid-template-columns:1fr; }
}

.choice-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 18px 16px;
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}

.choice-card:hover{ border-color:var(--gold-400); transform:translateY(-2px); }

.choice-card input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.choice-card input:checked ~ .choice-icon{ transform:scale(1.1); }

.choice-card:has(input:checked){
  border-color:var(--navy-700);
  background:var(--gold-100);
  box-shadow:0 8px 18px -12px rgba(13,33,56,.4);
}

.choice-card:has(input:focus-visible){
  outline:2px solid var(--navy-700);
  outline-offset:2px;
}

.choice-icon{
  font-size:26px;
  transition:transform var(--transition);
}

.choice-card strong{
  font-size:16px;
  color:var(--navy-900);
  font-weight:700;
}

.choice-card small{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}

/* ---------- Skills text inputs ---------- */

.skills-inputs{
  display:grid;
  gap:16px;
  margin-bottom:18px;
}

.skills-inputs label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  font-size:14px;
  color:var(--navy-800);
}

.skills-inputs input[type="text"]{
  border:2px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  transition:border-color var(--transition);
}

.skills-inputs input[type="text"]:focus{
  outline:none;
  border-color:var(--gold-500);
}

/* ---------- Rating step (built by script.js) ---------- */

.rating-container{
  display:grid;
  gap:18px;
}

.rating-card{
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 20px;
  background:var(--paper);
}

.rating-card h3{
  margin:0 0 14px;
  font-size:17px;
  color:var(--navy-900);
  font-weight:700;
}

.rating-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-top:1px solid var(--line);
}

.rating-row:first-of-type{ border-top:none; }

.rating-row-label{
  font-size:14px;
  color:var(--navy-800);
  font-weight:500;
  flex:1 1 auto;
}

.rating-scale{
  display:flex;
  gap:6px;
}

.rating-scale button{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  transition:all var(--transition);
}

.rating-scale button:hover{ border-color:var(--gold-500); color:var(--gold-500); }

.rating-scale button.active{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border-color:var(--navy-900);
  color:#fff;
}

/* ---------- Form message / nav ---------- */

.form-message{
  min-height:20px;
  color:var(--danger);
  font-weight:700;
  font-size:14px;
  margin-top:16px;
}

.nav-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  gap:12px;
}

.nav-actions .primary-btn{ margin-inline-start:auto; }

/* ---------- Result panel ---------- */

.result-panel{ padding-top:4px; }

.result-panel > h2{
  font-size:clamp(22px, 3.4vw, 28px);
  font-weight:900;
  color:var(--navy-900);
  margin:6px 0 22px;
}

.winner-card{
  display:flex;
  align-items:center;
  gap:24px;
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff;
  border-radius:var(--radius-lg);
  padding:26px clamp(18px, 4vw, 32px);
  margin-bottom:24px;
  flex-wrap:wrap;
}

.score-ring{
  --percent:0;
  width:100px;
  height:100px;
  border-radius:50%;
  flex:0 0 auto;
  background:conic-gradient(var(--gold-500) calc(var(--percent) * 1%), rgba(255,255,255,.18) 0);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.score-ring::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--navy-900);
}

.score-ring span{
  position:relative;
  font-weight:900;
  font-size:20px;
}

.winner-card h3{
  margin:0 0 6px;
  font-size:22px;
  font-weight:900;
}

.winner-card p{
  margin:0;
  color:rgba(255,255,255,.85);
  font-size:15px;
  max-width:560px;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:20px;
}

@media (max-width: 720px){
  .result-grid{ grid-template-columns:1fr; }
}

.info-card{
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
  background:var(--paper);
}

.info-card h3{
  margin:0 0 12px;
  font-size:16px;
  color:var(--navy-900);
  font-weight:700;
}

.info-card ul{
  margin:0;
  padding-inline-start:20px;
  color:var(--navy-800);
  font-size:14.5px;
  line-height:1.7;
}

.info-card p{
  margin:0;
  color:var(--navy-800);
  font-size:14.5px;
  line-height:1.7;
}

.plan-card{
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
  margin-bottom:20px;
  background:#fff;
}

.plan-card h3{
  margin:0 0 14px;
  font-size:16px;
  color:var(--navy-900);
  font-weight:700;
}

.weeks{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

@media (max-width: 780px){
  .weeks{ grid-template-columns:repeat(2, 1fr); }
}

.weeks > div{
  background:var(--paper);
  border-radius:var(--radius-sm);
  padding:14px;
  border-inline-start:4px solid var(--gold-500);
}

.weeks b{
  display:block;
  color:var(--navy-900);
  font-size:14px;
  margin-bottom:6px;
}

.weeks span{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.comparison-card{
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
  margin-bottom:24px;
  background:#fff;
}

.comparison-card h3{
  margin:0 0 14px;
  font-size:16px;
  color:var(--navy-900);
  font-weight:700;
}

.table-wrap{ overflow-x:auto; }

table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}

thead th{
  text-align:start;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  padding:10px 12px;
  border-bottom:2px solid var(--line);
}

tbody td{
  padding:12px;
  border-bottom:1px solid var(--line);
  color:var(--navy-800);
}

tbody tr:last-child td{ border-bottom:none; }

.tag-decision{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12.5px;
}

.tag-decision.now{ background:rgba(13,33,56,.10); color:var(--navy-700); }
.tag-decision.later{ background:rgba(211,154,74,.16); color:var(--gold-600); }
.tag-decision.hold{ background:rgba(228,87,61,.12); color:var(--danger); }

.result-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.copy-message{
  margin-top:10px;
  font-size:13.5px;
  color:var(--navy-700);
  font-weight:700;
  min-height:18px;
}

/* ---------- Print ---------- */

@media print{
  .brand-header, .site-footer, .result-actions{ display:none !important; }
  body{ background:#fff; }
  .app-card{ box-shadow:none; padding:0; }
}

/* ---------- Focus visibility ---------- */

button:focus-visible, input:focus-visible{
  outline:2px solid var(--navy-700);
  outline-offset:2px;
}