/* =========================================================
   Clutch Sports Academy — التنسيقات المخصّصة
   (Tailwind يتحمّل من الـ CDN، وهذا الملف للخطوط والتفاصيل)
   ========================================================= */

/* ---------------------------------------------------------
   خط Somar — الخط الرسمي للأكاديمية (من مجلد Font/)
   --------------------------------------------------------- */
@font-face{font-family:"Somar";src:url("../Font/Somar-Thin.otf") format("opentype");
           font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-ThinItalic.otf") format("opentype");
           font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-ExtraLight.otf") format("opentype");
           font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-ExtraLightItalic.otf") format("opentype");
           font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-Light.otf") format("opentype");
           font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-LightItalic.otf") format("opentype");
           font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-Regular.otf") format("opentype");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-RegularItalic.otf") format("opentype");
           font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-Medium.otf") format("opentype");
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-MediumItalic.otf") format("opentype");
           font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-SemiBold.otf") format("opentype");
           font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-SemiBoldItalic.otf") format("opentype");
           font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-Bold.otf") format("opentype");
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-BoldItalic.otf") format("opentype");
           font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-ExtraBold.otf") format("opentype");
           font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-ExtraBoldItalic.otf") format("opentype");
           font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-Black.otf") format("opentype");
           font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Somar";src:url("../Font/Somar-BlackItalic.otf") format("opentype");
           font-weight:900;font-style:italic;font-display:swap}

/* الخط يطبّق على كل شيء — بما فيها الحقول والأزرار
   (بدون هذا تستخدم عناصر النموذج خط النظام الافتراضي) */
html, body,
input, select, textarea, button, optgroup, option {
  font-family: "Somar", ui-sans-serif, system-ui, sans-serif !important;
}

/* ---------------------------------------------------------
   لوحة الألوان
   -----------------------------------------------------------
   --clutch      الأصفر الفسفوري — للنصوص والأزرار فقط
   --clutch-dim  الزيتوني — لكل الحدود والفواصل (يكسر حدة الفسفوري)
   --ink         الأزرق الداكن — خلفية البطاقات
   --------------------------------------------------------- */
:root{
  --clutch:      #E8FF00;
  --clutch-dim:  #8d9309;
  --ink:         #111827;
  --bg:          #000000;
}

/* ---------------------------------------------------------
   الأساسيات — الموقع دارك مود دائماً
   --------------------------------------------------------- */
