/* =====================================================================
   EidClock — Shared Stylesheet (used by en / ur / ar versions)
   ===================================================================== */
:root{
  --night-1:#071f1a;
  --night-2:#0a3d31;
  --night-3:#0f5443;
  --gold:#d4af6a;
  --gold-bright:#f3d999;
  --ivory:#f7f1e0;
  --maroon:#7a2333;
  --star:#fff6dd;
  --glass:rgba(247,241,224,0.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--night-1);
  color:var(--ivory);
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Amiri',serif; }
a{ color:inherit; }

[dir="rtl"] body{ font-family:'Noto Kufi Arabic','Amiri',sans-serif; }
[dir="rtl"] .there-are-only,[dir="rtl"] .until{ font-family:'Amiri',serif; }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ===================== TOP NAV (site-wide, multi-page) ===================== */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 24px;
  background:rgba(7,31,26,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,175,106,0.18);
}
.topnav .brand{
  font-family:'Cinzel',serif;
  letter-spacing:1.5px;
  font-size:15px;
  color:var(--gold-bright);
  text-decoration:none;
  white-space:nowrap;
}
.topnav .navlinks{
  display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px;
}
.topnav .navlinks a{
  text-decoration:none;
  color:rgba(247,241,224,0.8);
  transition:color .2s ease;
}
.topnav .navlinks a:hover, .topnav .navlinks a[aria-current="page"]{ color:var(--gold-bright); }
.lang-switch{
  display:flex; gap:6px;
}
.lang-switch a{
  font-size:12px;
  font-weight:600;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(212,175,106,0.35);
  text-decoration:none;
  color:rgba(247,241,224,0.75);
}
.lang-switch a[aria-current="true"]{
  background:var(--gold);
  color:var(--night-1);
  border-color:transparent;
}

/* ===================== MOBILE HAMBURGER DROPDOWN ===================== */
.menu-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:38px; height:38px;
  background:rgba(247,241,224,0.06);
  border:1px solid rgba(212,175,106,0.35);
  border-radius:10px;
  cursor:pointer;
  flex:none;
}
.menu-toggle span{
  display:block; width:17px; height:2px; border-radius:2px;
  background:var(--gold-bright);
  transition:transform .22s ease, opacity .22s ease;
}
.topnav.menu-open .menu-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.topnav.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
.topnav.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu-panel{ display:contents; }
@media (max-width:720px){
  .topnav{ flex-wrap:nowrap; padding:12px 16px; position:relative; }
  .menu-toggle{ display:flex; }
  .topnav .navlinks,
  .topnav .lang-switch{
    display:none;
  }
  .menu-panel{
    display:none;
  }
  .topnav.menu-open .menu-panel{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:absolute;
    left:16px; right:16px; top:100%;
    margin-top:8px;
    background:rgba(7,31,26,0.97);
    border:1px solid rgba(212,175,106,0.25);
    border-radius:14px;
    padding:12px;
    box-shadow:0 16px 40px -12px rgba(0,0,0,0.6);
    z-index:60;
  }
  .topnav.menu-open .navlinks{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .topnav.menu-open .navlinks a{
    padding:12px 14px;
    border-radius:9px;
    width:100%;
    text-align:center;
  }
  .topnav.menu-open .navlinks a:hover,
  .topnav.menu-open .navlinks a[aria-current="page"]{
    background:rgba(212,175,106,0.12);
  }
  .topnav.menu-open .lang-switch{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    padding-top:10px;
    border-top:1px solid rgba(212,175,106,0.15);
  }
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:clamp(560px, 92svh, 1000px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:70px 20px 60px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212,175,106,0.18), transparent 55%),
    linear-gradient(180deg,var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);
  overflow:hidden;
}

