/* Publika sajtens egna stilar (ovanpå Inspinia/Bootstrap 5). */

/* El Messiri — self-hostad (public/fonts/el-messiri), inte Google Fonts-CDN:
   snabbare (ingen extra DNS/TLS till Google) + GDPR-säkert (ingen IP läcker till
   Google). Variabel font: EN fil per subset täcker hela vikt-axeln 400–700.
   Bara de subset vi behöver: arabic (innehållet) + latin (siffror/latinsk text). */
@font-face {
    font-family: "El Messiri";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/el-messiri/el-messiri-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: "El Messiri";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/el-messiri/el-messiri-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sajtens typsnitt. Temat har en literal `body { font-family: "Open Sans" }` som
   laddas EFTER public.css (lesson #18), så en vanlig `body`-regel här förlorar.
   `html body` (specificitet 0,0,2) slår temats `body` (0,0,1) oavsett ordning.
   Variabeln sätts också så komponenter som läser var(--bs-body-font-family) (knappar,
   fält) följer med. Explicit fallback-stack (Segoe UI/Tahoma renderar arabiska bra
   medan El Messiri laddar). */
body {
    --bs-body-font-family: "El Messiri", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
}

html body {
    font-family: "El Messiri", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
}

/* Sidans innehålls-container ska fylla content-page på ALLA skärmar. Boxed-
   layouten (data-layout-width="boxed") lägger en max-bredd även på .container-
   fluid, så den blev smalare än content-page på stora skärmar. Compound-
   selektorn (.container-fluid.page-container) höjer specificiteten så regeln
   vinner över vendor-CSS:en oavsett laddningsordning. Indraget sköts av px-3. */
.content-page > .container-fluid.page-container {
    max-width: none;
}

/* Bootstrap 5 saknar denna utility — krävs för att flex-barn med långa
   (arabiska) titlar ska kunna krympa och trunkeras i stället för att
   svämma över grannelementen (spelarens titel, spårrader m.m.). */
.min-w-0 {
    min-width: 0 !important;
}

/* Global spelarbar: fast i botten, ovanpå allt. Mörkt tema (explicita färger —
   Inspinias CSS saknar Bootstraps dark-variabler för scopat data-bs-theme). */
.player-bar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1035;
    background: #1a1d21;
    border-top: 1px solid #2c2f33;
    color: #e9ecef;
    padding: 0.5rem 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
}

/* Player-barens innehåll ska linjera med .page-container. Baren är fixed över
   HELA viewporten (utanför den boxade layouten), så .container måste matcha
   boxed .wrapper (max 1340px, centrerad) i stället för Bootstraps stegade
   max-bredder — annars hamnar spelaren ur linje på mellanstora skärmar. Fluid
   upp till 1340; padding-inline 20px = content-page (10) + page-container px-2 (10). */
.player-bar .container {
    width: 100%;
    max-width: 1340px;
    margin-inline: auto;
    padding-inline: 20px;
}

.player-bar #player-title {
    color: #f8f9fa;
}

.player-bar #player-artist {
    color: #adb5bd;
}

/* ── Spelaren: SoundCloud-inspirerad look ────────────────────────────────
   Orange accent (#ff5500), rund spela-knapp, tunn progresslinje.
   Plyr styras via sina CSS-variabler. */
.player-bar {
    --plyr-color-main: #ff5500;                 /* progress/volym-fyllning */
    --plyr-audio-controls-background: transparent;
    --plyr-audio-control-color: #ced4da;        /* ljusa kontroller mot mörk bar */
    --plyr-range-track-height: 3px;             /* tunn linje som SoundCloud */
    --plyr-range-thumb-height: 10px;
}

.player-bar .plyr {
    flex-grow: 1;
    /* Tidslinjen får aldrig krympa under sitt innehåll — annars ritas
       kontrollerna ovanpå titeln bredvid. Metablocket trunkeras i stället. */
    min-width: 240px;
}

/* Smala skärmar: göm tiderna och volymen så tidslinjen får plats utan
   överlapp (mobiler styr ljudet med hårdvaruknapparna ändå) */
@media (max-width: 575.98px) {
    .player-bar .plyr__time,
    .player-bar .plyr__volume,
    .player-bar [data-plyr="mute"] {
        display: none;
    }

    .player-bar .plyr {
        min-width: 140px;
    }
}

.player-bar .plyr--audio .plyr__controls {
    background: transparent;
    padding: 0;
}

/* Stor rund spela/paus-knapp i temats primärfärg (vår egen — Plyr sköter bara tidslinjen) */
.player-bar .player-play-btn {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
}

.player-bar .player-play-btn:hover {
    background: var(--bs-primary);
    filter: brightness(0.9);
    color: #fff;
}

/* Föreg/nästa/kö-knapparna: diskreta, orange vid hover */
.player-bar .player-skip {
    color: #adb5bd;
}

.player-bar .player-skip:hover {
    color: #ff5500;
}

