/* =========================================
   css/main.css - Design Tokens & Foundation
   Signature: results render as admission-ticket
   stubs — a nod to the "seat number" concept.
   ========================================= */

:root{
  /* Ink & Paper */
  --ink:#1b2340;
  --ink-soft:#5b6485;
  --paper:#f6f2e9;
  --paper-solid:#efe9db;

  /* Accents */
  --gold:#bd8a3f;
  --gold-deep:#8f691f;
  --indigo:#3b4a91;
  --indigo-deep:#2a366e;
  --emerald:#1f8f63;
  --rose:#c14a3f;

  /* Glass */
  --glass-bg:rgba(255,255,255,.68);
  --glass-border:rgba(255,255,255,.55);
  --glass-shadow:0 10px 40px 0 rgba(27,35,64,.10);

  /* Type */
  --font-display:'Fraunces', 'Cairo', serif;
  --font-body:'Inter', 'Cairo', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --transition-fast:.2s cubic-bezier(.4,0,.2,1);
  --transition-smooth:.45s cubic-bezier(.16,1,.3,1);

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
}

html[lang="ar"]{
  --font-display:'Cairo', serif;
  --font-body:'Cairo', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background-color:var(--paper);
  color:var(--ink);
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  transition:background-color var(--transition-smooth), color var(--transition-smooth);
}

h1,h2,h3,.eyebrow{ font-family:var(--font-display); letter-spacing:-.02em; }

a{ color:inherit; text-decoration:none; }

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 1.5rem;
  position:relative;
  z-index:10;
}

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

/* ============ NAV ============ */
.app-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
}
.brand .brand-mark{ width:34px; height:34px; }

.nav-links{ display:flex; align-items:center; gap:.4rem; }

.nav-actions{ display:flex; align-items:center; gap:.5rem; }

.icon-btn{
  background:transparent;
  border:1px solid transparent;
  color:var(--ink-soft);
  cursor:pointer;
  padding:.55rem .8rem;
  border-radius:999px;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.icon-btn:hover{ color:var(--indigo); background-color:rgba(59,74,145,.08); border-color:rgba(59,74,145,.12); }
.icon-btn.pill{ border:1px solid rgba(27,35,64,.12); }

/* ============ HERO ============ */
.hero{ padding:2rem 0 1rem; text-align:center; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-deep);
  background:rgba(189,138,63,.12);
  padding:.4rem .9rem;
  border-radius:999px;
  margin-bottom:1.25rem;
}
.hero h1{
  font-size:clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight:600;
  line-height:1.08;
  max-width:20ch;
  margin:0 auto .9rem;
}
.hero .subtitle{
  color:var(--ink-soft);
  font-size:1.08rem;
  max-width:52ch;
  margin:0 auto;
}

/* ============ SEARCH ============ */
.search-section{ margin:2.25rem 0; }
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  padding:2.25rem;
}

.search-wrapper{ margin-top:.25rem; }

.quick-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem;
}
.stat-badge{
  flex:1 1 140px;
  background:rgba(27,35,64,.04);
  border:1px solid rgba(27,35,64,.07);
  border-radius:var(--radius-md);
  padding:.85rem 1rem;
  text-align:center;
}
.stat-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:.25rem; }
.stat-value{ display:block; font-family:var(--font-mono); font-weight:600; font-size:1.15rem; color:var(--indigo); }

/* ============ RESULTS: TICKET STUB ============ */
.results-container{ margin-top:1.25rem; }
.results-list{ display:flex; flex-direction:column; gap:.9rem; padding:1.25rem; }

.result-item{
  position:relative;
  display:flex;
  align-items:stretch;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(27,35,64,.09);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.result-item:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,35,64,.10); }

.student-info{
  flex:1;
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  justify-content:center;
}
.student-info strong{ font-size:1rem; }
.seat-badge{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-soft);
  letter-spacing:.03em;
}