.stars, .stars2{
  position:absolute; inset:0;
  background-repeat:repeat;
  opacity:0.8;
  animation:drift 140s linear infinite;
  pointer-events:none;
}
.stars{
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--star), transparent),
    radial-gradient(1px 1px at 90px 120px, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 150px 60px, var(--star), transparent),
    radial-gradient(1px 1px at 200px 180px, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 260px 40px, var(--star), transparent),
    radial-gradient(1px 1px at 320px 220px, var(--star), transparent);
  background-size:340px 260px;
}
.stars2{
  background-image:
    radial-gradient(1px 1px at 40px 160px, var(--gold-bright), transparent),
    radial-gradient(1.3px 1.3px at 180px 20px, var(--gold-bright), transparent),
    radial-gradient(1px 1px at 260px 140px, var(--gold-bright), transparent);
  background-size:300px 300px;
  animation:drift 220s linear infinite reverse;
  opacity:0.5;
}
@keyframes drift{ from{ transform:translate(0,0); } to{ transform:translate(-1000px,-500px); } }
@keyframes twinkle{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
.twinkler{
  position:absolute; border-radius:50%;
  background:var(--star);
  box-shadow:0 0 6px 1px var(--star);
  animation:twinkle 3.4s ease-in-out infinite;
}

.clock-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.khatam{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw,620px); height:min(70vw,620px);
  max-width:92%; max-height:92%;
  opacity:0.10;
  animation:spin 160s linear infinite;
  pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(212,175,106,0.35));
}
@keyframes spin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes spin-mobile{
  from{ transform:translate(-50%,-6%) rotate(0deg); }
  to{ transform:translate(-50%,-6%) rotate(360deg); }
}

.moon{
  position:absolute; top:6%; right:8%;
  width:70px; height:70px;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:-22px 0 0 6px var(--night-1), 0 0 40px 8px rgba(243,217,153,0.55);
  animation:float 7s ease-in-out infinite;
}
[dir="rtl"] .moon{ right:auto; left:8%; box-shadow:22px 0 0 6px var(--night-1), 0 0 40px 8px rgba(243,217,153,0.55); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

.next-tag{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--glass);
  border:1px solid rgba(212,175,106,0.35);
  padding:8px 20px;
  border-radius:999px;
  font-size:13px;
  color:var(--ivory);
  margin-bottom:30px;
  backdrop-filter:blur(6px);
}
.next-tag b{ color:var(--gold-bright); font-weight:600; }
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);}

.there-are-only{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Amiri',serif;
  font-style:italic;
  font-weight:600;
  letter-spacing:0.5px;
  font-size:clamp(20px,4vw,34px);
  margin:0 0 20px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(243,217,153,0.4));
}
.there-are-only::before{
  content:"✦";
  -webkit-text-fill-color:var(--gold);
  color:var(--gold);
  font-size:0.5em;
  opacity:.85;
}
.there-are-only::after{
  content:"";
  display:block;
  position:absolute;
  left:50%; bottom:-14px;
  transform:translateX(-50%);
  width:70px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ===================== COUNTDOWN ===================== */
.countdown{
  position:relative;
  display:flex;
  gap:clamp(8px,3vw,28px);
  margin:30px 0 10px;
  flex-wrap:wrap;
  justify-content:center;
}
.unit{ width:clamp(64px,20vw,140px); }
.card{
  position:relative;
  background:linear-gradient(160deg,rgba(247,241,224,0.09),rgba(247,241,224,0.02));
  border:1px solid rgba(212,175,106,0.4);
  border-radius:18px;
  padding:clamp(12px,3vw,22px) 4px;
  box-shadow:0 0 0 1px rgba(212,175,106,0.08) inset, 0 20px 40px -18px rgba(0,0,0,0.6), 0 0 30px -6px rgba(212,175,106,0.25);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,106,0.18), transparent 60%);
}
.num{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:clamp(26px,7vw,58px);
  color:var(--gold-bright);
  line-height:1;
  text-shadow:0 0 18px rgba(243,217,153,0.5);
  transition:transform .25s ease, opacity .25s ease;
  display:block;
}
.num.pulse{ animation:pulse .5s ease; }
@keyframes pulse{ 0%{ transform:scale(1.18); opacity:.5; } 100%{ transform:scale(1); opacity:1; } }
.label{
  margin-top:6px;
  font-size:clamp(9px,2vw,13px);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:.75;
}