/* Blanda/spela om: orange när läget är aktivt */
.player-bar .player-skip.mode-on {
    color: #ff5500;
}

/* Tidsangivelser: små och diskreta */
.player-bar .plyr__time {
    font-size: 0.72rem;
    color: #adb5bd;
}

/* Foto + titel/artist på högerkanten: FAST bredd (stabil layout oavsett
   titellängd); krymper bara på smala skärmar vid verklig platsbrist */
.player-bar .player-meta {
    width: 240px;
    flex-shrink: 1;
    overflow: hidden;   /* säkerhetsbälte: inget innehåll ritas utanför boxen */
}

.player-bar .player-meta img {
    flex-shrink: 0;   /* fotot behåller alltid sin storlek */
}

.player-bar .player-meta img {
    object-fit: cover;
}

/* Kö-panelen: flyter ovanför baren, högerställd, scrollbar */
.player-queue {
    /* Ankrad till kö-knappens wrapper (position-relative) → öppnas exakt
       ovanför knappen var den än hamnar. Fysisk left (inte inline-start):
       panelen har dir="rtl" som annars speglar logiska egenskaper. */
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 460px;
    max-width: calc(100vw - 24px);
    /* Ljusare panelyta + ljus kant + mjuk skugga så panelen läser som ett upphöjt
       "kort" och tydligt skiljer sig från sidan — även i mörkt läge där den annars
       smälter in mot den mörka bakgrunden. */
    background: #2a2f36;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    z-index: 1036;
}

/* Panelens rubrik (ligger utanför scroll-området, alltid synlig) */
.player-queue .pq-header {
    color: #f8f9fa;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.85rem 0.85rem;
    border-bottom: 1px solid #2c2f33;
}

/* Flikar i headern (kön / قوائمي) — tydlig aktiv: vit + fet + orange understrykning */
.player-queue .pq-tab {
    border: 0;
    background: none;
    color: #7d858e;                          /* dimmad inaktiv → tydlig kontrast */
    font: inherit;
    font-weight: 500;
    padding: 0.4rem 0.15rem;                 /* mer vertikal luft åt understrykningen */
    cursor: pointer;
    border-bottom: 3px solid transparent;    /* tjockare linje */
    transition: color 0.15s ease, border-color 0.15s ease;
}

.player-queue .pq-tab:hover {
    color: #ced4da;
}

.player-queue .pq-tab.active {
    color: #fff;
    font-weight: 700;
    border-bottom-color: #ff5500;
}

/* Antal spår / max bredvid köns fliktitel (dämpat, mindre) */
.player-queue .pq-count {
    color: #adb5bd;
    font-weight: 400;
    font-size: 0.85rem;
    margin-inline-start: 0.25rem;
}

/* Röd räknare när taket (20) överskrids → listan går inte att spara */
.player-queue .pq-count.over {
    color: #ff6b6b;
    font-weight: 600;
}

/* Felmeddelande i panelen (max 20 / tom kö) */
.player-queue .pq-msg {
    background: #e11d48;
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.45rem 0.85rem;
}

/* Töm kön-knappen i panelens rubrik: diskret, röd vid hover */
.player-queue .pq-clear {
    border: 0;
    background: none;
    color: #adb5bd;
    padding: 0.2rem 0.4rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.player-queue .pq-clear:hover {
    color: #e11d48;
}

/* قوائمي-fliken: listan får egen scroll (som kön) + tom-text */
.player-queue #player-my-playlists-list {
    max-height: min(calc(100vh - 200px), 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #6c757d transparent;
    padding: 0.4rem 0.85rem;
}

/* Min-höjd på قوائمي-panen så panelen inte krymper till en liten ruta när man
   byter dit och listan är kort/tom — القادم håller ~samma storlek mellan flikarna. */
.player-queue .pq-tabpane[data-pq-pane="mylists"] {
    min-height: 220px;
}

.player-queue .pq-empty {
    color: #adb5bd;
    font-size: 0.9rem;
    text-align: center;
    padding: 1.25rem 0.85rem;
}

.player-queue #player-my-playlists-list::-webkit-scrollbar {
    width: 8px;
}

.player-queue #player-my-playlists-list::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
}

.player-queue .pq-mylist-row {
    padding: 0.15rem 0;
}

.player-queue .pq-mylist-row a {
    color: #e9ecef;
    text-decoration: none;
    font-size: 0.9rem;
}

.player-queue .pq-mylist-row a:hover {
    color: #ff5500;
}

/* Scroll-området: NATIV overflow (inte SimpleBar). SimpleBar auto-initierar på
   [data-simplebar] via DOMContentLoaded + MutationObserver, och eftersom vi
   återutlöser DOMContentLoaded vid varje Turbo-sidbyte mätte den om scroll-ytan
   MEDAN panelen var dold (0 höjd) → spåren klipptes bort trots att de fanns i
   DOM:en (kön "försvann" fast raderIPanelen>0). Native overflow kan inte
   kollapsa så — och slipper hela plugin-beroendet (standard, per CLAUDE.md).
   Höjden följer fönstret (minus topbar + spelarbar + marginal). */
