/* assets/css/components.css — modern components */

/* ══ CARD ══ */
.card{
  background:var(--S);border-radius:22px;
  border:1px solid var(--B);padding:22px;
  margin-bottom:18px;box-shadow:var(--shadow);
  transition:box-shadow 0.2s,transform 0.2s;
}
.card:hover{box-shadow:var(--shadow-md)}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px;flex-wrap:wrap}

/* ══ CALENDAR ══ */
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nv{
  width:44px;height:44px;background:var(--S3);
  border:1.5px solid var(--B);border-radius:14px;cursor:pointer;
  font-size:22px;color:var(--MT);display:flex;align-items:center;
  justify-content:center;transition:all 0.15s;
}
.cal-nv:hover{background:var(--AL);color:var(--A);border-color:rgba(0,200,150,0.4)}
.cal-ti{text-align:center}
.cal-mo{font-size:24px;font-weight:900;color:var(--T)}
.cal-sb{font-size:13px;color:var(--MT);margin-top:3px;font-weight:600}

.cal-gr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-dn{text-align:center;font-size:12px;color:var(--HT);padding:8px 0;font-weight:800}
.cal-d{
  text-align:center;border-radius:12px;cursor:pointer;
  min-height:68px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding-top:8px;transition:background 0.12s;
  position:relative;
}
.cal-d:active:not(.emp){background:var(--S2)}
@media(hover:hover){.cal-d:hover:not(.emp){background:var(--S2)}}
.sd{display:block;font-size:20px;color:var(--T);line-height:1.15;font-weight:900}
.cal-sub{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:3px}
.gd{font-size:9px;color:var(--HT);line-height:1.4;font-weight:600}
.hd{font-size:9px;color:#1a9e74;line-height:1.4;font-weight:800}
.cal-d.fr{background:#c0392b;border-radius:12px}
.cal-d.fr .sd{color:#fff;font-weight:900}
.cal-d.fr .gd{color:rgba(255,255,255,0.65)}
.cal-d.fr .hd{color:rgba(255,255,255,0.85)}
.cal-d.fr:hover{background:#a93226}
.cal-dn.fri-lbl{color:#c0392b;font-weight:900}
.cal-d.holiday:not(.td) .sd{color:var(--G)}
.cal-d.td{
  background:linear-gradient(145deg,#00C896,#00A070);
  border-radius:14px;
  box-shadow:0 4px 16px rgba(0,180,130,0.45);
}
.cal-d.td .sd{color:#fff;font-size:22px;font-weight:900}
.cal-d.td .gd{color:rgba(255,255,255,0.65)}
.cal-d.td .hd{color:rgba(255,255,255,0.9)}
.cal-d.emp{cursor:default;min-height:68px}
.cal-d.sel-d:not(.td){background:var(--AL);outline:2px solid var(--A);outline-offset:-2px}
.cal-d.sel-d.td{outline:3px solid rgba(255,255,255,0.7);outline-offset:-3px}
.cal-ft{display:flex;align-items:center;justify-content:flex-start;margin-top:14px}
.td-btn{
  background:var(--AL);border:1.5px solid rgba(0,200,150,0.3);
  border-radius:12px;padding:10px 22px;font-size:14px;
  font-weight:700;cursor:pointer;color:var(--AM);
  font-family:inherit;transition:all 0.15s;
}
.td-btn:hover{background:var(--ALD);border-color:var(--A)}

/* Event dots */
.ev-dots{display:flex;justify-content:center;gap:2px;margin-top:4px;height:6px;align-items:center}
.ev-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ev-dot-af{background:var(--A)}.ev-dot-isl{background:var(--G)}.ev-dot-int{background:var(--INT)}
.ev-panel{background:var(--S3);border-radius:18px;padding:16px;margin-top:14px;border:1px solid var(--B);animation:evIn 0.2s ease}
@keyframes evIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ev-panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ev-panel-date{font-size:13px;color:var(--MT);font-weight:700}
.ev-panel-close{background:var(--S2);border:1px solid var(--B);color:var(--MT);cursor:pointer;font-size:14px;padding:4px 10px;border-radius:9px;transition:all 0.12s}
.ev-item{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:14px;margin-bottom:6px;border:1px solid transparent}
.ev-item-af{background:var(--AL);border-color:rgba(0,200,150,0.2)}
.ev-item-isl{background:var(--GL);border-color:rgba(240,165,0,0.2)}
.ev-item-int{background:var(--INTL);border-color:rgba(37,99,235,0.15)}
.ev-item-icon{font-size:20px;flex-shrink:0;line-height:1.3;margin-top:1px}
.ev-item-title{font-size:14px;font-weight:700;color:var(--T);line-height:1.4}
.ev-item-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;margin-top:5px;padding:3px 10px;border-radius:99px}
.ev-item-badge-af{background:var(--AL);color:var(--AM)}.ev-item-badge-isl{background:var(--GL);color:var(--GM)}.ev-item-badge-int{background:var(--INTL);color:var(--INT)}
.ev-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 13px;background:var(--S3);border-radius:14px;border:1px solid var(--B)}
.ev-leg-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--MT);font-weight:700}
.ev-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ev-month-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--B)}
.ev-month-title{font-size:13px;font-weight:800;color:var(--MT);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.ev-month-title::before{content:'';width:3px;height:14px;background:linear-gradient(to bottom,var(--A2),var(--AM));border-radius:2px;flex-shrink:0}
.ev-month-scrl{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--BM) transparent}
.ev-month-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:var(--S);border:1px solid var(--B);cursor:pointer;transition:all 0.12s}
.ev-month-row:hover{background:var(--S2);border-color:var(--BM)}
.ev-month-daynum{font-size:16px;font-weight:800;color:var(--T);min-width:24px;text-align:center;flex-shrink:0}
.ev-month-bar{width:4px;height:32px;border-radius:3px;flex-shrink:0}
.ev-month-bar-af{background:var(--A)}.ev-month-bar-isl{background:var(--G)}.ev-month-bar-int{background:var(--INT)}
.ev-month-ev-name{font-size:13px;font-weight:700;color:var(--T);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-month-ev-type{font-size:11px;color:var(--HT);font-weight:600;margin-top:2px}
.ev-month-chevron{font-size:13px;color:var(--HT);flex-shrink:0}

/* ══ PRAYER ══ */
.mdh{display:flex;gap:8px;margin-bottom:14px}
.mb{
  flex:1;padding:11px 8px;font-size:15px;font-weight:700;
  border-radius:14px;border:1.5px solid var(--BM);
  background:transparent;color:var(--MT);cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.mb.on{
  background:linear-gradient(135deg,var(--AL),var(--ALD));
  color:var(--AD);border-color:var(--A);
  box-shadow:0 0 0 2px rgba(0,200,150,0.12);
}
.pr-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:14px;
  font-size:16px;font-weight:600;color:var(--T);
  margin-bottom:5px;background:var(--S3);
  transition:background 0.15s;
}
.pr-row.cur{background:var(--AL);border:1.5px solid rgba(0,200,150,0.25)}
.pn{display:flex;align-items:center;gap:12px}
.pn-ic{font-size:18px}
.pt{color:var(--A);font-weight:900;font-variant-numeric:tabular-nums;font-size:17px}
.pr-row.cur .pt{color:var(--AM)}

.nxt-b{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--GL),rgba(240,165,0,0.08));
  color:var(--GM);border-radius:99px;padding:6px 14px;
  font-size:13px;font-weight:800;white-space:nowrap;
  border:1px solid rgba(240,165,0,0.25);
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--G);animation:pulse 2s ease infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.6)}}

