/**
 * assets/css/layout.css
 * -----------------------------------------------------------------
 * Header/nav/dropdowns/theme-switcher/account-menu/mobile-drawer/
 * back-to-top/lang-preloader — extracted out of header.php's inline
 * <style> block for the same caching reason as base.css. Anything
 * page-specific (list.php's filter bar, song.php's lyrics card,
 * etc.) stays local to that page; this file is only the shell
 * chrome every page shares.
 * -----------------------------------------------------------------
 */

/* ===================== HEADER ===================== */
header {
  position:sticky; top:0; z-index:200;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  height:var(--header-h);
}
.header-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 1rem;
  height:100%; display:flex; align-items:center; gap:.75rem;
}
.logo-wrap { display:flex; align-items:center; gap:.6rem; flex-shrink:0 }
.logo-wrap img { height:38px; width:auto }
.site-name {
  font-family:var(--font-h); font-size:1.2rem; font-weight:700;
  color:var(--violet); letter-spacing:.01em; display:none;
}
@media(min-width:480px){ .site-name{ display:block } }
nav.main-nav { display:none; align-items:center; gap:.1rem; flex:1 }
@media(min-width:768px){ nav.main-nav{ display:flex } }
.nav-link {
  display:flex; align-items:center; gap:.35rem;
  padding:.4rem .65rem; border-radius:6px; font-size:.82rem; font-weight:500;
  color:var(--muted); transition:color .2s,background .2s; white-space:nowrap;
}
.nav-link:hover,
.nav-link.active { color:var(--violet); background:color-mix(in srgb,var(--violet) 10%,transparent) }

.nav-dropdown { position:relative }
.nav-dropdown-btn {
  display:flex; align-items:center; gap:.3rem;
  padding:.4rem .65rem; border-radius:6px; font-size:.82rem; font-weight:500;
  color:var(--muted); background:transparent; border:none;
  transition:color .2s,background .2s; white-space:nowrap; cursor:pointer;
  font-family:inherit;
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn.active { color:var(--violet); background:color-mix(in srgb,var(--violet) 10%,transparent) }
.nav-dropdown-btn .nd-chevron { font-size:.65rem; transition:transform .2s }
.nav-dropdown:hover .nd-chevron,
.nav-dropdown-btn.open .nd-chevron { transform:rotate(180deg) }
.nav-dropdown-menu {
  display:none; position:absolute; top:calc(100% + 6px);
  inset-inline-start:0; min-width:180px;
  width:max-content; max-width:min(320px, calc(100vw - 2rem));
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--shadow); overflow:hidden; z-index:300;
}
.nav-dropdown-menu.open { display:block }
.nd-item {
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .9rem; font-size:.82rem; font-weight:500;
  color:var(--text); transition:background .15s,color .15s;
  white-space:nowrap;
}
.nd-item + .nd-item { border-top:1px solid var(--border) }
.nd-item:hover { background:var(--bg2); color:var(--violet) }
.nd-item i { width:14px; text-align:center; color:var(--gold); opacity:.9 }

/* Bold Urdu text in header links/buttons, including the Library/About
   dropdown triggers. */
header a .ur, header button .ur { font-weight:700 }

.header-right { margin-inline-start:auto; display:flex; align-items:center; gap:.5rem; flex-shrink:0 }

.lang-wrap { position:relative }
.lang-btn {
  display:flex; align-items:center; gap:.3rem;
  padding:.35rem .6rem; border-radius:6px; font-size:.78rem; font-weight:600;
  border:1px solid var(--border); background:var(--bg2); color:var(--text);
  cursor:pointer; transition:border-color .2s; white-space:nowrap;
}
.lang-btn:hover,.lang-btn.open { border-color:var(--violet) }
.lang-dropdown {
  display:none; position:absolute; top:calc(100% + 6px);
  inset-inline-end:0; width:max-content; min-width:100%;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--shadow); overflow:hidden; z-index:300;
}
.lang-dropdown.open { display:block }
.lang-opt {
  display:block; padding:.5rem .9rem; font-size:.82rem; font-weight:600;
  color:var(--text); transition:background .15s; text-align:center; letter-spacing:.04em;
}
.lang-opt + .lang-opt { border-top:1px solid var(--border) }
.lang-opt:hover { background:var(--bg2); color:var(--violet) }
.lang-opt.cur   { color:var(--violet) }