.until{
  font-family:'Amiri',serif;
  font-weight:700;
  font-size:clamp(26px,6vw,54px);
  margin:24px 0 8px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(212,175,106,0.35);
}

.tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0 26px; }
.tab{
  font-size:13.5px; font-weight:500;
  color:rgba(247,241,224,0.75);
  background:rgba(247,241,224,0.05);
  border:1px solid rgba(212,175,106,0.3);
  padding:9px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:all .22s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.tab:hover{ border-color:var(--gold); color:var(--ivory); }
.tab.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:var(--night-1); font-weight:600; border-color:transparent;
  box-shadow:0 6px 20px -6px rgba(212,175,106,0.6);
}

.site-badge{
  display:inline-block; margin-top:10px;
  padding:10px 26px;
  border:1px solid rgba(212,175,106,0.5);
  border-radius:999px;
  font-family:'Cinzel',serif;
  letter-spacing:2px; font-size:14px;
  color:var(--gold-bright);
  text-decoration:none;
  transition:all .25s ease;
}
.site-badge:hover{ background:rgba(212,175,106,0.12); box-shadow:0 0 24px rgba(212,175,106,0.4); }

.disclaimer{
  max-width:560px; margin:26px auto 0;
  font-size:12px; line-height:1.6;
  color:rgba(247,241,224,0.55);
}

.skyline{
  position:absolute; bottom:0; left:0; right:0;
  height:min(22vw,180px);
  background:
    linear-gradient(180deg, transparent, rgba(4,15,12,0.9) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%23051813' d='M0 220V150h20V90h14V150h30V60h10V40a10 10 0 0 1 20 0V60h10V150h30V100h16V150h24V70h8V40a12 12 0 0 1 24 0V70h8V150h40V120h10V60a30 30 0 0 1 60 0V120h10V150h60V90h12V60a8 8 0 0 1 16 0V90h12V150h30V70h10V40a10 10 0 0 1 20 0V70h10V150h50V100h14V150h40V60h12V30a14 14 0 0 1 28 0V60h12V150h60V110h14V150h34V80h10V50a10 10 0 0 1 20 0V80h10V150h50V90h12V150h140V90h12V60a8 8 0 0 1 16 0V90h12V150h40V70h10V40a10 10 0 0 1 20 0V70h10V150h60V100h16V150h30V60h10V30a12 12 0 0 1 24 0V60h10V150h50V110h12V150h60V90h14V40a10 10 0 0 1 20 0V90h14V150h60V120h10V150h60V220z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:cover;
  pointer-events:none;
}

.scroll-cue{
  position:absolute; bottom:18px;
  font-size:22px; color:var(--gold);
  animation:float 2.4s ease-in-out infinite;
  opacity:.7;
}

/* ===================== SOCIAL SHARE ROW ===================== */
.share-row{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.share-row a, .share-row button{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,241,224,0.06);
  border:1px solid rgba(212,175,106,0.35);
  color:var(--gold-bright);
  cursor:pointer; text-decoration:none;
  backdrop-filter:blur(6px);
  transition:all .2s ease;
  padding:0;
}
.share-row svg{ width:17px; height:17px; }
.share-row a:hover, .share-row button:hover{
  background:var(--gold); color:var(--night-1);
  transform:scale(1.08); box-shadow:0 0 18px rgba(212,175,106,0.4);
}
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--gold-bright); color:var(--night-1);
  padding:10px 20px; border-radius:10px;
  font-size:13px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:all .3s ease; z-index:100;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== CONTENT SECTIONS ===================== */
