/* Adhan page (adhan.php) */
.az-page { --az-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23a07a4a' stroke-opacity='.16' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
body.az-has-player .az-page { padding-bottom: 110px; }

/* hero */
.az-hero { position: relative; margin: 6px 0 30px; padding: 38px 26px 30px; border-radius: 28px; text-align: center; border: 1px solid var(--t-border);
    background: radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--t-accent) 24%, transparent), transparent 65%), var(--az-pat), var(--t-card); }
.az-hero-ar { margin: 0; font: 400 clamp(2.2rem, 5vw, 3.2rem)/1.3 'Amiri', serif; color: var(--t-accent); }
.az-h1 { margin: 2px 0 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.8rem, 4.2vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--t-text); }
.az-sub { max-width: 620px; margin: 12px auto 22px; font-size: 15.5px; line-height: 1.6; color: var(--t-text-secondary); }
.az-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.az-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-bg); color: var(--t-text); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform .15s, border-color .15s; }
.az-btn:hover { transform: translateY(-1px); border-color: var(--t-accent); }
.az-btn.is-pri { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-bg); }
.az-btn svg { width: 17px; height: 17px; }
.i-pause { display: none; }
.is-playing > .i-play, .is-playing .i-play { display: none; }
.is-playing > .i-pause, .is-playing .i-pause { display: block; }

.az-sec { margin: 0 0 36px; }
.az-sec h2 { margin: 0 0 14px; font-family: "Space Grotesk", sans-serif; font-size: 1.45rem; color: var(--t-text); }
.az-sec h2 small { font-size: .85rem; font-weight: 600; color: var(--t-text-secondary); }

/* featured: the Two Holy Mosques and Al-Aqsa */
.az-feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.az-fc { width: 100%; height: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; border: 1px solid var(--t-border); background: var(--az-pat), var(--t-card); color: var(--t-text); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, transform .15s; }
.az-fc:hover, .az-fc.is-cur { border-color: var(--t-accent); transform: translateY(-1px); }
.az-fc-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--t-accent) 16%, transparent); color: var(--t-accent); }
.az-fc.is-madinah .az-fc-ic { background: rgba(22, 163, 74, .14); color: #15803d; }
.az-fc.is-aqsa .az-fc-ic { background: rgba(14, 165, 233, .14); color: #0369a1; }
.az-fc-ic svg { width: 23px; height: 23px; }
.az-fc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.az-fc-t b { font-size: 14.5px; font-weight: 700; }
.az-fc-t small { font-size: 12.5px; color: var(--t-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-fc-p { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--t-accent); color: var(--t-bg); }
.az-fc-p svg { width: 16px; height: 16px; }

/* filters */
.az-tools { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.az-search { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--t-border); background: var(--t-card); }
.az-search:focus-within { border-color: var(--t-accent); }
.az-search svg { flex: none; width: 18px; height: 18px; color: var(--t-text-secondary); }
.az-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; color: var(--t-text); font: inherit; font-size: 15px; outline: none; }
.az-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.az-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-card); color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.az-chip span { font-weight: 500; opacity: .6; }
.az-chip img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.az-chip[aria-pressed="true"] { background: var(--t-text); border-color: var(--t-text); color: var(--t-bg); }

/* list */
.az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.az-row { display: grid; grid-template-columns: 34px 42px minmax(0, 1fr) auto 36px 40px 36px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 15px; border: 1px solid transparent; background: var(--t-card); }
.az-row[hidden] { display: none; }
.az-row:hover { border-color: var(--t-border); }
.az-row.is-cur { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 9%, var(--t-card)); }
.az-n { font-size: 12px; font-weight: 600; color: var(--t-text-secondary); text-align: center; font-variant-numeric: tabular-nums; }
.az-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: hsl(var(--h, 30) 45% 46%); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.az-av.is-flag { background: var(--t-bg); }
.az-av.is-flag img { width: 28px; height: 21px; border-radius: 3px; object-fit: cover; }
.az-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.az-t b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-t i { align-self: flex-start; font-style: normal; font: 400 14px/1.3 'Amiri', serif; color: var(--t-text-secondary); }
.az-t small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--t-text-secondary); }
.az-t small img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.az-fajr { padding: 1px 8px; border-radius: 999px; background: rgba(14, 165, 233, .13); color: #0369a1; font-style: normal; font-weight: 700; font-size: 11px; }
.az-d { font-size: 12.5px; color: var(--t-text-secondary); font-variant-numeric: tabular-nums; }
.az-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--t-accent); color: var(--t-bg); cursor: pointer; transition: transform .15s; }
.az-play:hover { transform: scale(1.06); }
.az-play svg, .az-fc-p svg { width: 16px; height: 16px; }
.az-dl { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--t-text-secondary); }
.az-dl:hover { background: var(--t-bg); color: var(--t-accent); }
.az-dl svg { width: 18px; height: 18px; }
.az-none { color: var(--t-text-secondary); }