html { color-scheme: dark; }
body { background:var(--bg); color:#fff; }

/* ---------------------------------------------------------
   الفواصل — كلها باللون الزيتوني
   --------------------------------------------------------- */
hr,
.divider {
  border: 0;
  border-top: 1px solid var(--clutch-dim);
  margin: 1.5rem 0;
}
.divider-y { border-inline-start: 1px solid var(--clutch-dim); }

/* ---------------------------------------------------------
   شريط التمرير
   --------------------------------------------------------- */
::-webkit-scrollbar        { width:10px; height:10px }
::-webkit-scrollbar-track  { background:var(--ink) }
::-webkit-scrollbar-thumb  { background:var(--clutch-dim); border-radius:6px }
::-webkit-scrollbar-thumb:hover { background:var(--clutch) }

/* ---------------------------------------------------------
   الصور
   --------------------------------------------------------- */
img { max-width:100%; }

/* توحيد نعومة زوايا البوكسات بالموقع */
.rounded {
  border-radius:16px !important;
}

.country-code-select {
  border-radius:28px !important;
  -webkit-border-radius:28px !important;
  background-clip:padding-box;
}

/* إطار الصور الديمو — يختفي تلقائياً عند وضع صورة حقيقية */
.img-frame {
  background:#030712;
  overflow:hidden;
  position:relative;
}
.img-frame img { width:100%; height:100%; object-fit:cover; display:block; }

.schedule-choice {
  appearance:none;
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-height:clamp(13rem, 22vw, 18rem);
  padding:2rem;
  overflow:hidden;
  background:#000;
  color:var(--clutch);
  border:1px solid rgba(141,147,9,.58);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  cursor:pointer;
  transform:translateZ(0);
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.schedule-choice:hover {
  border-color:var(--clutch);
  box-shadow:0 0 0 1px rgba(232,255,0,.18), 0 22px 52px rgba(0,0,0,.44);
  transform:translateY(-2px);
}

.schedule-choice__image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
}

.schedule-choice__label {
  position:relative;
  z-index:1;
  color:var(--clutch);
  font-size:clamp(2rem, 4vw, 3.75rem);
  font-weight:900;
  line-height:1;
  text-align:center;
  text-shadow:0 0 22px rgba(232,255,0,.35), 0 2px 18px rgba(0,0,0,.84);
}

.store-image-toggle {
  appearance:none;
  display:block;
  width:100%;
  height:clamp(12.5rem, 18vw, 15rem);
  padding:0;
  cursor:pointer;
  transition:
    height .44s cubic-bezier(.2,.8,.22,1),
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.store-image-toggle:hover {
  border-color:var(--clutch);
  box-shadow:0 0 0 1px rgba(232,255,0,.18), 0 18px 42px rgba(0,0,0,.34);
  transform:translateY(-1px);
}

.store-image-toggle img {
  transition:
    transform .44s cubic-bezier(.2,.8,.22,1),
    opacity .28s ease,
    filter .28s ease;
}

.apparel-choice {
  appearance:none;
  display:grid;
  width:100%;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:#030712;
  border:2px solid var(--clutch-dim);
  border-radius:16px;
  cursor:pointer;
  text-align:center;
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.apparel-choice:hover,
.apparel-choice.is-selected {
  border-color:var(--clutch);
  box-shadow:0 0 0 1px rgba(232,255,0,.22), 0 18px 42px rgba(0,0,0,.34);
}

.apparel-choice:hover {
  transform:translateY(-1px);
}

.apparel-choice__image {
  display:block;
  width:100%;
  height:5.25rem;
  border-radius:0;
  transition:
    height .34s cubic-bezier(.2,.8,.22,1),
    opacity .24s ease,
    filter .24s ease;
}

.apparel-choice__image img {
  transition:transform .34s cubic-bezier(.2,.8,.22,1);
}

.apparel-choice:not(.is-selected) .apparel-choice__image {
  opacity:.55;
  filter:saturate(.75) contrast(1.08);
}

.apparel-choice.is-selected .apparel-choice__image {
  height:clamp(12rem, 30vw, 16rem);
  opacity:1;
  filter:none;
}

.apparel-choice.is-selected .apparel-choice__image img {
  transform:scale(1.02);
}

.apparel-choice__label {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3.5rem;
  padding:.85rem 1rem;
  color:var(--clutch);
  font-weight:900;
  font-size:1.15rem;
  line-height:1.2;
}

.apparel-choice.is-selected .apparel-choice__label {
  color:#000;
  background:var(--clutch);
}

.store-product-card {
  align-self:start;
  transition:
    border-color .24s ease,
    box-shadow .24s ease;
}

.store-product-card.is-collapsed {
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}

.store-product-details {
  animation:storeDetailsIn .24s ease both;
}

@media (max-width: 767px) {
  .schedule-choice {
    min-height:min(66vw, 20rem);
  }

  .store-image-toggle {
    height:min(68vw, 20rem);
  }

  .apparel-choice.is-selected .apparel-choice__image {
    height:min(56vw, 14rem);
  }
}

@keyframes storeDetailsIn {
  from {
    opacity:0;
    transform:translateY(-6px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* ملاحظة: الصور الناقصة تُخفى بالكامل (البطاقة أو إطار الصورة) — راجع hideCard في js/app.js */

/* ---------------------------------------------------------
   تفاصيل صغيرة
   --------------------------------------------------------- */
::selection { background:var(--clutch); color:#000 }
:focus-visible { outline:2px solid var(--clutch); outline-offset:2px }
html { scroll-behavior:smooth }

/* ---------------------------------------------------------
   أنميشن النزول في اللاندنق بيج
   --------------------------------------------------------- */
.reveal-on-scroll {
  opacity:0;
  transform:translateY(28px) scale(.98);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.75,.25,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
}

.hero-mark {
  animation:heroFloat 4.5s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform:translateY(0) }
  50% { transform:translateY(-8px) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  .reveal-on-scroll {
    opacity:1;
    transform:none;
    transition:none;
  }
  .hero-mark { animation:none }
  .store-image-toggle,
  .store-image-toggle img,
  .store-product-details {
    transition:none;
    animation:none;
  }
}