main{ background:var(--night-1); position:relative; }
.section{
  max-width:880px; margin:0 auto;
  padding:60px 24px;
  border-top:1px solid rgba(212,175,106,0.14);
}
.section h1.page-title{
  font-size:clamp(28px,5vw,44px);
  color:var(--gold-bright);
  text-align:center;
  margin-bottom:14px;
}
.section .lede{
  text-align:center;
  max-width:640px; margin:0 auto 30px;
  color:rgba(247,241,224,0.75);
  font-size:15.5px;
  line-height:1.8;
}
.section h2{
  font-size:clamp(22px,4vw,32px);
  color:var(--gold-bright);
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.section h2 svg{ width:22px; height:22px; flex:none; }
.section p{ line-height:1.85; color:rgba(247,241,224,0.85); font-size:16px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.two-col.three-col{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:900px){ .two-col.three-col{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .two-col{ grid-template-columns:1fr; } .two-col.three-col{ grid-template-columns:1fr; } }

.eid-card{ background:var(--glass); border:1px solid rgba(212,175,106,0.22); border-radius:16px; padding:24px; }
.eid-card h3{ color:var(--gold-bright); font-size:20px; margin-top:0; }
.eid-card p{ font-size:14.5px; }

/* mini inline live-number chip used inside FAQ answers */
.live-num{
  display:inline-flex; align-items:baseline; gap:5px;
  font-family:'Cinzel',serif; font-weight:700;
  color:var(--gold-bright);
  padding:1px 8px;
  border:1px solid rgba(212,175,106,0.4);
  border-radius:8px;
  background:rgba(212,175,106,0.08);
}
.live-num small{ font-size:11px; font-weight:500; opacity:.8; text-transform:uppercase; letter-spacing:1px; }

/* ===================== FAQ ACCORDION ===================== */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--glass);
  border:1px solid rgba(212,175,106,0.22);
  border-radius:14px;
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:inherit;
  background:none; border:none; cursor:pointer;
  color:var(--ivory);
  font-family:'Poppins',sans-serif;
  font-weight:600; font-size:15.5px;
  padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq-q .plus{ color:var(--gold); font-size:20px; flex:none; transition:transform .25s ease; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  padding:0 22px;
  color:rgba(247,241,224,0.82);
  font-size:14.8px; line-height:1.8;
}
.faq-item.open .faq-a{ padding-bottom:20px; }
.faq-search{
  width:100%;
  max-width:480px;
  display:block;
  margin:0 auto 30px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(212,175,106,0.35);
  background:rgba(247,241,224,0.06);
  color:var(--ivory);
  font-size:14px;
}
.faq-search::placeholder{ color:rgba(247,241,224,0.4); }
.faq-cat-title{ margin-top:40px; }

footer{
  text-align:center;
  padding:40px 20px 50px;
  border-top:1px solid rgba(212,175,106,0.16);
  color:rgba(247,241,224,0.55);
  font-size:13px;
}
footer a{ color:var(--gold-bright); text-decoration:none; }
footer .flinks{ margin-bottom:10px; }
footer .flinks a{ margin:0 10px; }
footer .arabic{ font-family:'Amiri',serif; color:var(--gold-bright); font-size:18px; margin-bottom:10px; opacity:.85; }

/* ===================== MOBILE FIXES ===================== */
@media (max-width:640px){
  .hero{ padding-top:20px; }
  .moon{ top:18px; right:16px; width:44px; height:44px;
    box-shadow:-14px 0 0 5px var(--night-1), 0 0 24px 5px rgba(243,217,153,0.55); }
  [dir="rtl"] .moon{ right:auto; left:16px; box-shadow:14px 0 0 5px var(--night-1), 0 0 24px 5px rgba(243,217,153,0.55); }
  .next-tag{ position:relative; z-index:2; max-width:92vw; flex-wrap:wrap; justify-content:center; text-align:center; row-gap:4px; margin-top:56px; }

  .clock-stage{ position:relative; }
  .khatam{
    top:100%; left:50%;
    transform:translate(-50%,-6%) rotate(0deg);
    animation-name:spin-mobile;
    width:min(82vw,340px); height:min(82vw,340px);
    max-width:none; max-height:none;
  }
}
@media (max-width:380px){
  .moon{ width:38px; height:38px; top:14px; right:14px; }
  .moon{ box-shadow:-11px 0 0 4px var(--night-1), 0 0 20px 5px rgba(243,217,153,0.55); }
  .next-tag{ margin-top:50px; }
}

/* ===================== TABLET ===================== */
@media (min-width:641px) and (max-width:1024px){
  .section{ padding:56px 32px; }
  .countdown{ gap:16px; }
}