.geo{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--B);flex-wrap:wrap}
.geo-b{
  font-size:14px;font-weight:700;color:var(--A);
  background:var(--AL);border:1.5px solid rgba(0,200,150,0.3);
  border-radius:99px;padding:9px 18px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:all 0.15s;
}
.geo-b:hover{background:var(--ALD);border-color:var(--A)}
.geo-inf{flex:1;min-width:0}
.geo-ct{font-size:15px;font-weight:800;color:var(--T)}
.geo-cd{font-size:12px;color:var(--HT);font-weight:500}

/* Loading / Error */
.wx-loading,.rates-loading{text-align:center;color:var(--HT);font-size:14px;padding:32px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.wx-spin{width:32px;height:32px;border:3px solid var(--B);border-top-color:var(--A);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wx-error,.rates-err{text-align:center;color:var(--HT);font-size:14px;padding:24px;line-height:1.7}

/* Selects */
.wx-sel{
  font-size:14px;padding:9px 14px;border-radius:12px;
  border:1.5px solid var(--BM);background:var(--S3);
  color:var(--T);font-family:inherit;outline:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  font-weight:700;min-width:120px;
}

/* ══ PRAYER PAGE EXTRAS ══ */
.city-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.city-info-item{background:var(--S3);border-radius:14px;padding:14px 16px;border:1px solid var(--B)}
.city-info-lbl{font-size:12px;color:var(--HT);font-weight:700;margin-bottom:5px}
.city-info-val{font-size:17px;font-weight:800;color:var(--T)}

.prayer-date-card{display:flex;flex-direction:column;gap:8px}
.prayer-date-row{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:var(--S3);border-radius:13px;border:1px solid var(--B);flex-wrap:wrap;gap:6px}
.prayer-date-lbl{font-size:13px;font-weight:700;color:var(--MT)}
.prayer-date-val{font-size:14px;font-weight:800;color:var(--T)}

.other-cities-grid{display:flex;flex-wrap:wrap;gap:8px}
.other-city-btn{font-size:13px;font-weight:700;color:var(--MT);text-decoration:none;padding:8px 14px;border-radius:12px;border:1.5px solid var(--B);background:var(--S3);white-space:nowrap;transition:all 0.15s}
.other-city-btn:hover{color:var(--A);background:var(--AL);border-color:rgba(0,200,150,0.35)}

.prayer-guide{display:flex;flex-direction:column;gap:12px}
.guide-row{display:flex;align-items:flex-start;gap:13px;padding:12px 14px;background:var(--S3);border-radius:13px;border:1px solid var(--B)}
.guide-icon{font-size:24px;line-height:1;flex-shrink:0;margin-top:2px}
.guide-row strong{font-size:14px;font-weight:800;color:var(--T);display:block;margin-bottom:3px}
.guide-row span{font-size:13px;color:var(--MT);line-height:1.5}

/* ══ COUNTDOWN ══ */
.eid-countdown-card{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,#006E54 0%,#004840 100%);
  border:none;color:#fff;margin-bottom:18px;
  padding:20px 22px;border-radius:22px;
  box-shadow:0 6px 24px rgba(0,80,55,0.4);
}
.cd-icon{font-size:36px;flex-shrink:0;line-height:1}
.cd-body{flex:1;min-width:0}
.cd-title{font-size:14px;color:rgba(255,255,255,0.85);font-weight:800;margin-bottom:5px}
.cd-date{font-size:12px;color:rgba(255,255,255,0.55);font-weight:600}
.cd-counter{text-align:center;flex-shrink:0;background:rgba(255,255,255,0.15);border-radius:16px;padding:14px 20px;border:1px solid rgba(255,255,255,0.2);min-width:80px}
.cd-days-num{font-size:38px;font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cd-days-lbl{font-size:11px;color:rgba(255,255,255,0.7);font-weight:700;margin-top:4px}
@media(max-width:400px){
  .cd-days-num{font-size:30px}
  .cd-icon{font-size:26px}
  .eid-countdown-card{padding:14px 14px;gap:12px}
}

/* ══ AFGHANISTAN.AF PORTAL BANNER ══ */
.af-portal-banner{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  border-radius:20px;padding:18px 20px;margin-bottom:18px;
  text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  transition:transform 0.18s,box-shadow 0.18s;
  position:relative;overflow:hidden;
}
.af-portal-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,168,124,0.15),rgba(0,60,120,0.0));
  pointer-events:none;
}
.af-portal-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,0.45);
}
.af-portal-flag{
  font-size:38px;flex-shrink:0;line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.af-portal-body{flex:1;min-width:0}
.af-portal-title{
  font-size:14px;font-weight:900;color:#fff;
  margin-bottom:5px;line-height:1.3;
}
.af-portal-sub{
  font-size:12px;color:rgba(255,255,255,0.5);
  font-weight:600;
}
.af-portal-arrow{
  font-size:22px;color:rgba(255,255,255,0.3);
  flex-shrink:0;transition:color 0.15s,transform 0.15s;
}
.af-portal-banner:hover .af-portal-arrow{
  color:rgba(0,200,150,0.9);
  transform:translateX(-4px);
}

/* ══ TOPUP BANNER ══ */
.topup-banner{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#00703C 0%,#004d2a 100%);
  border-radius:20px;padding:16px 18px;margin-bottom:18px;
  text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 6px 24px rgba(0,80,40,0.45);
  transition:transform 0.18s,box-shadow 0.18s;
  position:relative;overflow:hidden;
}
.topup-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at top right,rgba(255,255,255,0.08),transparent 60%);
  pointer-events:none;
}
.topup-banner:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,80,40,0.55);}
.topup-icon{font-size:34px;flex-shrink:0;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));}
.topup-body{flex:1;min-width:0}
.topup-title{font-size:15px;font-weight:900;color:#fff;margin-bottom:3px}
.topup-ops{font-size:11px;color:rgba(255,255,255,0.55);font-weight:600;margin-bottom:3px;letter-spacing:0.02em}
.topup-sub{font-size:11px;color:rgba(255,255,255,0.45);font-weight:600}
.topup-cta{
  flex-shrink:0;background:rgba(255,255,255,0.15);
  border:1.5px solid rgba(255,255,255,0.3);
  border-radius:12px;padding:9px 14px;
  font-size:13px;font-weight:900;color:#fff;white-space:nowrap;
  transition:background 0.15s,transform 0.15s;
}
.topup-banner:hover .topup-cta{background:rgba(255,255,255,0.25);transform:translateX(-2px);}
@media(max-width:380px){
  .topup-title{font-size:13px}
  .topup-icon{font-size:26px}
  .topup-banner{padding:13px 13px;gap:10px}
  .topup-cta{font-size:12px;padding:7px 10px}
}

/* ══ PORTAL BANNER ══ */
.af-portal-banner{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#0a1628 0%,#0d2137 50%,#0a2e1a 100%);
  border-radius:20px;padding:16px 18px;margin-bottom:14px;
  text-decoration:none;color:#fff;
  border:1px solid rgba(0,200,120,0.18);
  box-shadow:0 6px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(0,200,120,0.06);
  transition:transform 0.18s,box-shadow 0.18s;
  position:relative;overflow:hidden;
}
.af-portal-banner::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(0,224,144,0.07),transparent 60%);
  pointer-events:none;
}
.af-portal-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(0,200,120,0.15);
}
.af-portal-flag{flex-shrink:0;line-height:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));}
.af-portal-body{flex:1;min-width:0}
.af-portal-title{font-size:14px;font-weight:900;color:#fff;margin-bottom:4px;line-height:1.3}
.af-portal-sub{font-size:11px;color:rgba(255,255,255,0.4);font-weight:600}
.af-portal-arrow{
  font-size:20px;color:rgba(0,224,144,0.4);flex-shrink:0;
  transition:color 0.15s,transform 0.15s;
}
.af-portal-banner:hover .af-portal-arrow{color:rgba(0,224,144,0.9);transform:translateX(-3px);}

/* ── تاریخ قمری در سلول تقویم ── */
.cal-sub{display:flex;flex-direction:column;align-items:center;gap:1px}
.gd{font-size:9px;color:var(--HT);line-height:1}
.hd{font-size:9px;color:#2E7D6B;line-height:1;font-weight:700}
.cal-d.fr .hd{color:#1a6b5a}
.cal-d.td .hd{color:rgba(255,255,255,0.75)}

/* ══ CALENDAR HEADER UPDATE ══ */
.cal-nv-btn{
  background:var(--S3);border:1.5px solid var(--B);
  border-radius:12px;padding:9px 16px;
  font-size:13px;font-weight:800;color:var(--MT);
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:all 0.15s;
}
.cal-nv-btn:hover{background:var(--AL);color:var(--A);border-color:rgba(0,200,150,0.3)}
.cal-sub-dates{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:5px}
.cal-hijri-range{font-size:13px;font-weight:700;color:var(--G)}
.cal-miladi-range{font-size:12px;font-weight:600;color:var(--HT)}
/* نام کامل روزها */
.cal-dn{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){.cal-dn{font-size:10px!important}}

/* ══ ABOUT / PRIVACY / APP PAGES ══ */
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:500px){.about-features{grid-template-columns:1fr}}
.about-feat{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--S3);border-radius:14px;border:1px solid var(--B)}
.af-icon{font-size:24px;flex-shrink:0}
.about-feat strong{font-size:14px;font-weight:800;color:var(--T);display:block;margin-bottom:4px}
.about-feat p{font-size:12px;color:var(--MT);margin:0;line-height:1.5}
.about-contact-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;border-radius:14px;padding:12px 20px;font-size:14px;font-weight:800;text-decoration:none;margin-top:8px}
.about-contact-btn:hover{background:#1da853}
.privacy-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--B)}
.privacy-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.privacy-section h3{font-size:15px;font-weight:800;margin-bottom:10px;color:var(--T)}
.privacy-section p{font-size:14px;color:var(--MT);line-height:1.7;margin-bottom:8px}
.app-step{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--B);font-size:14px;color:var(--MT)}
.app-step:last-child{border-bottom:none}
.app-step-num{width:28px;height:28px;background:var(--A);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}