.player-queue .pq-scroll {
    /* Cappad höjd (~7 rader): min() capar på 480px på stora skärmar men
       krymper med fönstret på låga skärmar så panelen aldrig svämmar över. */
    max-height: min(calc(100vh - 160px), 480px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* scroll i panelen rullar inte sidan bakom */
}

/* Smal scrollbar mot den mörka panelen (ersätter SimpleBars utseende) */
.player-queue .pq-scroll::-webkit-scrollbar {
    width: 8px;
}

.player-queue .pq-scroll::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
}

.player-queue .pq-scroll {
    scrollbar-width: thin;
    scrollbar-color: #6c757d transparent;
}

/* Sidopanelens listor (ذات صلة-flikarna + استمع مجدداً): smal scroll, ca 8 rader */
.side-scroll {
    max-height: 400px;
}

/* استمع مجدداً-kortets mobil-instans: nativ scroll (inte SimpleBar, se #17),
   begränsad höjd så det inte tar över toppen — ~4 rader, resten scrollas. */
.continue-scroll {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Topplistorna: exakt 8 hela rader (raderna är ~61px höga) */
.side-scroll-8 {
    max-height: 495px;
}

/* Sidopanelens flikrubriker: en rad, kompakta men TYDLIGA —
   fet text, dämpad färg i vila, primärfärg + underlinje + svag platta på aktiv.
   Luft mellan och runt flikarna (gäller båda panelerna via .side-tabs). */
.side-tabs {
    gap: 0.4rem;
    padding: 0.3rem 0.4rem 0;
}

/* Delad aktiv-flikeffekt: sidopanelernas .side-tabs OCH hemsidans huvudflikar
   (.tab-accent). Rundad platta + accent-linje + mjuk övergång — samma look.
   `!important` på platta/accent: Inspinias vendor-CSS laddas EFTER public.css och
   sätter aktiv-flikens bakgrund (vit) + box-shadow med samma specificitet, så den
   vann annars. !important garanterar att vår effekt syns oavsett laddningsordning. */
.side-tabs .nav-link,
.tab-accent .nav-link {
    border: 0;
    border-radius: 0.375rem 0.375rem 0 0;   /* rundade topphörn för aktiv-plattan */
    /* Mjuk övergång: färg + platta + accent-linje tonar in när fliken byts */
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.side-tabs .nav-link:hover,
.tab-accent .nav-link:hover {
    color: var(--theme-primary);
    background: var(--theme-primary-bg-subtle) !important;   /* mjuk platta redan vid hover */
}

.side-tabs .nav-link.active,
.tab-accent .nav-link.active {
    color: var(--theme-primary) !important;
    /* Kortets bakgrundsfärg: vit i ljust läge, mörk kortyta i mörkt läge — så
       den aktiva fliken smälter ihop med kortet i BÅDA lägena (var #fff förut,
       vilket blev fel i dark mode). --theme-card-bg = --theme-secondary-bg. */
    background: var(--theme-card-bg) !important;
    /* Tydlig accent-linje UNDER fliken (ligger ovanpå kortets egen underkant). */
    box-shadow: inset 0 -3px 0 var(--theme-primary) !important;
}

/* Sidopanelernas egna mått (kompakta flikar; hemsidans behåller sin storlek) */
.side-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 0.5rem;   /* px-2-luft i sidled på flik-etiketterna */
    color: var(--theme-secondary-color);   /* Inspinia-temat: --theme-*, inte --bs-* */
}

/* Artistsidans flikar: håll de längre arabiska rubrikerna (أكثر المقاطع استماعاً
   m.fl.) på EN rad. nav-justified ger lika breda kolumner, så vi krymper text +
   luft en aning så de ryms utan radbrytning. */
.artist-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.85rem;
    padding-inline: 0.35rem;
}

.player-queue .pq-item {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    text-align: start;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #2c2f33;
    cursor: pointer;
}

.player-queue .pq-item:last-child {
    border-bottom: 0;
}

.player-queue .pq-item:hover {
    background: #24272b;
}

.player-queue .pq-item.active .pq-title {
    color: #ff5500;
}

.player-queue .pq-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #f8f9fa;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-queue .pq-title:hover {
    color: #ff5500;
}

.player-queue .pq-artist {
    display: block;
    font-size: 0.75rem;
    color: #adb5bd;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-queue .pq-artist:hover {
    color: #ff5500;
}

/* Ta bort ur kön: kryss som syns vid hover på raden (alltid på pekskärm) */
.player-queue .pq-remove {
    border: 0;
    background: none;
    color: #adb5bd;
    padding: 0.25rem 0.4rem;
    display: none;
    cursor: pointer;
}

.player-queue .pq-item:hover .pq-remove {
    display: block;
}