.ticket-divider{
  position:relative;
  width:0;
  border-left:2px dashed rgba(27,35,64,.22);
  margin:.6rem 0;
}
.ticket-divider::before,
.ticket-divider::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:16px; height:16px;
  border-radius:50%;
  background:var(--paper);
}
.ticket-divider::before{ top:-9px; }
.ticket-divider::after{ bottom:-9px; }

.student-score{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.1rem;
}
.score-percentage{ font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--emerald); }
.score-percentage.low{ color:var(--rose); }
.view-btn{
  background:var(--indigo);
  color:#fff;
  padding:.55rem 1rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
  transition:background-color var(--transition-fast);
}
.view-btn:hover{ background:var(--indigo-deep); }

.empty-state{ text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); }

/* ============ SECTIONS (content to give the page depth) ============ */
.section{ padding:3.5rem 0; }
.section-head{ text-align:center; max-width:42ch; margin:0 auto 2.25rem; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2rem); font-weight:600; margin-bottom:.6rem; }
.section-head p{ color:var(--ink-soft); }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.feature-card{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(27,35,64,.08);
  border-radius:var(--radius-md);
  padding:1.6rem;
}
.feature-card .icon-wrap{
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(59,74,145,.1);
  color:var(--indigo);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.feature-card h3{ font-size:1.02rem; font-weight:600; margin-bottom:.4rem; }
.feature-card p{ color:var(--ink-soft); font-size:.92rem; }

.steps-list{ counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.step-item{ position:relative; padding-top:2.4rem; }
.step-item::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--gold-deep);
  background:rgba(189,138,63,.14);
  padding:.25rem .55rem;
  border-radius:999px;
  position:absolute;
  top:0; left:0;
}
html[dir="rtl"] .step-item::before{ left:auto; right:0; }
.step-item h3{ font-size:1rem; font-weight:600; margin-bottom:.35rem; }
.step-item p{ color:var(--ink-soft); font-size:.9rem; }

.faq-item{ border-bottom:1px solid rgba(27,35,64,.09); }
.faq-question{
  width:100%;
  text-align:inherit;
  background:none; border:none;
  font-family:inherit; font-size:1rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0; cursor:pointer;
}
.faq-question .chevron{ transition:transform var(--transition-fast); flex-shrink:0; }
.faq-item.open .faq-question .chevron{ transform:rotate(180deg); }
.faq-answer{
  max-height:0; overflow:hidden;
  color:var(--ink-soft); font-size:.92rem;
  transition:max-height var(--transition-smooth), padding var(--transition-smooth);
}
.faq-item.open .faq-answer{ padding-bottom:1.1rem; }

/* ============ FOOTER ============ */
.app-footer{
  border-top:1px solid rgba(27,35,64,.1);
  padding:2.25rem 0 3rem;
  margin-top:2rem;
  color:var(--ink-soft);
  font-size:.88rem;
}
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-links{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-links a:hover{ color:var(--indigo); }

/* ============ Buttons (shared) ============ */
.action-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.btn{
  font-family:inherit; font-weight:600; font-size:.9rem;
  padding:.75rem 1.3rem; border-radius:999px; border:none; cursor:pointer;
  transition:background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:var(--indigo); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--indigo-deep); }
.btn-ghost{ background:rgba(27,35,64,.06); color:var(--ink); }
.btn-ghost:hover:not(:disabled){ background:rgba(27,35,64,.11); }
.btn-danger{ background:rgba(193,74,63,.12); color:var(--rose); }
.btn-danger:hover:not(:disabled){ background:rgba(193,74,63,.2); }

/* ============ TOASTS ============ */
.toast-stack{
  position:fixed;
  bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.5rem;
  z-index:999;
}
.toast{
  background:var(--ink);
  color:#fff;
  padding:.75rem 1.1rem;
  border-radius:999px;
  font-size:.85rem;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.toast.error{ background:var(--rose); }
.toast.success{ background:var(--emerald); }

/* ============ Utilities ============ */
.hidden{ display:none !important; }
.text-center{ text-align:center; }