/* words of the adhan, dua */
.az-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--t-border); }
.az-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.az-table th, .az-table td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--t-border); color: var(--t-text); }
.az-table tr:last-child td { border-bottom: 0; }
.az-table thead th { background: var(--t-card); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-text-secondary); }
.az-table .az-ar { font: 400 22px/1.7 'Amiri', serif; text-align: right; white-space: nowrap; }
.az-table .az-x { font-weight: 700; color: var(--t-accent); text-align: center; width: 44px; }
.az-table tr.is-fajr { background: rgba(14, 165, 233, .07); }
.az-table em { font-style: normal; font-size: 12.5px; color: #0369a1; }
.az-dua { padding: 22px 24px; border-radius: 22px; border: 1px solid var(--t-border); background: var(--az-pat), var(--t-card); }
.az-dua-ar { margin: 0 0 12px; font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.9 'Amiri', serif; color: var(--t-text); text-align: right; }
.az-dua-tr { margin: 0 0 8px; font-style: italic; color: var(--t-text-secondary); line-height: 1.6; }
.az-dua-m { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: var(--t-text); }
.az-dua-src { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--t-accent); }
.az-faq details { border-bottom: 1px solid var(--t-border); }
.az-src { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: var(--t-text-secondary); }
.az-src a { color: var(--t-accent); }

/* player bar */
.az-player { position: fixed; left: 50%; bottom: 16px; z-index: 150; width: min(760px, calc(100vw - 24px)); transform: translateX(-50%); border-radius: 22px; border: 1px solid var(--t-border); background: color-mix(in srgb, var(--t-card) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .45); animation: az-up .25s ease-out; }
.az-player[hidden] { display: none; }
@keyframes az-up { from { opacity: 0; transform: translate(-50%, 16px); } }
.az-pl-in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.az-pl-b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--t-text); cursor: pointer; }
.az-pl-b:hover { background: var(--t-bg); }
.az-pl-b svg { width: 18px; height: 18px; }
.az-pl-b.is-main { width: 46px; height: 46px; background: var(--t-accent); color: var(--t-bg); }
.az-pl-b.is-main:hover { background: var(--t-accent); filter: brightness(1.08); }
.az-pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.az-pl-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-pl-info small { font-size: 12px; color: var(--t-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-pl-bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--t-text-secondary); font-variant-numeric: tabular-nums; }
.az-pl-bar input { flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none; border-radius: 4px; background: linear-gradient(to right, var(--t-accent) var(--p, 0%), var(--t-border) var(--p, 0%)); cursor: pointer; }
[dir="rtl"] .az-pl-bar input { background: linear-gradient(to left, var(--t-accent) var(--p, 0%), var(--t-border) var(--p, 0%)); }
.az-pl-bar input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--t-accent); }
.az-pl-bar input::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--t-accent); }

@media (max-width: 640px) {
    .az-row { grid-template-columns: 38px minmax(0, 1fr) 34px 40px 32px; gap: 8px; padding: 8px 10px; }
    .az-n, .az-d { display: none; }
    .az-av { width: 38px; height: 38px; font-size: 13px; }
    .az-t i { display: none; }
    .az-pl-in { gap: 4px; padding: 8px; }
    #az-prev, #az-pl-dl { display: none; }
    .az-player { bottom: 10px; }
}

/* row icons as CSS masks (one definition instead of an inline SVG in each of the 230 rows) */
.az-ico, .az-ico-dl { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.az-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E"); }
.is-playing > .az-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1.2'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1.2'/%3E%3C/svg%3E"); }
.az-ico-dl { width: 18px; height: 18px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E"); }

/* favourites (round 143): a heart in every row, in the player bar and a chip "Favourites" */
.az-fav { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--t-text-secondary); cursor: pointer; transition: color .15s, transform .15s, background .15s; }
.az-fav:hover { background: var(--t-bg); color: #e0457b; }
.az-fav:active { transform: scale(.88); }
.az-fav.is-on { color: #e0457b; }
.az-fav.is-on svg { fill: currentColor; }
.az-ico-fav { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 7.9 3.6 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.4 0 5.6 3.4 4.3 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }
.az-fav.is-on .az-ico-fav { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 7.9 3.6 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.4 0 5.6 3.4 4.3 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); animation: azPop .3s ease; }
@keyframes azPop { 50% { transform: scale(1.3); } }
.az-chip-fav svg { width: 14px; height: 14px; color: #e0457b; fill: #e0457b; }
.az-chip-fav[aria-pressed="true"] svg { color: #ff8fb4; fill: #ff8fb4; }
.az-pl-b.az-fav.is-on { color: #e0457b; }
.az-chip[hidden] { display: none; }