.player-queue .pq-remove:hover {
    color: #e11d48;
}

@media (hover: none) {
    .player-queue .pq-remove {
        display: block;
    }
}

/* Dra-och-släpp i kön: grepp-ikonen är handtaget (raden klickas för att spela) */
.player-queue .pq-drag {
    color: #6c757d;
    cursor: grab;
    padding: 0.25rem 0.15rem 0.25rem 0;
    flex-shrink: 0;
}

.player-queue .pq-drag:active {
    cursor: grabbing;
}

.player-queue .sortable-ghost {
    opacity: 0.35;
    background: #24272b;
}

#player-title:hover {
    color: #ff5500;
}

/* Spela-knapparna i spårlistorna använder btn-primary (temats färg) — ingen override */

/* إعجاب: rött hjärta när besökaren gillat (ikonen byts till ti-heart-filled i JS) */
.like-btn.liked {
    color: #e11d48;
}

/* Sidfoten: alltid längst ner (mt-auto i Inspinias content-page-flexkolumn),
   hög och luftig. När spelarbaren är synlig (html.player-open — klassen byts
   aldrig av Turbo) får foten extra bottenluft så baren svävar ovanpå dess
   nedre del i stället för att täcka innehållet. */
footer.footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
    /* TEST: samma mörka färg som spelarbaren */
    background: #1a1d21;
    color: #e9ecef;
}

footer.footer a {
    color: #adb5bd;
}

footer.footer a:hover {
    color: #ff5500;
}

footer.footer .text-muted {
    color: #adb5bd !important;
}

footer.footer .btn-light {
    background: #24272b;
    border-color: #2c2f33;
    color: #e9ecef;
}

/* Sidfotens kategorilista (الأقسام): 2 kolumner (12 kategorier), luftiga rader */
footer.footer .footer-cats {
    column-count: 2;
    column-gap: 1.5rem;
}

footer.footer .footer-cats li {
    margin-bottom: 0.4rem;
    break-inside: avoid;
}

/* Sidfotens rubriker: nästan vit (samma som varumärket i topbaren) */
footer.footer .fw-semibold,
footer.footer .fw-bold {
    color: #f8f9fa;
}

html.player-open footer.footer {
    padding-bottom: calc(3rem + 70px);
}

/* إصدار-namnet (kortets titel): svart i stället för temats gröna länkfärg.
   Grön vid hover som klick-affordans. */
.release-card .card-body a {
    color: #000;
}

/* Mörkt läge: svart titel blir osynlig på det mörka kortet → ljus text i stället.
   ([data-bs-theme=dark]-attributet höjer specificiteten över basregeln ovan; rör
   inte .artist-link som har egen, mer specifik färgregel.) */
[data-bs-theme="dark"] .release-card .card-body a {
    color: var(--theme-emphasis-color);
}

.release-card .card-body a:hover {
    color: var(--theme-primary);
}

/* Kort-titel på HÖGST två rader (ersätter text-truncate): långa/likadana namn
   som "شهر محرم الحرام …" klamras med ellipsis efter 2 rader så de går att skilja
   åt. Ingen reserverad min-höjd → enradiga titlar sitter tätt mot antalet (inget
   tomrum). (Ingen d-block på elementet — display:-webkit-box krävs för clamp.) */
.title-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Artistnamnet (länk till @artist): grått som förut, grönt vid hover —
   högre specificitet än titel-regeln ovan så det inte blir svart. */
.release-card .card-body a.artist-link {
    color: var(--theme-secondary-color);
}

.release-card .card-body a.artist-link:hover {
    color: var(--theme-primary);
}

/* المنشد-namnet (artist-kort): svart i ljust läge (som release-titlarna), ljus i
   mörkt så det syns, grön vid hover — i st f temats gröna länkfärg. */
.artist-card .card-body a {
    color: #000;
}

[data-bs-theme="dark"] .artist-card .card-body a {
    color: var(--theme-emphasis-color);
}

.artist-card .card-body a:hover {
    color: var(--theme-primary);
}

/* الرواديد والمحاضرون-korten: bakgrunden MÖRKNAR vid hover, så man ser vilket
   kort pekaren är på. Theme-aware via color-mix på temats kortyta (--theme-card-bg)
   → mörknar 10% mot svart i BÅDE ljust och mörkt läge. */