.theme-btn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s;
}
.theme-btn:hover { border-color:var(--violet) }

.donate-btn {
  padding:.4rem .9rem; border-radius:20px; font-size:.8rem; font-weight:600;
  background:var(--gold); color:#fff; border:none;
  box-shadow:0 2px 8px color-mix(in srgb,var(--gold) 35%,transparent);
  transition:background .2s,transform .15s; white-space:nowrap;
}
.donate-btn:hover { background:var(--gold-lt); transform:translateY(-1px) }

/* ── Account: login button / avatar dropdown ─────────────── */
.login-btn {
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600;
  background:var(--violet); color:#fff; border:none;
  box-shadow:0 2px 8px color-mix(in srgb,var(--violet) 35%,transparent);
  transition:background .2s,transform .15s; white-space:nowrap;
}
.login-btn:hover { background:var(--violet-lt); transform:translateY(-1px) }
.login-btn i.fa-google { color:#fff }

.acct-wrap { position:relative }
.acct-btn {
  display:flex; align-items:center; gap:.35rem;
  padding:.2rem; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); cursor:pointer; transition:border-color .2s;
}
.acct-btn:hover, .acct-btn.open { border-color:var(--violet) }
.acct-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--violet); }
.acct-avatar-fallback {
  width:30px; height:30px; border-radius:50%; background:var(--violet); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
.acct-chevron { font-size:.62rem; color:var(--muted); margin-inline-end:.35rem; transition:transform .2s }
.acct-btn.open .acct-chevron { transform:rotate(180deg) }
.acct-tier-chip {
  font-size:.62rem; font-weight:700; padding:.1rem .4rem; border-radius:8px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.acct-tier-chip.guest   { background:var(--bg2); color:var(--muted) }
.acct-tier-chip.free    { background:color-mix(in srgb,var(--violet) 14%,var(--bg2)); color:var(--violet) }
.acct-tier-chip.premium { background:color-mix(in srgb,var(--gold) 20%,var(--bg2)); color:#8A6D1F }
.acct-dropdown {
  display:none; position:absolute; top:calc(100% + 8px);
  inset-inline-end:0; width:240px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow); overflow:hidden; z-index:300;
}
.acct-dropdown.open { display:block }
.acct-dd-head { padding:.8rem .9rem .7rem; text-align:center }
.acct-dd-welcome { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:.15rem }
.acct-dd-name { font-size:.9rem; font-weight:700; color:var(--violet); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.acct-dd-email { font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.1rem }
.acct-dd-divider { height:1px; background:var(--border); margin:0 }
.acct-tier-banner {
  display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem;
  font-size:.78rem; font-weight:700;
}
.acct-tier-banner i { font-size:.85rem }
.acct-tier-banner.guest   { background:var(--bg2); color:var(--muted) }
.acct-tier-banner.free    { background:color-mix(in srgb,var(--violet) 10%,var(--bg2)); color:var(--violet) }
.acct-tier-banner.premium { background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 25%,var(--bg2)),color-mix(in srgb,var(--gold) 12%,var(--bg2))); color:#8A6D1F }
.acct-dd-item {
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; font-size:.82rem; font-weight:500;
  color:var(--text); transition:background .15s,color .15s;
}
.acct-dd-item:hover { background:var(--bg2); color:var(--violet) }
.acct-dd-item i { width:14px; text-align:center; color:var(--gold) }
.acct-dd-item.logout { color:#B23A48 }
.acct-dd-item.logout i { color:#B23A48 }
.acct-dd-item.upgrade { color:#8A6D1F; font-weight:700 }
.acct-dd-item.upgrade i { color:var(--gold) }

/* ── Mobile header: logo, subtitle, lang toggle, avatar, hamburger only ── */
@media(max-width:767px){
  .theme-btn { display:none }
}

.ham-btn {
  width:36px; height:36px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg2); color:var(--text); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
@media(min-width:768px){ .ham-btn{ display:none } }

/* ===================== DRAWER (mobile nav) ===================== */
/* Overlay + slide-in panel mechanics matched to the reference app:
   a single class flips the overlay's display (no fade transition to
   depend on, so it can never get stuck half-visible and block clicks),
   and the panel itself just slides via `transform` with a quick,
   consistent easing curve. Both sit above the sticky header (z-index)
   so the open drawer always fully covers it, never peeks out from
   underneath it. */
.drawer-backdrop {
  display:none; position:fixed; inset:0; z-index:210;
  background:rgba(20,12,35,.5);
}
.drawer-backdrop.open { display:block }
/* Always right-anchored regardless of language direction — ur (rtl)
   as well as ro/en (ltr) all slide the panel in from/to the physical
   right edge of the screen, so the drawer never flips sides when
   switching languages. Deliberately uses a physical `right` offset
   and a single translateX direction instead of the logical
   inset-inline-end (which would flip to the left under dir="rtl"). */
.drawer {
  position:fixed; top:0; bottom:0; right:0; z-index:211;
  width:min(var(--drawer-w),85vw);
  background:var(--card-bg); box-shadow:-4px 0 24px rgba(0,0,0,.18);
  transform:translateX(105%); transition:transform 180ms cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0) }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border) }
.drawer-logo { display:flex; align-items:center; gap:.5rem }
.drawer-logo img { height:32px }
.drawer-logo-name { font-family:var(--font-h); font-weight:700; color:var(--violet); font-size:.95rem }
.drawer-close { width:34px; height:34px; border:1px solid var(--border); border-radius:6px; background:var(--bg2); display:flex; align-items:center; justify-content:center }
.drawer-body { flex:1; overflow-y:auto; padding:.75rem 0 }
.drawer-nav-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:.5rem 1rem }
.drawer-nav-link {
  display:flex; align-items:center; gap:.65rem; padding:.7rem 1rem; font-size:.9rem; font-weight:500; color:var(--text);
  transition:background .15s,color .15s;
}
.drawer-nav-link:hover, .drawer-nav-link.active { background:var(--bg2); color:var(--violet) }
/* Library / About accordions inside the drawer: opening/closing is
   driven by JS toggling the .open class (see header.php's inline
   script) for both hover and click/tap, so there's a single source of
   truth and a short grace period when the pointer leaves — a raw CSS
   :hover rule would vanish the instant the pointer left the button,
   making items unclickable, and on touch devices could get "stuck" so
   a tap wouldn't reliably reopen a collapsed section. The chevron
   rotates in sync with the same .open state, and reverses when it's
   tapped closed again. */
.drawer-dropdown-panel { display:none; padding-inline-start:1.5rem }
.drawer-dropdown-panel.open { display:block }
.drawer-chevron { transition:transform .2s ease }
.drawer-nav-link[aria-expanded="true"] .drawer-chevron { transform:rotate(180deg) }
.dnl-icon { width:20px; text-align:center; color:var(--gold) }
/* Bold Urdu text in drawer links/buttons, including the Library/About
   dropdown triggers. */
.drawer a .ur, .drawer button .ur { font-weight:700 }
.drawer-foot { border-top:1px solid var(--border); padding:1rem; display:flex; flex-direction:column; gap:.75rem }
.drawer-lang-row { display:flex; align-items:center; justify-content:center; gap:.6rem }
.drawer-lang-pills { display:flex; justify-content:center; gap:.35rem }
.dlang-pill { padding:.3rem .6rem; border-radius:14px; border:1px solid var(--border); font-size:.72rem; font-weight:700 }
.dlang-pill.cur { background:var(--violet); color:#fff; border-color:var(--violet) }
.drawer-donate { display:block; text-align:center; padding:.6rem; border-radius:20px; background:var(--gold); color:#fff; font-size:.85rem; font-weight:700 }
/* Light/dark toggle sitting inline with the donate button. */
.drawer-donate-row { display:flex; align-items:center; gap:.6rem }
.drawer-donate-row .drawer-donate { flex:1 }
.drawer-theme-btn {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:1rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s;
}
.drawer-theme-btn:hover { border-color:var(--violet) }
.drawer-account { display:flex; align-items:center; gap:.6rem; padding:.5rem 1rem 0 }
.drawer-account-info { flex:1; min-width:0 }
.drawer-account-name { font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ===================== BACK TO TOP ===================== */
#backToTop {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--violet); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 14px rgba(110,63,163,.5);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s, box-shadow .2s;
}
#backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto }
#backToTop:hover { background: var(--violet-lt); box-shadow: 0 5px 20px rgba(110,63,163,.65); transform: translateY(-2px) }

/* ── Preloader (page loads + language switches) ───────────────── */
/* Always LTR, in every language layout (ur/ro/en) — this is a brand
   moment (logo + loading bar), not translated content, and the bar
   fill animation below is meant to always visually run left-to-right,
   the same way, every time, regardless of which language you're
   switching into or out of. direction is set explicitly (not just
   left to default inheritance) so it can't be flipped by the
   html[dir="rtl"] the Urdu layout sets on <html>.

   Visible BY DEFAULT (opacity:1) rather than hidden-by-default: this
   overlay now doubles as the first-load page mask, so it has to be
   the very first thing painted, before any JS runs — it's the JS
   (see header.php) that adds .lp-hidden once the page has actually
   settled, or shows it again for a language switch. */
#langPreloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  opacity: 1; transition: opacity .25s ease;
  direction: ltr;
}
#langPreloader.lp-hidden { opacity: 0; pointer-events: none }
#langPreloader img { height: 48px; width: auto; opacity: .92 }
.lp-bar { width: 120px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; direction: ltr; }
.lp-bar-fill { height: 100%; background: var(--violet); width: 0%; border-radius: 2px; animation: lpSlide .55s cubic-bezier(.4,0,.2,1) forwards }
@keyframes lpSlide { from { width: 0% } to { width: 100% } }

/* ===================== FOOTER ===================== */
footer { background:var(--ink2); color:rgba(255,255,255,.7); padding:2.5rem 1rem 1.5rem; margin-top:2rem }
.footer-inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr; gap:2rem }
@media(min-width:600px){ .footer-inner{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px){ .footer-inner{ grid-template-columns:2fr 1fr 1fr 1fr } }
.footer-brand img { height:40px; margin-bottom:.75rem }
.footer-brand p   { font-size:.82rem; line-height:1.7; color:rgba(255,255,255,.55) }
.footer-brand p.footer-flagship { margin-top:.4rem; font-size:.76rem; color:rgba(255,255,255,.4) }
.footer-socials { display:flex; gap:.6rem; margin-top:1.1rem }
.footer-socials a {
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7);
  transition:border-color .2s,color .2s,background .2s;
}
.footer-socials a:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,166,92,.08) }
.footer-col h4    { font-size:.85rem; font-weight:700; color:var(--gold); margin-bottom:.75rem; text-transform:uppercase; letter-spacing:.08em }
.footer-col ul    { list-style:none; display:flex; flex-direction:column; gap:.4rem }
.footer-col ul li a { font-size:.8rem; color:rgba(255,255,255,.55); transition:color .2s }
.footer-col ul li a:hover { color:var(--gold) }
.footer-col ul li a i { margin-inline-end:.35rem }
.footer-bottom {
  max-width:var(--max-w); margin:1.5rem auto 0; border-top:1px solid rgba(255,255,255,.1); padding-top:1rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; font-size:.72rem; color:rgba(255,255,255,.35);
}
.footer-bottom a { color:rgba(255,255,255,.45); transition:color .2s }
.footer-bottom a:hover { color:var(--gold) }
.footer-version { color:rgba(255,255,255,.35); letter-spacing:.02em }