/* Quboolia — Deen Hub */
.deenpage{max-width:min(1100px,94vw);margin:0 auto;padding:.5rem 0 4rem}
.deeneye{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-700,#9c7a1f)}
.deeneye .ic{width:14px;height:14px}
.prerr{padding:1.2rem;color:#9c4a4a;background:rgba(156,74,74,.07);border:1px solid rgba(156,74,74,.2);border-radius:12px}
.prload{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2.5rem;color:var(--ink-soft);grid-column:1/-1}
.prload .ic{color:var(--gold-500);animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* tabs */
.deentabs{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1.4rem;scrollbar-width:none}
.deentabs::-webkit-scrollbar{display:none}
.deentab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-weight:700;font-size:.92rem;
  color:var(--ink-soft);background:#fff;border:1.5px solid var(--line);padding:.65rem 1.1rem;border-radius:999px;cursor:pointer;transition:.18s}
.deentab .ic{width:17px;height:17px}
.deentab:hover{border-color:var(--emerald-600)}
.deentab.on{background:var(--emerald-700);color:#fff;border-color:var(--emerald-700)}
.deenpane{display:none}
.deenpane.on{display:block;animation:rise .3s ease}

/* prayer card */
.prcard{background:radial-gradient(130% 130% at 0 0,var(--emerald-800),var(--emerald-900));color:var(--cream);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.prhead{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.2rem}
.prhead h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);margin:.2rem 0}
.prhijri{color:var(--gold-400);font-size:.86rem;font-weight:600}
.prloc{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
/* the prayer card is dark green — make its buttons readable (light text / gold outline) */
.prcard .btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.prcard .btn--outline:hover,.prcard .btn--outline:focus-visible{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.prcard .btn--outline .ic{color:var(--gold-400,#d8b45a)}
.prcard .btn--gold:not(:hover):not(:focus-visible){color:var(--gold-400,#d8b45a);border-color:var(--gold-400,#d8b45a)}
.prcard .btn--gold:hover,.prcard .btn--gold:focus-visible{color:#1a1206}
.prcityform{display:flex;gap:.4rem}
.prcityform input{padding:.5rem .7rem;border:1px solid rgba(231,200,105,.3);border-radius:10px;background:rgba(255,255,255,.95);font-family:var(--sans);font-size:.85rem;width:9rem}
.prnext{background:rgba(231,200,105,.14);border:1px solid rgba(231,200,105,.3);border-radius:12px;padding:.7rem 1rem;font-size:.95rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.prnext .ic{color:var(--gold-400)}
.prcount{font-family:var(--serif);font-weight:700;color:var(--gold-400);font-size:1.15rem;margin-left:.2rem}
.prgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.prtile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem .6rem;text-align:center;transition:.25s}
.prtile__ic{display:grid;place-items:center;color:var(--gold-400);margin-bottom:.3rem}
.prtile__ic .ic{width:18px;height:18px}
.prtile b{display:block;font-size:.82rem;font-weight:700;margin-bottom:.2rem}
.prtile__t{font-size:.8rem;color:rgba(250,246,239,.8)}
.prtile.on{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#1a1206;border-color:transparent;transform:translateY(-4px);box-shadow:0 12px 26px rgba(184,134,47,.4)}
.prtile.on .prtile__ic .ic,.prtile.on .prtile__t{color:#1a1206}
.prazaan{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}
.prazaan__note{font-size:.78rem;color:rgba(250,246,239,.6)}
@media(max-width:680px){.prgrid{grid-template-columns:repeat(3,1fr)}.prloc{align-items:stretch}}

/* quran */
.qbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;margin-bottom:1.2rem;position:sticky;top:64px;z-index:20;box-shadow:var(--shadow-sm)}
.qbar label{font-size:.82rem;font-weight:700;color:var(--emerald-800);display:flex;align-items:center;gap:.5rem}
.qbar select{padding:.5rem .7rem;border:1px solid var(--line);border-radius:9px;font-family:var(--sans);font-size:.88rem;max-width:18rem}
.qlangs{display:flex;gap:.9rem;margin-left:auto}
.qchk{font-weight:600!important;color:var(--ink-soft)!important;cursor:pointer}
.qsurahhead{text-align:center;padding:1.4rem;background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(0,63,53,.05));border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1rem}
.qsurahhead h2{font-family:var(--serif);font-size:1.6rem;color:var(--emerald-800)}
.qarname{font-family:var(--arabic);color:var(--gold-600)}
.qsurahhead p{color:var(--ink-soft);font-size:.86rem;margin-top:.2rem}
.qbasmala{font-family:var(--arabic);font-size:1.6rem;color:var(--emerald-700);margin-top:.7rem}
.ayah{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:.7rem;box-shadow:var(--shadow-sm)}
.ayah__num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(0,63,53,.07);color:var(--emerald-700);display:grid;place-items:center;font-weight:800;font-size:.82rem}
.ayah__body{flex:1;min-width:0}
.ayah__ar{font-family:var(--arabic);font-size:1.9rem;line-height:2.4;color:var(--emerald-900);text-align:right;margin-bottom:.5rem}
.ayah__tr{color:var(--ink);line-height:1.65;margin-bottom:.35rem}
.ayah__ur{font-family:var(--arabic);font-size:1.15rem;line-height:2;color:var(--ink-soft);text-align:right}
.ayah__play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold-500);background:#fff;color:var(--gold-700,#9c7a1f);cursor:pointer;display:grid;place-items:center;transition:.18s}
.ayah__play:hover,.ayah__play.on{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#1a1206;border-color:transparent}
.ayah__play.on{animation:pulse 1.5s infinite}

/* mosques */
.mqbar{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.mqsplit{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;align-items:stretch}
.mqmap{height:520px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);z-index:1}
.mqlist{height:520px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-sm)}
.mqhint{display:flex;align-items:flex-start;gap:.5rem;color:var(--ink-soft);font-size:.9rem;padding:1rem;line-height:1.6}
.mqhint .ic,.mqnote .ic{color:var(--gold-600);flex:0 0 auto}
.mqlist__h{font-family:var(--serif);font-size:1.2rem;color:var(--emerald-800);margin-bottom:.8rem}
.mqitem{display:flex;gap:.7rem;padding:.8rem;border-radius:12px;cursor:pointer;transition:.15s;border:1px solid transparent}
.mqitem:hover{background:rgba(0,63,53,.04);border-color:var(--line)}
.mqitem__ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:rgba(0,63,53,.07);color:var(--emerald-700);display:grid;place-items:center}
.mqitem__b{min-width:0}
.mqitem__b b{font-size:.95rem;color:var(--emerald-800)}
.mqitem__meta{display:block;font-size:.78rem;color:var(--ink-soft);margin:.15rem 0 .4rem}
.mqitem__acts{display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.mqitem__acts a{display:inline-flex;align-items:center;gap:.25rem;font-size:.76rem;font-weight:700;color:var(--gold-700,#9c7a1f);text-decoration:none}
.mqitem__acts a:hover{color:var(--emerald-700)}
.mqitem__acts .ic{width:13px;height:13px}
.mqnote{display:flex;gap:.5rem;font-size:.76rem;color:var(--ink-soft);margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);line-height:1.5}
@media(max-width:760px){.mqsplit{grid-template-columns:1fr}.mqmap{height:340px}.mqlist{height:auto;max-height:460px}}

/* Q&A */
.askhead{max-width:42rem;margin:0 auto 1.4rem;text-align:center}
.askhead h2{font-family:var(--serif);font-size:1.7rem;color:var(--emerald-800);display:inline-flex;align-items:center;gap:.5rem}
.askhead h2 .ic{color:var(--gold-600)}
.askhead>p{color:var(--ink-soft);margin:.4rem 0 1.2rem;line-height:1.6}
.asksearch{position:relative;max-width:34rem;margin:0 auto}
.asksearch input{width:100%;padding:.85rem 1rem .85rem 2.6rem;border:1.5px solid var(--line);border-radius:999px;font-family:var(--sans);font-size:.95rem;background:#fff}
.asksearch input:focus{outline:none;border-color:var(--gold-500)}
.asksearch .ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-soft)}
.askcats{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1rem}
.askcat{font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--emerald-800);background:rgba(0,63,53,.05);border:1px solid var(--line);padding:.4rem .8rem;border-radius:999px;cursor:pointer;transition:.15s}
.askcat.on{background:var(--emerald-700);color:#fff;border-color:var(--emerald-700)}
.askresults{max-width:46rem;margin:0 auto;display:grid;gap:.6rem}
.qaitem{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow-sm)}
.qaitem__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;cursor:pointer;padding:1rem 1.2rem;text-align:left;font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--emerald-800)}
.qaitem__q span{display:inline-flex;align-items:flex-start;gap:.5rem}
.qaitem__q .ic{color:var(--gold-600);flex:0 0 auto;margin-top:2px}
.qaitem__chev{transition:.25s;color:var(--ink-soft)}
.qaitem.open .qaitem__chev{transform:rotate(90deg)}
.qaitem__a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.2rem}
.qaitem.open .qaitem__a{max-height:420px;padding:0 1.2rem 1.2rem}
.qaitem__cat{display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-700,#9c7a1f);background:rgba(212,175,55,.12);padding:.2rem .5rem;border-radius:6px;margin-bottom:.5rem}
.qaitem__a p{color:var(--ink);line-height:1.7}
.askempty{text-align:center;padding:2.5rem;color:var(--ink-soft)}
.askempty .ic{color:var(--gold-500);opacity:.6}
.askcta{max-width:46rem;margin:1.6rem auto 0;text-align:center;background:rgba(0,63,53,.04);border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.askcta p{color:var(--ink-soft);margin-bottom:.8rem;font-size:.92rem}