.artist-card {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.artist-card:hover {
    background-color: color-mix(in srgb, var(--theme-card-bg, #fff) 90%, var(--theme-primary));
    border-color: var(--theme-primary);
}

/* Omslagsbilder i kort: kvadratiska */
.release-card .card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: filter 0.2s ease;
}

/* Typografiskt omslag när kategorin saknar egen bild (delad platshållare).
   Namnet på en färgad platta (inline background-color) + subtil ljus→mörk-sheen.
   Ärver .card-img-top ovan (1:1 + hover-brightness), så det beter sig som ett foto. */
.release-card .gen-cover {
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.32));
    color: #fff;
    padding: 0.7rem;
    text-decoration: none;
}
.release-card .gen-cover-text {
    font-weight: 600;
    font-size: clamp(0.92rem, 2.4vw, 1.15rem);
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Hover-effekt: bilden mörknar något */
.release-card:hover .card-img-top {
    filter: brightness(0.72);
}

/* ▶ spela-knapp på release-fotot (nere till höger, mittemot ⋮-menyn): rund,
   primärfärgad, tonar in vid hover — som Spotify. Ligger över foto-länken
   (z-index) så klick spelar i st f att navigera. */
.release-card .release-play {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--theme-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.release-card:hover .release-play,
.release-card .release-play:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.release-card .release-play:hover {
    filter: brightness(0.92);
}

/* Pekskärmar (ingen hover): visa knappen alltid */
@media (hover: none) {
    .release-card .release-play {
        opacity: 1;
        transform: none;
    }
}

/* Spårkort: hela fotot är en spela-knapp med play-ikon som tonar in vid hover */
.track-card-play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.track-card-play i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.track-card:hover .track-card-play i {
    opacity: 1;
}

/* Spåret som spelas: ikonen alltid synlig och orange */
.track-card.playing .track-card-play i {
    opacity: 1;
    color: #ff5500;
}

/* Pekskärmar: ikonen alltid synlig */
@media (hover: none) {
    .track-card-play i {
        opacity: 1;
    }
}

/* ⋮-menyn på إصدار-kort: PÅ fotot, nere i vänstra hörnet (fysiskt vänster).
   Mörk halvtransparent platta så den syns oavsett bild. */
.release-card .release-menu {
    position: absolute;
    left: 4px;
    bottom: 4px;
}

.release-card .release-menu .btn {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    padding: 0.15rem 0.35rem;
}

.release-card .release-menu .btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* Gillad kategori: rött hjärta även mot mörka plattan */
.release-card .release-menu .like-btn.liked {
    color: #e11d48;
}

/* ⋮-menyerna syns först när muspekaren är över kortet/raden
   (eller när menyn är öppen/fokuserad — tangentbord funkar också).
   Korten: opacity (knappen ligger PÅ fotot, tar ingen layoutplats).
   Sidopanelsraderna: display none/block så antalet ligger längst ut
   utan tomrum när punkterna är dolda. */
.release-card .release-menu {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.release-card:hover .release-menu,
.release-card .release-menu:focus-within,
.release-card .release-menu:has(.dropdown-menu.show) {
    opacity: 1;
}

/* الرواديد والمحاضرون-kortens ⋮-meny + إعجاب: samma hover-mönster, men över
   kortets bakgrund (inte ett foto) → muted-ikoner i övre hörnet (RTL: vänster). */
.artist-card .artist-menu {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.artist-card:hover .artist-menu,
.artist-card .artist-menu:focus-within,
.artist-card .artist-menu:has(.dropdown-menu.show) {
    opacity: 1;
}

/* När menyn är öppen: lyft kortet över grannkorten så dropdownen inte hamnar
   bakom nästa kort (position-relative-syskon skapar egna stacking-kontexter). */
.artist-card:has(.dropdown-menu.show) {
    z-index: 3;
}

#side-top-releases .row-actions,
#side-month .row-actions,
#side-related .row-actions,
#side-today .row-actions,
#side-top-tracks .row-actions {
    display: none !important;
}

#side-top-releases > div:hover .row-actions,
#side-top-releases .row-actions:focus-within,
#side-top-releases .row-actions:has(.dropdown-menu.show),
#side-month > div:hover .row-actions,
#side-month .row-actions:focus-within,
#side-month .row-actions:has(.dropdown-menu.show),
#side-related .track-row:hover .row-actions,
#side-related .row-actions:focus-within,
#side-related .row-actions:has(.dropdown-menu.show),
#side-today .track-row:hover .row-actions,
#side-today .row-actions:focus-within,
#side-today .row-actions:has(.dropdown-menu.show),
#side-top-tracks .track-row:hover .row-actions,
#side-top-tracks .row-actions:focus-within,
#side-top-tracks .row-actions:has(.dropdown-menu.show) {
    display: flex !important;
}

/* Pekskärmar har ingen hover → visa knapparna alltid */
@media (hover: none) {
    .release-card .release-menu,
    .artist-card .artist-menu {
        opacity: 1;
    }

    #side-top-releases .row-actions,
    #side-month .row-actions,
    #side-related .row-actions,
    #side-today .row-actions,
    #side-top-tracks .row-actions {
        display: flex !important;
    }
}

/* نوع-korten på hemsidan: kategorinamnet ligger på bilden med tonad botten */
.cat-tile {
    position: relative;
    overflow: hidden;
}

.cat-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    /* Något nedtonad i vila — full ljusstyrka (och lätt zoom) vid hover */
    filter: brightness(0.7);
    transition: filter 0.25s ease, transform 0.25s ease;
}

