/* QK Radio website theme matched to the iOS/Android app (Option A "App Twin", chosen 2026-11-04).
   Loaded AFTER style.css; overrides the old navy/blue look for the homepage and for every page
   injected into #page-content (prayers.php, shows.php, notices.php). Colours come from the app:
   PlayerView.swift / StaffView.swift (deepGreen #04261D, tintGreen #1e6f4f, cards #13251d / #23392f,
   brandGold #FFD700, heading gold #e3c070, metallicGold gradient). */
:root{
  --qk-deep:#04261D; --qk-tint:#1e6f4f; --qk-card:#13251d; --qk-line:#23392f; --qk-hdr:#0c1a14;
  --qk-gold:#FFD700; --qk-gold-soft:#e3c070; --qk-gold-mid:#d4af52; --qk-ink:#f3f1e8; --qk-mut:#a9b8b0; --qk-live:#3bd782;
  --qk-metal:linear-gradient(180deg,#8c661a 0%,#fdf7ba 26%,#d9a629 50%,#fffac7 66%,#b37f1c 100%);
  --qk-rim:linear-gradient(180deg,#fffacc 0%,#d9a629 18%,#fdf7ba 40%,#d9a629 62%,#fffac7 82%,#cc9421 100%);
  /* old variables re-pointed so any leftover inline var() use turns green/gold */
  --glass-bg:rgba(19,37,29,.92); --glass-border:#23392f; --accent-gold:#FFD700; --accent-blue:#e3c070; --accent-green:#3bd782; --text-color:#f3f1e8;
}
html{background:#03140f !important}
body{background:transparent !important;color:var(--qk-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif !important;overflow-x:hidden}
/* App "GreenWash" + faint geometric pattern as fixed layers (no background-attachment; iOS-safe) */
.bg-image{background:radial-gradient(ellipse at 50% 18%,rgba(30,111,79,.62) 0%,rgba(4,38,29,.9) 45%,#020d0a 100%) !important}
.bg-tint{background:url(images/app/pattern2.png) repeat !important;background-size:120px !important;opacity:.07}

/* Cards */
.glass-card{background:var(--qk-card) !important;border:1px solid var(--qk-line) !important;border-radius:20px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;color:var(--qk-ink)}
.glass-card:hover{border-color:rgba(227,192,112,.35) !important}
#page-content h1{font-family:Lalezar,Amiri,serif;font-weight:400;background:var(--qk-metal);-webkit-background-clip:text;background-clip:text;color:transparent !important;
  text-shadow:none !important;letter-spacing:.5px !important}
#page-content h2,#page-content h3{color:var(--qk-gold-soft) !important;text-shadow:none !important}
.divider{background:var(--qk-line) !important}
footer{color:var(--qk-mut);opacity:1 !important}

/* Prayer card + grid (prayers.php) */
.prayer-header{border-bottom-color:var(--qk-line) !important}
.countdown{font-family:-apple-system,system-ui,sans-serif !important;font-weight:800;color:var(--qk-gold) !important;font-variant-numeric:tabular-nums}
.prayer-item{background:rgba(0,0,0,.25) !important;border:1px solid var(--qk-line) !important;border-radius:14px !important}
.prayer-item.active{background:linear-gradient(160deg,rgba(212,175,82,.18),transparent) !important;border:2px solid var(--qk-gold-mid) !important;
  box-shadow:0 0 18px rgba(212,175,82,.25)}
.prayer-item.active .prayer-time{color:var(--qk-gold)}
.prayer-name{color:var(--qk-mut);opacity:1 !important}

/* Annual table */
.glass-input{background:rgba(0,0,0,.3) !important;border:1px solid rgba(227,192,112,.4) !important;color:var(--qk-ink) !important;border-radius:12px !important}
.glass-input:focus,.glass-input:hover{border-color:var(--qk-gold-mid) !important}
.table-wrapper{border:1px solid var(--qk-line) !important;border-radius:14px !important}
th{background:var(--qk-hdr) !important;color:var(--qk-gold-soft) !important}
th,td{border-bottom-color:var(--qk-line) !important}
tr:hover{background:rgba(227,192,112,.06) !important}

/* Shows */
.social-intro{background:var(--qk-card) !important;border:1px solid var(--qk-line) !important;border-radius:20px !important;backdrop-filter:none !important}
.show-card{background:var(--qk-card) !important;border:1px solid var(--qk-line) !important;border-radius:20px !important;backdrop-filter:none !important;overflow:hidden}
.show-card:hover{border-color:rgba(227,192,112,.5) !important}
.show-img{border-bottom:1px solid var(--qk-line) !important}
.show-title{color:var(--qk-gold-soft) !important}
.social-icon,.social-icon-lg{color:var(--qk-gold-soft) !important}

/* Notices (these classes had no styling when injected; now they do) */
.notice-card{background:var(--qk-card);border:1px solid var(--qk-line);border-left:3px solid var(--qk-gold-mid);border-radius:18px;padding:20px 22px;margin-bottom:18px;color:var(--qk-ink)}
.notice-title{margin:0 0 6px;color:var(--qk-gold-soft) !important;font-size:1.3rem}
.notice-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--qk-mut);font-size:.85rem;margin-bottom:12px}
.notice-content{line-height:1.65;white-space:normal}
.media-grid{display:grid;gap:14px;margin-top:14px}
.media-item{background:rgba(0,0,0,.25);border:1px solid var(--qk-line);border-radius:14px;padding:12px}
.btn-download{display:inline-flex;align-items:center;gap:8px;margin-top:10px;text-decoration:none;font-weight:700;font-size:.85rem;color:#1b1406;background:var(--qk-metal);border-radius:10px;padding:8px 14px}

/* ===== Prayer Times page = the app's Prayer tab (PrayerView.swift palette) ===== */
.qkp{--pp-mid:#041812;--pp-panel:#06241b;--pp-acc:#3bd782;--pp-gold:#d4af52;--pp-hi:#ffecb4;max-width:620px !important;padding-top:18px !important;display:flex;flex-direction:column;gap:10px}
.qkp-mut{color:rgba(255,255,255,.7);font-size:13px}
.qkp-head{display:flex;align-items:center;gap:12px;padding:0 4px 4px}
.qkp-moon{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.22))}
.qkp-moon svg{width:100%;height:100%;display:block}
.qkp-date{font-size:22px;font-weight:700;color:#fff;line-height:1.2}
.qkp-hijri{font-size:13px;color:#fff}
/* Now card: translucent green, animated gold trail border (app GoldTrailBorder) */
.qkp-now{position:relative;display:flex;align-items:stretch;gap:10px;padding:14px;border-radius:26px;
  background:linear-gradient(135deg,rgba(25,105,79,.6),rgba(14,73,56,.6));isolation:isolate}
.qkp-now::before{content:"";position:absolute;inset:0;border-radius:26px;padding:3px;z-index:-1;
  background:conic-gradient(from var(--qkp-a,0deg),#8c661a,#fdf7ba,#d9a629,#fffac7,#b37f1c,#d9a629,#8c661a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:qkpTrail 6s linear infinite}
@property --qkp-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes qkpTrail{to{--qkp-a:360deg}}
.qkp-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.qkp-mid{align-items:center;text-align:center}
.qkp-div{width:1px;background:rgba(212,175,82,.35);margin:4px 0}
.qkp-nowpill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--pp-acc);
  background:rgba(0,0,0,.18);border:1px solid rgba(212,175,82,.8);border-radius:999px;padding:4px 12px}
.qkp-nowpill i{width:8px;height:8px;border-radius:50%;background:var(--pp-acc)}
.qkp-nowname{font-size:24px;font-weight:700;color:#fff;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qkp-big{font:800 46px/1.05 ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.qkp-big small{font-size:18px;font-weight:700;margin-left:4px}
.qkp-big.counting{color:var(--pp-hi)}
.qkp-qibla{flex:0 0 auto;align-items:center;gap:6px;width:108px}
.qkp-qibla svg{width:84px;height:84px}
.qkp-loc{font-size:13px;font-weight:600;color:#fff;border:1px solid rgba(212,175,82,.8);border-radius:999px;padding:3px 10px;white-space:nowrap}
.qkp-loc i{font-size:10px}
/* Prayer rows */
.qkp-rows{display:flex;flex-direction:column;gap:4px}
.qkp-row,.qkp-sun{background:var(--pp-mid);border:1px solid rgba(212,175,82,.5);border-radius:16px;padding:11px 16px}
.qkp-main,.qkp-sun{display:flex;align-items:center;gap:12px}
.qkp-check{font-size:22px;color:rgba(255,255,255,.5);width:24px;text-align:center}
.qkp-n{flex:1;min-width:0;display:flex;flex-direction:column}
.qkp-n b{font-size:18px;font-weight:600;color:#fff}
.qkp-n span{font-size:11px;font-weight:500;color:var(--pp-gold);display:flex;gap:6px;align-items:center}
.qkp-n em{display:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--pp-acc)}
.qkp-ic{font-size:21px;width:28px;text-align:center}
.qkp-t{font:800 17px ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;cursor:pointer;min-width:84px;text-align:right}
.qkp-t.rem{color:var(--pp-gold);font-weight:700;font-size:16px}
.qkp-row.passed{opacity:.78}
.qkp-row.passed .qkp-check{color:var(--pp-acc)}
.qkp-row.current{background:var(--pp-panel);border-color:rgba(212,175,82,.9)}
.qkp-row.current .qkp-n em{display:inline}
.qkp-row.next{background:linear-gradient(#0b3a2c,#052019);border:2px solid var(--pp-acc);box-shadow:0 0 22px rgba(59,215,130,.18);padding:9px 16px}
.qkp-row.next .qkp-n b,.qkp-row.next .qkp-t{font-size:21px}
.qkp-nextbar{display:none;align-items:center;gap:10px;padding:2px 0 0 36px}
.qkp-row.next .qkp-nextbar{display:flex}
.qkp-nextbar .qkp-mut{font-size:12.5px;white-space:nowrap}
.qkp-nextbar b{color:var(--pp-acc)}
.qkp-prog{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.qkp-prog span{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--pp-gold),var(--pp-acc))}
.qkp-sun{background:rgba(4,24,18,.55);border-color:rgba(212,175,82,.28);padding:7px 16px}
.qkp-sun > i{font-size:19px;width:26px;text-align:center}
.qkp-sun .qkp-n b{font-size:15px;color:rgba(255,255,255,.92)}
.qkp-sun .qkp-n span{font-size:10px;color:rgba(255,255,255,.45)}
.qkp-sun .qkp-t{font-weight:600;color:rgba(255,255,255,.92);cursor:default}
/* Monthly table (app YearlyTimesView) */
.qkp-year{margin-top:14px;background:rgba(4,24,18,.85);border:1px solid rgba(212,175,82,.45);border-radius:22px;padding:14px 12px}
.qkp-ybar{display:flex;align-items:center;gap:10px}
.qkp-ytitle{flex:1;text-align:center;font-size:20px;font-weight:700;color:var(--pp-hi)}
.qkp-nav{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;color:#1b1406;font-size:15px;
  background:radial-gradient(circle at 35% 30%,#fffac7,#d9a629 55%,#8c661a);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.qkp-nav:disabled{opacity:.35;cursor:default}
.qkp-ysrc{text-align:center;color:rgba(255,255,255,.55);font-size:12px;margin:4px 0 8px;padding-bottom:8px;border-bottom:1px solid rgba(212,175,82,.35)}
.qkp-ytable table{width:100%;border-collapse:collapse}
.qkp-ytable th{background:transparent !important;color:var(--pp-gold) !important;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:6px 2px;position:static}
.qkp-ytable td{color:#fff;font-size:13.5px;text-align:center;padding:6px 2px;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.06) !important}
.qkp-ytable td:first-child{color:rgba(255,255,255,.7);text-align:left;padding-left:6px;white-space:nowrap}
.qkp-ytable td.sr{color:rgba(255,255,255,.55)}
.qkp-ytable tr.today td{background:rgba(59,215,130,.16);color:#fff;font-weight:700}
.qkp-ytable tr.today td:first-child{border-left:3px solid var(--pp-acc)}
.qkp-ytable tr.fri td:first-child{color:var(--pp-hi)}
@media (max-width:520px){
  .qkp-now{gap:8px;padding:12px 10px}
  .qkp-nowname{font-size:20px}.qkp-big{font-size:38px}.qkp-big small{font-size:15px}
  .qkp-qibla{width:84px}.qkp-qibla svg{width:64px;height:64px}.qkp-loc{font-size:11.5px;padding:2px 8px}
  .qkp-nowpill{font-size:12px;padding:3px 9px}
  .qkp-t{min-width:0}
  .qkp-ytable td,.qkp-ytable th{font-size:11.5px}
}
a.qkp-qibla{text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a.qkp-qibla:active svg{transform:scale(.95)}
.qkp-tapapp{font-size:10.5px;margin-top:-2px;color:var(--pp-hi);opacity:.8}
a.qkp-moon{cursor:pointer;-webkit-tap-highlight-color:transparent}
a.qkp-moon:active{transform:scale(.92)}