/* ══ HEADER VERSION & URL ══ */
.site-url{color:var(--A);font-weight:800;font-size:13px}
.site-ver{font-size:10px;font-weight:700;color:rgba(255,255,255,0.5);background:var(--A);padding:1px 6px;border-radius:6px;vertical-align:middle}
.dark-mode .site-ver,.site-ver{color:#fff;background:var(--A)}

/* ══ HERO DATE BOXES — بزرگتر ══ */
.hero-d-num{font-size:48px !important;font-weight:900 !important;line-height:1 !important;margin:6px 0 6px !important;text-shadow:0 0 20px rgba(0,255,180,0.3) !important}
.hero-d-mo{font-size:18px !important;font-weight:900 !important;margin-bottom:4px !important}
.hero-d-lbl{font-size:11px !important;font-weight:700 !important;opacity:0.65 !important;margin-bottom:4px !important;display:block !important}
.hero-d-dow{font-size:14px !important;font-weight:800 !important;display:block !important;margin-bottom:6px !important;color:#fff !important;background:rgba(0,200,150,0.25) !important;border:1px solid rgba(0,230,172,0.3) !important;border-radius:6px !important;padding:2px 7px !important}
.hero-d-dow-ar{font-family:'Amiri','Scheherazade New',serif;font-size:13px !important;direction:rtl}
.hero-d-dow-en{font-family:'Inter','SF Pro',sans-serif;font-size:13px !important;letter-spacing:0.02em}
.hero-d-fmt{font-size:11px !important;opacity:1 !important;color:rgba(0,255,180,0.65) !important;background:rgba(0,0,0,0.2) !important;border-radius:5px !important;padding:2px 5px !important}
.hero-d-icon{font-size:22px;margin-bottom:8px}
.hero-d-icon{font-size:20px;margin-bottom:6px}

/* ══ WORLD CLOCK ══ */
.world-clock-card{padding:18px 20px;margin-bottom:14px}
.wc-title{font-size:14px;font-weight:900;color:var(--T);margin-bottom:14px}
.wc-fixed{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.wc-item{background:var(--S3);border-radius:14px;padding:12px 10px;text-align:center;border:1px solid var(--B)}
.wc-flag{font-size:22px;display:block;margin-bottom:6px}
.wc-info{display:flex;flex-direction:column;gap:2px}
.wc-city{font-size:11px;color:var(--HT);font-weight:700}
.wc-time{font-size:18px;font-weight:900;color:var(--A);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.wc-sel{width:100%;padding:10px 14px;border-radius:14px;border:1.5px solid var(--B);background:var(--S3);color:var(--T);font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;margin-bottom:10px}
.wc-sel:focus{outline:none;border-color:var(--A)}
.wc-custom-result{background:var(--AL);border:1.5px solid rgba(0,200,150,0.25);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.wc-custom-name{font-size:13px;font-weight:700;color:var(--A)}
.wc-custom-time{font-size:32px;font-weight:900;color:var(--T);font-variant-numeric:tabular-nums}
.wc-custom-date{font-size:12px;color:var(--HT);font-weight:600}
@media(max-width:360px){.wc-time{font-size:15px}.wc-flag{font-size:18px}}

/* ══ WORLD CLOCK v2 ══ */
.wc-card{padding:18px 18px 14px;margin-bottom:14px}
.wc-hd{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wc-hd-icon{font-size:18px}
.wc-hd-title{font-size:14px;font-weight:900;color:var(--T)}
/* ۴ شهر در یک ردیف */
.wc-fixed{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.wc-item{background:var(--S3);border-radius:14px;padding:10px 6px;text-align:center;border:1px solid var(--B);transition:background 0.15s}
.wc-top{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:6px}
.wc-flag{font-size:18px;line-height:1}
.wc-city{font-size:10px;color:var(--HT);font-weight:700;white-space:nowrap}
.wc-time{font-size:17px;font-weight:900;color:var(--A);font-variant-numeric:tabular-nums;letter-spacing:-0.03em;direction:ltr}
.wc-divider{height:1px;background:var(--B);margin-bottom:12px}
/* dropdown */
.wc-search-row{margin-bottom:0}
.wc-sel{width:100%;padding:10px 14px;border-radius:14px;border:1.5px solid var(--B);background:var(--S3);color:var(--T);font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center}
.wc-sel:focus{outline:none;border-color:var(--A)}
/* نتیجه کشور انتخابی */
.wc-custom-result{display:flex;align-items:center;justify-content:space-between;background:var(--AL);border:1.5px solid rgba(0,200,150,0.2);border-radius:16px;padding:14px 16px;margin-top:10px;gap:12px}
.wc-custom-left{display:flex;align-items:center;gap:10px}
.wc-custom-flag{font-size:28px;line-height:1}
.wc-custom-name{font-size:13px;font-weight:800;color:var(--A)}
.wc-custom-right{text-align:left;direction:ltr}
.wc-custom-time{font-size:28px;font-weight:900;color:var(--T);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.wc-custom-date{font-size:11px;color:var(--HT);font-weight:600;margin-top:2px;direction:rtl;text-align:right}
@media(max-width:360px){
  .wc-time{font-size:14px}
  .wc-flag{font-size:15px}
  .wc-fixed{gap:5px}
  .wc-item{padding:8px 4px}
}

/* ══ ADS ══ */
.ad-wrap{margin:12px 0;overflow:hidden}
.ad-label{font-size:10px;color:var(--HT);text-align:center;margin-bottom:4px;font-weight:600}
.ad-square{display:flex;flex-direction:column;align-items:center;background:var(--S3);border-radius:16px;padding:10px;border:1px solid var(--B)}
.ad-leaderboard{display:none;flex-direction:column;align-items:center;overflow:hidden}
@media(min-width:768px){.ad-leaderboard{display:flex}}
.ad-mobile-bar{display:flex;justify-content:center;padding:6px 0;background:var(--S1);border-top:1px solid var(--B);position:sticky;bottom:0;z-index:90}
@media(min-width:768px){.ad-mobile-bar{display:none}}

/* ══ SEO CONTENT ══ */
.seo-article{margin-top:16px}
.seo-p{font-size:14px;line-height:1.8;color:var(--MT);margin-bottom:12px}
.seo-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:400px){.seo-facts{grid-template-columns:1fr}}
.seo-fact{display:flex;align-items:flex-start;gap:10px;background:var(--S3);border-radius:12px;padding:12px}
.seo-fact-icon{font-size:20px;flex-shrink:0}
.seo-fact strong{display:block;font-size:12px;font-weight:800;color:var(--T);margin-bottom:2px}
.seo-fact span{font-size:11px;color:var(--MT)}
.seo-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--B);font-size:13px}
.seo-links strong{color:var(--MT)}
.seo-links a{color:var(--A);font-weight:700;text-decoration:none;background:var(--AL);padding:4px 10px;border-radius:8px;font-size:12px}
.seo-links a:hover{background:var(--A);color:#fff}

/* ══ TODAY PAGE ══ */
.today-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
@media(max-width:600px){.today-cards{grid-template-columns:1fr}}
.today-card{border-radius:20px;padding:20px 16px;text-align:center;border:1px solid var(--B)}
.today-card-shamsi{background:linear-gradient(145deg,#004d30,#00694A);color:#fff}
.today-card-hijri{background:linear-gradient(145deg,#1a1a3e,#2d2d6b);color:#fff}
.today-card-miladi{background:linear-gradient(145deg,#1a3a5c,#0d2e4a);color:#fff}
.today-card-hd{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;opacity:0.8}
.today-icon{font-size:18px}
.today-type{font-size:11px;font-weight:700}
.today-dow{font-size:13px;font-weight:800;opacity:0.8;margin-bottom:6px}
.today-num{font-size:52px;font-weight:900;line-height:1;margin-bottom:4px}
.today-month{font-size:18px;font-weight:800;margin-bottom:4px}
.today-year{font-size:12px;opacity:0.6;margin-bottom:8px}
.today-full{font-size:11px;opacity:0.5;background:rgba(255,255,255,0.1);border-radius:8px;padding:3px 8px;display:inline-block}
.today-clock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.today-tz-label{display:block;font-size:11px;color:var(--HT);font-weight:600;margin-bottom:4px}
.today-tz-val{font-size:16px;font-weight:900;color:var(--A)}
.today-live-clock{font-size:22px !important;font-variant-numeric:tabular-nums}
.today-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.today-info-item{background:var(--S3);border-radius:12px;padding:12px;text-align:center;border:1px solid var(--B)}
.today-info-lbl{display:block;font-size:11px;color:var(--HT);font-weight:700;margin-bottom:4px}
.today-info-val{font-size:22px;font-weight:900;color:var(--T)}
.today-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.today-link-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--S3);border-radius:14px;border:1px solid var(--B);text-decoration:none;transition:background 0.15s}
.today-link-btn:hover{background:var(--AL);border-color:rgba(0,200,150,0.3)}
.today-link-btn>span{font-size:24px;flex-shrink:0}
.today-link-btn strong{display:block;font-size:13px;font-weight:800;color:var(--T);margin-bottom:2px}
.today-link-btn span+div span{font-size:11px;color:var(--HT)}
.today-months-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.today-month-item{display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:var(--S3);border-radius:10px;border:1px solid var(--B);text-decoration:none;transition:background 0.15s}
.today-month-item:hover{background:var(--AL)}
.today-month-item.today-month-now{background:var(--AL);border-color:var(--A)}
.today-month-num{font-size:11px;color:var(--HT);font-weight:700}
.today-month-name{font-size:12px;color:var(--T);font-weight:800}

/* ══ ABOUT PAGE ══ */
.about-founder-card{background:linear-gradient(145deg,#003d28,#005038);border:none !important}
.about-founder-hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.about-founder-avatar{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;flex-shrink:0}
.about-founder-name{font-size:20px;font-weight:900;color:#fff;margin-bottom:4px}
.about-founder-title{font-size:12px;color:rgba(255,255,255,0.6);font-weight:600}
.about-founder-bio p{font-size:14px;line-height:1.85;color:rgba(255,255,255,0.75);margin-bottom:12px}
.about-founder-bio p:last-child{margin-bottom:0}
.about-founder-bio strong{color:#fff}
.about-portal-card{background:var(--S2);border:1.5px solid rgba(0,200,120,0.2) !important}
.about-portal-hd{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.about-portal-title{font-size:18px;font-weight:900;color:var(--T);margin-bottom:2px}
.about-portal-url{font-size:12px;color:var(--A);font-weight:700}
.about-portal-btn{display:inline-block;background:var(--A);color:#fff;border-radius:14px;padding:11px 20px;font-size:14px;font-weight:800;text-decoration:none;margin-top:4px;transition:background 0.15s}
.about-portal-btn:hover{background:var(--AM)}
.about-suggest-card{border:1.5px solid rgba(0,200,120,0.15) !important;background:var(--AL)}

/* ══ ABOUT INDEPENDENT CARD ══ */
.about-independent-card{border:1px solid var(--B) !important;background:var(--S1)}
.about-indep-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.about-indep-title{font-size:17px;font-weight:900;color:var(--T);margin:0}

/* ══ FOUNDER PHOTO ══ */
.about-founder-avatar-wrap{flex-shrink:0}
.about-founder-photo{
  width:80px;height:80px;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  border:3px solid rgba(255,255,255,0.3);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  display:block;
}

/* ══ HERO THEMES ══ */
/* تم ۱: گلس (پیشفرض) */
.hero-t1{background:linear-gradient(160deg,#00694A 0%,#004d30 50%,#003828 100%)}
.hero-dates-glass .hero-d{
  background:rgba(0,200,150,0.15) !important;
  border:1px solid rgba(0,230,172,0.35) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  box-shadow:0 4px 24px rgba(0,200,150,0.18),inset 0 1px 0 rgba(0,255,180,0.2) !important;
}

/* تم ۲: مینیمال سفید */
.hero-t2{background:#f8fffe;border-bottom:1px solid #e0f5ef;color:#003d28 !important}
.hero-t2 .hero-clk-lbl,.hero-t2 .hero-digital,.hero-t2 .hero-dow{color:#003d28 !important}
.hero-t2-wrap{padding:24px 20px;overflow:hidden}
.hero-t2-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
.hero-t2-city{font-size:12px;color:#00a87c;font-weight:700;margin-bottom:4px}
.hero-t2-clock{font-size:44px !important;color:#003d28 !important;font-weight:900 !important;line-height:1 !important}
.hero-t2-dow{font-size:14px !important;color:#006644 !important;font-weight:700 !important;margin-top:6px !important}
.hero-t2-right{flex-shrink:0;overflow:hidden;max-width:100px}
.hero-t2-dates{display:flex;flex-direction:column;gap:10px}
.hero-t2-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,168,124,0.08);border-radius:14px;border:1px solid rgba(0,168,124,0.15)}
.hero-t2-lbl{font-size:13px;color:#005c3a;font-weight:700}
.hero-t2-val{text-align:left;display:flex;flex-direction:column;align-items:flex-end}
.hero-t2-val span{font-size:14px;font-weight:800;color:#003d28}
.hero-t2-val small{font-size:11px;color:#00a87c;margin-top:2px}
.dark-mode .hero-t2{background:#0a2218 !important;border-color:#003d28 !important}
.dark-mode .hero-t2-row{background:rgba(0,168,124,0.1) !important;border-color:rgba(0,168,124,0.2) !important}
.dark-mode .hero-t2-clock,.dark-mode .hero-t2-dow,.dark-mode .hero-t2-val span,.dark-mode .hero-t2-lbl{color:#e0fff5 !important}
.dark-mode .hero-t2-city,.dark-mode .hero-t2-val small{color:#00d49a !important}

/* تم ۳: دارک تقسیم‌شده */
.hero-t3{background:linear-gradient(160deg,#002d1e 0%,#001a12 100%);padding:0}
.hero-t3-top{padding:28px 20px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.06)}
.hero-t3-dates{display:grid;grid-template-columns:repeat(3,1fr)}
.hero-t3-d{padding:20px 10px;text-align:center;color:#fff;border-left:1px solid rgba(255,255,255,0.06)}
.hero-t3-d:last-child{border-left:none}
.hero-t3-icon{font-size:20px;margin-bottom:8px}
.hero-t3-lbl{font-size:11px;color:rgba(255,255,255,0.45);font-weight:700;margin-bottom:6px;letter-spacing:0.05em}
.hero-t3-year{font-size:13px;color:rgba(255,255,255,0.5);margin-top:4px;font-weight:700}
.hero-t3-dow{font-size:12px;color:rgba(0,200,150,0.85);font-weight:800;margin-top:4px}
.hero-t3 .hero-d-num{font-size:44px !important;font-weight:900 !important}
.hero-t3 .hero-d-mo{font-size:16px !important;color:rgba(255,255,255,0.85) !important;font-weight:800 !important;margin-top:4px !important}

/* ══ FIREBASE USER UI ══ */
.fb-login-btn{display:flex;align-items:center;gap:8px;background:var(--S3);border:1.5px solid var(--B);border-radius:12px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--T);cursor:pointer;font-family:inherit;transition:all 0.15s}
.fb-login-btn:hover{background:var(--AL);border-color:var(--A);color:var(--A)}
.fb-user-panel{display:flex;align-items:center;gap:8px}
.fb-avatar{width:32px;height:32px;border-radius:50%;background:var(--A);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;overflow:hidden;flex-shrink:0}
.fb-avatar img{width:100%;height:100%;object-fit:cover}
.fb-name{font-size:13px;font-weight:700;color:var(--T);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-logout-btn{background:none;border:none;color:var(--HT);cursor:pointer;font-size:16px;padding:4px;border-radius:8px}
.fb-logout-btn:hover{color:var(--G);background:var(--S3)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--S1);border-radius:24px;padding:28px 24px;max-width:360px;width:100%;position:relative;border:1px solid var(--B);text-align:center}
.modal-close{position:absolute;top:14px;left:14px;background:var(--S3);border:none;border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--MT);font-size:14px}
.modal-icon{font-size:36px;margin-bottom:12px}
.modal-title{font-size:17px;font-weight:900;color:var(--T);margin-bottom:8px}
.modal-desc{font-size:13px;color:var(--MT);margin-bottom:20px;line-height:1.6}
.google-login-btn{display:flex;align-items:center;gap:10px;background:#fff;color:#333;border:1.5px solid #ddd;border-radius:14px;padding:12px 20px;font-size:14px;font-weight:700;cursor:pointer;width:100%;justify-content:center;font-family:inherit;transition:box-shadow 0.15s}
.google-login-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,0.15)}

/* یادداشت */
.note-textarea{width:100%;border:1.5px solid var(--B);border-radius:14px;padding:12px;font-size:14px;font-family:inherit;background:var(--S3);color:var(--T);resize:vertical;margin-bottom:14px;min-height:100px;box-sizing:border-box}
.note-textarea:focus{outline:none;border-color:var(--A)}
.note-modal-btns{display:flex;gap:10px}
.note-save-btn{flex:1;background:var(--A);color:#fff;border:none;border-radius:12px;padding:11px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.note-cancel-btn{flex:1;background:var(--S3);color:var(--MT);border:1.5px solid var(--B);border-radius:12px;padding:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}

/* نقطه یادداشت روی تقویم */
.note-dot{width:5px;height:5px;border-radius:50%;background:#FFD166;position:absolute;bottom:2px;right:50%;transform:translateX(50%);display:block}

/* ══ NOTE IN CALENDAR ══ */
.ev-note-btn{width:100%;margin-top:10px;padding:10px;background:var(--AL);border:1.5px solid rgba(0,200,150,0.3);border-radius:12px;color:var(--A);font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:background 0.15s}
.ev-note-btn:hover{background:var(--A);color:#fff}
.ev-note-preview{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:var(--S3);border-radius:12px;margin-top:8px;font-size:13px;color:var(--MT);border:1px solid var(--B)}
.ev-note-icon{flex-shrink:0;font-size:16px}



/* ══ HEADER 2-ROW ══ */
.hdr{display:flex;flex-direction:column;padding:10px 16px;gap:8px}
.hdr-row1{display:flex;align-items:center;justify-content:space-between}
.hdr-row2{display:flex;align-items:center;gap:8px}
.hdr-desktop-only{display:none}
@media(min-width:768px){
  .hdr{flex-direction:row;align-items:center;padding:12px 20px}
  .hdr-row1{flex:1}
  .hdr-row2{flex-shrink:0}
  .hdr-desktop-only{display:flex;gap:4px}
}
.hdr-login-btn{display:flex;align-items:center;gap:6px;background:var(--S3);border:1.5px solid var(--B);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--T);text-decoration:none;white-space:nowrap}
.hdr-login-btn:hover{background:var(--AL);border-color:var(--A);color:var(--A)}
.hdr-user{display:flex;align-items:center;gap:6px}
.hdr-uname{font-size:13px;font-weight:700;color:var(--T);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ SETTINGS PAGE ══ */
.settings-success{background:#d4edda;color:#155724;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:700}
.settings-profile-card{background:linear-gradient(135deg,#003d28,#005038);border:none !important}
.settings-profile{display:flex;align-items:center;gap:14px}
.settings-avatar{width:56px;height:56px;font-size:22px;flex-shrink:0}
.settings-name{font-size:17px;font-weight:900;color:#fff;margin-bottom:3px}
.settings-email{font-size:12px;color:rgba(255,255,255,0.6)}
.settings-form{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--B)}
.settings-row:last-of-type{border-bottom:none}
.settings-label{display:flex;align-items:center;gap:12px}
.settings-icon{font-size:22px}
.settings-label strong{display:block;font-size:14px;font-weight:800;color:var(--T)}
.settings-label span{font-size:12px;color:var(--HT)}
.settings-select{background:var(--S3);border:1.5px solid var(--B);border-radius:10px;padding:8px 12px;font-size:13px;font-family:inherit;color:var(--T);cursor:pointer}
.settings-toggle-wrap{display:flex;align-items:center;gap:8px}
.settings-toggle{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}
.settings-toggle input{opacity:0;width:0;height:0}
.settings-toggle-slider{position:absolute;inset:0;background:var(--B);border-radius:99px;transition:0.2s;cursor:pointer}
.settings-toggle-slider:before{content:'';position:absolute;width:20px;height:20px;right:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.2s}
.settings-toggle input:checked + .settings-toggle-slider{background:var(--A)}
.settings-toggle input:checked + .settings-toggle-slider:before{transform:translateX(-22px)}
.settings-toggle-lbl{font-size:13px;font-weight:700;color:var(--MT);min-width:60px}
.settings-save-btn{margin:16px;background:var(--A);color:#fff;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.settings-save-btn:hover{background:var(--AM)}
.settings-logout-card{background:var(--S2) !important}
.settings-logout-btn{display:block;text-align:center;color:#e74c3c;font-weight:800;font-size:14px;text-decoration:none;padding:4px}
.hdr-settings-btn{font-size:16px;text-decoration:none;padding:4px;border-radius:8px}
.hdr-settings-btn:hover{background:var(--S3)}