.cat-tile:hover img {
    filter: brightness(1);
    transform: scale(1.05);
}

.cat-tile-name {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem 0.5rem 0.4rem;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Karusellen på hemsidan (bantad från 340 → 240 så innehållet under klättrar
   upp ovanför vecket; på mobil ännu lägre) */
.home-carousel img {
    max-height: 240px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 767.98px) {
    .home-carousel img {
        max-height: 180px;
    }
}

/* Karusellpilar i RTL: temat flyttar kontrollerna rätt (prev→höger, next→vänster)
   men speglar INTE ikon-SVG:erna, så de pekar inåt. Spegla dem → pekar utåt igen. */
[dir="rtl"] .carousel-control-prev-icon,
[dir="rtl"] .carousel-control-next-icon {
    transform: scaleX(-1);
}

/* نوع-korten på mobil: horisontell swipe-strip i stället för 4 staplade rader.
   Behåller Bootstrap-rutnätet från md och upp. col-4 (33%) i en nowrap-flex ger
   ~3 rutor synliga; width nedan lämnar en "peek" av nästa som scroll-hint. */
@media (max-width: 767.98px) {
    /* .row.cat-tiles (0,0,2,0) slår Bootstraps .row (0,0,1,0) oavsett att
       vendor.css laddas efter public.css — se lessons.md #18. */
    .row.cat-tiles {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;            /* göm listen (Firefox) */
    }
    .row.cat-tiles::-webkit-scrollbar {
        display: none;                    /* göm listen (WebKit/Chromium) */
    }
    .row.cat-tiles > [class*="col-"] {
        flex: 0 0 auto;
        width: 29%;                       /* ~3,4 rutor → peek av nästa */
        scroll-snap-align: start;
    }
}

/* التصنيفات-megamenyn i topbaren: rutnät av kategoribilder (Inspinia megamenu-
   apps-stil). Bred nog för 3 kolumner på desktop; krymper till viewporten på
   mobil (där rutnätet faller till 2 kolumner via col-6). */
.cats-megamenu {
    width: 680px;
    max-width: calc(100vw - 24px);
}

.cats-megamenu .cats-megamenu-img {
    object-fit: cover;
}

/* Långa arabiska kategorinamn får radbryta i stället för att klippas */
.cats-megamenu .dropdown-item {
    white-space: normal;
}

/* Topbar-menyns INNEHÅLL ska linjera med sidans .page-container på ALLA skärmar.
   Bootstraps .container centreras smalt på mellanstora skärmar (t.ex. 720px) →
   topbaren hamnar ur linje med sidinnehållet. max-width:none = full bredd (som
   app-topbaren), och padding-inline 20px = content-page:s padding (10) +
   page-containers px-2 (10), så logga/verktyg börjar exakt där sidinnehållet gör. */
header.app-topbar .topbar-menu {
    max-width: none;
    /* !important: Inspinias topnav-regel för .topbar-menu-padding är mer specifik
       och laddas efter public.css (se lessons.md #18) — annars kvarstår 10px. */
    padding-inline: 20px !important;
}

/* Varumärket i topbaren: nästan vit text (mörk topbar) */
.site-brand {
    color: #f8f9fa;
}

.site-brand:hover {
    color: #fff;
}

/* Topbarens dropdowns (språkväxlaren m.fl.) ska ligga ÖVER menyraden under.
   Inspinias topnav-läge har en mer specifik regel (html[data-layout=topnav]
   .app-topbar, z 1005) som vann över vår förra — därför full specificitet
   + !important, och menyraden sänks under topbaren. */
html[data-layout=topnav] header.app-topbar {
    z-index: 1040 !important;
}

html[data-layout=topnav] header.topnav {
    z-index: 999 !important;
}

/* Menyraden (topnav): bekväm höjd + SAMMA linjering som .page-container (annars
   centreras .container smalt på mellanstora skärmar → datum/citat ur linje).
   Bara max-width:none behövs här — header.topnav har redan 10px egen padding, så
   med containerns default 10px blir innehållet 20px in = i linje med sidinnehållet
   (till skillnad från app-topbaren som saknar padding och därför behöver 20px). */
header.topnav .container {
    min-height: 44px;
    max-width: none;
}

header.app-topbar .dropdown-menu {
    z-index: 1041;
}

/* Dagens citat i menyraden: en rad; rullar (marquee) när texten är för lång */
.statement-nav {
    overflow: hidden;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    /* Citatet ligger nu till HÖGER (RTL-start) — texten börjar vid höger kant
       (flex-start = fysiskt höger i RTL). Datumet hamnar till vänster. */
    justify-content: flex-start;
}

.statement-nav .statement-text {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* För lång text: rulla åt höger (arabisk läsriktning), sömlös loop */
.statement-nav.marquee .statement-text {
    max-width: none;
    text-overflow: clip;
    padding-left: 100%;   /* startgap = hela radens bredd */
    animation: sv-marquee 30s linear infinite;
}

.statement-nav.marquee:hover .statement-text {
    animation-play-state: paused;   /* pausa så man hinner läsa */
}

@keyframes sv-marquee {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* Spårrader: ingen kantlinje på sista raden */
.track-row:last-child {
    border-bottom: 0 !important;
}

/* استمع مجدداً: tunn orange förloppslinje under titeln (hur långt man kommit) */
.cl-progress {
    display: block;
    height: 3px;
    background: var(--bs-border-color);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.cl-progress-fill {
    display: block;
    height: 100%;
    background: #ff5500;
    border-radius: 2px;
}

/* "استمع مجدداً"-radens tid ("2:03 / 4:55") ska ALLTID stå på en rad — annars
   klämmer flex-layouten den och den radbryts på längre tider. Titeln krymper
   i stället (meta har min-w-0 + text-truncate). */
.cl-pos {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Spårnamnen: mörk textfärg (inte temats gröna länkfärg), orange vid hover */
.track-row a {
    color: var(--bs-body-color);
}

.track-row a:hover {
    color: #ff5500;
}

/* Spåret som spelas: orange titel + orange spela/paus-ikon på fotot
   (samma markering som i kö-panelen) */
.track-row.playing a {
    color: #ff5500;
}

.track-row.playing .track-thumb i,
.player-queue .pq-item.active .track-thumb i {
    color: #ff5500;
}

/* Spela-knappen i spårrader: omslagsfotot som bakgrund, ikonen ovanpå
   (display-regeln behövs när samma stil används på <span> i kö-panelen) */
.track-thumb {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}

.track-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback-thumbnail: färgad initial (المنشد/titel) när varken spår- eller artistfoto finns */
.track-thumb-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1;
}

.track-thumb i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    background: rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: background 0.15s ease, opacity 0.15s ease;
}

/* Spårrader: spelikonen dold i vila (rent omslag), tonar in när man hovrar raden
   — och alltid synlig på spåret som spelas. Scopat till .track-row så kö-panelens
   omslag (.pq-item) behåller sin egen ikon. */
.track-row .track-thumb i {
    opacity: 0;
}

.track-row:hover .track-thumb i,
.track-row.playing .track-thumb i {
    opacity: 1;
}

/* Pekskärmar: ingen hover → visa ikonen alltid */
@media (hover: none) {
    .track-row .track-thumb i {
        opacity: 1;
    }
}

/* ×-knappen (ta bort ur "fortsätt lyssna"): dold i vila, tonar in vid hover
   över raden — precis som spelikonen. */
.track-row .cl-remove {
    opacity: 0;
    transition: opacity .15s;
}

.track-row:hover .cl-remove {
    opacity: 1;
}

/* Pekskärmar: ingen hover → visa × alltid */
@media (hover: none) {
    .track-row .cl-remove {
        opacity: 1;
    }
}

/* Radmarkering: hela raden får en subtil bakgrund vid hover så man ser var
   pekaren är (theme-aware — --theme-tertiary-bg byter själv i ljust/mörkt). */
.track-row {
    transition: background-color .12s ease;
    border-radius: 6px;
}

.track-row:hover {
    background: var(--theme-tertiary-bg);
}

/* Radnummer (spellistan): fast bredd så numren linjerar */
.track-row .track-num {
    width: 1.75rem;
    text-align: center;
    margin-inline-end: 0.35rem;
}

/* Samma radmarkering på sidopanelens الأكثر زيارة (#side-top-releases) och
   إصدارات ذات صلة (#side-month) — de är egna d-flex-rader, inte .track-row. */
#side-top-releases > div,
#side-month > div {
    transition: background-color .12s ease;
    border-radius: 6px;
}

#side-top-releases > div:hover,
#side-month > div:hover {
    background: var(--theme-tertiary-bg);
}

.track-thumb:hover i {
    background: rgba(0, 0, 0, 0.55);
}

/* Mobil: lite större omslag + spelikon + text på spårraderna (mer tumvänligt).
   Scopat till .track-row + release-raderna i الأكثر زيارة/إصدارات ذات صلة (som har
   egen markup). Kö-panelens omslag behåller sin storlek. */
@media (max-width: 767.98px) {
    .track-row .track-thumb {
        width: 56px;
        height: 56px;
    }
    .track-row .track-thumb i {
        font-size: 1.6rem;
    }
    /* Release-radernas omslag (vanlig <img width=44>) i topplistan + إصدارات ذات صلة */
    #side-top-releases img.rounded,
    #side-month img.rounded {
        width: 56px;
        height: 56px;
    }
    .track-row .fw-semibold,        /* titeln */
    #side-top-releases .fw-semibold,
    #side-month .fw-semibold {
        font-size: 1rem;
    }
    .track-row .small,              /* artist/kategori + speltid en aning större */
    #side-top-releases .small,
    #side-month .small {
        font-size: 0.8rem;
    }
}

/* Spellistans hero: subtil grön gradient bakom cover/titel (Spotify-vibe) */
.playlist-hero {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--theme-primary) 20%, transparent) 0%,
        transparent 55%);
}

/* Artistsidans header — subtil tema-gradient lagrad ÖVER kortets bakgrund
   (transparenta delen visar då kortets bg, inte sid-bg). Tema-medveten. */
.artist-header {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--theme-primary) 16%, transparent) 0%,
            transparent 60%),
        var(--theme-card-bg);
}
/* Header-knapparna (dela/gilla/sociala) tonar annars in i gradienten — ge dem
   solid kort-bg + subtil kant så de syns tydligt mot tintningen. */
.artist-header .btn-light {
    background-color: var(--theme-card-bg);
    border: 1px solid color-mix(in srgb, var(--theme-secondary-color) 22%, transparent);
}
.artist-header .btn-light:hover {
    background-color: var(--theme-tertiary-bg);
}
/* Header-gilla är en KVADRATISK ikonknapp (som dela + de sociala) → dölj
   antals-siffran här så den inte bredar ut knappen. Spannet finns kvar i DOM
   för like.js; själva gilla-läget syns ändå på hjärtats färg (.liked). */
.artist-header .like-btn .like-count {
    display: none;
}

/* Kompakt meta-rad under titeln: ·-separerade värden. Varje värde ligger i en
   <bdi> (bidi-isolering) så siffror inte glider ihop över "·" i RTL (annars kan
   "4 رواديد" + "32:46" renderas som "432:46"). */
.playlist-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.1rem;
}

.playlist-meta .sep {
    opacity: 0.55;
}

/* Spellistans cover: 2×2-mosaik av artistfoton (Spotify-stil) */
.playlist-cover {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* Play-knapp mitt på covern (grön cirkel), spelar hela listan */
.playlist-cover-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-cover-play i {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--theme-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
}

.playlist-cover:hover .playlist-cover-play i,
.playlist-cover:focus-visible .playlist-cover-play i {
    transform: scale(1.08);
}

.playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spellistesidans sammanställning: ikon-stat-poster i en responsiv rad */
.playlist-stats .stat {
    min-width: 68px;
}

.playlist-stats .stat > i {
    font-size: 1.4rem;
    color: var(--theme-primary);
}

.playlist-stats .stat-val {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
}

.playlist-stats .stat-label {
    font-size: 0.78rem;
    color: var(--theme-secondary-color);
}

/* Play-sidans progress — samma gröna glödande gradient som gamla #waveProgress.
   overflow:visible så box-shadow-glöden inte klipps av Bootstraps .progress. */
/* .progress.sv-play-progress = högre specificitet än Bootstraps .progress
   (public.css laddas FÖRE vendor.css, så lika-specifik regel skulle förlora). */
.progress.sv-play-progress {
    height: 7px;
    background: #d7dedd;
    border-radius: 99px;
    overflow: visible;
}
.sv-play-progress .sv-play-progress-bar {
    border-radius: 99px;
    background: linear-gradient(90deg, #148f77, #1ab394 55%, #5fdcc0);
    box-shadow: 0 0 9px 1px rgba(26, 179, 148, 0.55);
}

/* Responsiv trunkering — Bootstrap saknar `text-{bp}-truncate`. Trunkerar från
   md-brytpunkten (768px) och uppåt; under den radbryter texten normalt. */
@media (min-width: 768px) {
    .text-md-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Tidsbubbla vid hover över seekbaren (position sätts i player.js). */
.sv-time-bubble {
    position: fixed;
    transform: translate(-50%, -140%);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    direction: ltr;
    display: none;
    z-index: 1080;
}

/* Sångtext (كلمات المقطع) — läs-optimerad: begränsad radlängd (measure),
   större typsnitt och generös radhöjd så verserna andas. `white-space:pre-line`
   sätts i vyn och bevarar käll-radbrytningarna (strofer = blankrader). */
.lyrics-text {
    max-width: 62ch;
    margin-inline: auto;
    font-size: 1.12rem;
    line-height: 2.1;
    color: var(--theme-secondary-color, inherit);
}
@media (max-width: 575.98px) {
    .lyrics-text {
        font-size: 1rem;
        line-height: 1.95;
    }
}

/* Play/paus-overlay på spårsidans omslag. Placerad i HÖRNET (inte centrerad) så
   den aldrig täcker ansiktet på porträtt-omslag. En subtil bottengradient gör
   knappen läsbar mot vilken bild som helst. Ikonen togglas av syncTrackButtons. */
.play-cover {
    border-radius: 8px;
    overflow: hidden;
}
.play-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
    z-index: 1;
}
.play-cover-btn {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;   /* RTL: vänster hörn (mot innehållet) · LTR: höger */
    z-index: 2;               /* ovanför gradient-scrimen */
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.play-cover-btn:hover {
    background: var(--theme-primary, #1ab394);
    transform: scale(1.08);
}