/* ==========================================================================
   Radio Platform Public
   ========================================================================== */

:root {
    --public-primary: #5b4df5;
    --public-primary-dark: #4032d8;
    --public-secondary: #8b5cf6;
    --public-accent: #22c55e;

    --public-bg: #f5f7fb;
    --public-surface: #ffffff;
    --public-surface-soft: #eef2f8;

    --public-text: #182033;
    --public-text-soft: #667085;
    --public-border: #e4e8f0;

    --public-shadow-sm:
        0 8px 24px rgba(15, 23, 42, 0.06);

    --public-shadow-lg:
        0 24px 60px rgba(15, 23, 42, 0.12);

    --public-radius-sm: 12px;
    --public-radius-md: 18px;
    --public-radius-lg: 28px;

    --public-container: 1240px;
}


/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--public-bg);
    color: var(--public-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.6;
}

body.player-visible {
    padding-bottom: 98px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(
        calc(100% - 40px),
        var(--public-container)
    );
    margin-inline: auto;
}

.public-main {
    min-height: 70vh;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(228, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}

.site-header .container {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.logo-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );
    box-shadow:
        0 12px 28px rgba(91, 77, 245, 0.28);
    font-size: 22px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text strong {
    font-size: 16px;
    line-height: 1.2;
}

.logo-text span {
    margin-top: 2px;
    color: var(--public-text-soft);
    font-size: 11px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-nav a {
    padding: 10px 13px;
    border-radius: 10px;
    color: var(--public-text-soft);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.main-nav a:hover {
    background: rgba(91, 77, 245, 0.08);
    color: var(--public-primary);
}


/* ==========================================================================
   Hero
   ========================================================================== */

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(91, 77, 245, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 92, 246, 0.16),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8f9ff,
            var(--public-bg)
        );
}

.hero-section::before {
    position: absolute;
    top: -120px;
    left: 45%;
    width: 360px;
    height: 360px;
    content: "";
    border-radius: 50%;
    background: rgba(91, 77, 245, 0.07);
    filter: blur(12px);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);
    align-items: center;
    gap: 54px;
}

.hero-content {
    min-width: 0;
}

.hero-eyebrow,
.section-eyebrow {
    display: inline-block;
    color: var(--public-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.hero-content h1 {
    max-width: 760px;
    margin: 14px 0 18px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero-content > p {
    max-width: 690px;
    margin: 0;
    color: var(--public-text-soft);
    font-size: 18px;
    line-height: 1.75;
}

.hero-search {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin-top: 30px;
    padding: 9px;
    border: 1px solid var(--public-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--public-shadow-lg);
}

.hero-search-icon {
    margin-left: 8px;
    color: var(--public-text-soft);
    font-size: 18px;
}

.hero-search input {
    min-width: 0;
    flex: 1;
    padding: 13px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--public-text);
}

.hero-search input::placeholder {
    color: #98a2b3;
}

.hero-search button {
    flex-shrink: 0;
    padding: 13px 22px;
    border: 0;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );
    color: #ffffff;
    font-weight: 800;
    box-shadow:
        0 10px 24px rgba(91, 77, 245, 0.24);
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--public-text-soft);
    font-size: 12px;
}

.hero-tags a {
    padding: 6px 10px;
    border: 1px solid rgba(91, 77, 245, 0.14);
    border-radius: 999px;
    background: rgba(91, 77, 245, 0.06);
    color: var(--public-primary);
    font-weight: 700;
    text-decoration: none;
}

.hero-tag-muted {
    color: var(--public-text-soft);
}


/* ==========================================================================
   Hero Feature Station
   ========================================================================== */

.hero-feature-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--public-radius-lg);
    background:
        linear-gradient(
            150deg,
            rgba(33, 41, 70, 0.98),
            rgba(58, 45, 114, 0.96)
        );
    box-shadow:
        0 32px 80px rgba(34, 28, 84, 0.28);
    color: #ffffff;
}

.hero-feature-card::after {
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    content: "";
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.28);
    filter: blur(8px);
}

.hero-feature-glow {
    position: absolute;
    top: -90px;
    left: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(91, 77, 245, 0.22);
    filter: blur(18px);
}

.hero-feature-top,
.hero-station-logo,
.hero-station-info,
.hero-player,
.hero-station-link,
.hero-empty-station {
    position: relative;
    z-index: 1;
}

.hero-feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hero-live-label {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.hero-station-logo {
    display: flex;
    width: 150px;
    height: 150px;
    margin: 30px auto 22px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.05)
        );
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.24);
}

.hero-station-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-station-logo > span {
    font-size: 56px;
}

.hero-station-info {
    text-align: center;
}

.hero-station-info > span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-station-info h2 {
    margin: 7px 0 4px;
    font-size: 30px;
    line-height: 1.18;
}

.hero-station-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.hero-player {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 24px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
}

.hero-play-button {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--public-primary);
    font-size: 18px;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.hero-player-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.hero-player-info strong {
    font-size: 13px;
}

.hero-player-info span {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.hero-wave {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 4px;
}

.hero-wave span {
    display: block;
    width: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    animation: publicWave 1.1s ease-in-out infinite;
}

.hero-wave span:nth-child(1) {
    height: 12px;
}

.hero-wave span:nth-child(2) {
    height: 24px;
    animation-delay: 0.12s;
}

.hero-wave span:nth-child(3) {
    height: 32px;
    animation-delay: 0.24s;
}

.hero-wave span:nth-child(4) {
    height: 20px;
    animation-delay: 0.36s;
}

.hero-wave span:nth-child(5) {
    height: 14px;
    animation-delay: 0.48s;
}

@keyframes publicWave {
    0%,
    100% {
        transform: scaleY(0.55);
        opacity: 0.55;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.hero-station-link {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.hero-station-link:hover {
    color: #ffffff;
}

.hero-empty-station {
    padding: 80px 20px;
    text-align: center;
}

.hero-empty-station > span {
    font-size: 52px;
}

.hero-empty-station h2 {
    margin: 16px 0 6px;
}

.hero-empty-station p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
}


/* ==========================================================================
   Status
   ========================================================================== */

.station-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.station-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.station-status.is-online {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.station-status.is-offline {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.station-status.is-unknown {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
}


/* ==========================================================================
   Platform Stats
   ========================================================================== */

.platform-stats {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    padding: 18px 0;
}

.platform-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--public-border);
    border-radius: 20px;
    background: var(--public-surface);
    box-shadow: var(--public-shadow-sm);
}

.platform-stats article {
    display: flex;
    min-height: 110px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-right: 1px solid var(--public-border);
}

.platform-stats article:last-child {
    border-right: 0;
}

.platform-stats strong {
    font-size: 30px;
    line-height: 1;
}

.platform-stats span {
    margin-top: 8px;
    color: var(--public-text-soft);
    font-size: 12px;
}


/* ==========================================================================
   Public Sections
   ========================================================================== */

.public-section {
    padding: 74px 0;
}

.public-section-soft {
    background: var(--public-surface-soft);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.section-heading.compact {
    margin-bottom: 20px;
}

.section-heading h2 {
    margin: 8px 0 4px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.section-heading p {
    margin: 0;
    color: var(--public-text-soft);
}

.section-link {
    flex-shrink: 0;
    color: var(--public-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.public-empty-state {
    padding: 54px 24px;
    border: 1px dashed var(--public-border);
    border-radius: var(--public-radius-md);
    background: var(--public-surface);
    text-align: center;
}

.public-empty-state > span {
    font-size: 46px;
}

.public-empty-state h3 {
    margin: 14px 0 6px;
}

.public-empty-state p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--public-text-soft);
}


/* ==========================================================================
   Station Cards - Modern v2
   ========================================================================== */

.station-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.station-card {
    overflow: hidden;
    border: 1px solid rgba(91,77,245,.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;
}

.station-card:hover {
    transform: translateY(-8px);

    border-color: rgba(91,77,245,.18);

    box-shadow:
        0 24px 60px rgba(15,23,42,.14);
}

/* ---------------------------------------------------- */
/* LOGO */
/* ---------------------------------------------------- */

.station-card-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1 / .82;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7f8fd,
            #eef1fb
        );
}

.station-card-image img {

    width:100%;
    height:100%;

    object-fit:contain;

    padding:22px;

    transition:
        transform .35s ease;
}

.station-card:hover .station-card-image img{

    transform:scale(1.06);

}

.station-card-placeholder{

    font-size:64px;

}

/* ---------------------------------------------------- */
/* STATUS */
/* ---------------------------------------------------- */

.station-card-image .station-status{

    top:16px;
    right:16px;

}

/* ---------------------------------------------------- */
/* BODY */
/* ---------------------------------------------------- */

.station-card-body{

    padding:22px;

}

.station-card h3{

    margin:0;

    font-size:21px;

    font-weight:800;

    line-height:1.35;

}

.station-card h3 a{

    text-decoration:none;

}

.station-card p{

    margin-top:8px;

    color:#6b7280;

    font-size:14px;

}

/* ---------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------- */

.station-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:22px;

}

.station-play-button{

    width:48px;
    height:48px;

    min-width:48px;

    border-radius:50%;

    padding:0;

    font-size:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );

    color:#fff;

    box-shadow:
        0 10px 24px rgba(91,77,245,.28);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.station-play-button:hover{

    transform:scale(1.08);

    box-shadow:
        0 16px 32px rgba(91,77,245,.35);

}

.station-card-footer span{

    color:#8b93a7;

    font-size:13px;

    font-weight:600;

}
/* ==========================================================================
   Latest Stations
   ========================================================================== */

.latest-station-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.latest-station-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--public-border);
    border-radius: 16px;
    background: var(--public-surface);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.latest-station-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--public-shadow-sm);
}

.latest-station-logo {
    display: flex;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(91, 77, 245, 0.1),
            rgba(139, 92, 246, 0.1)
        );
}

.latest-station-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-station-logo span {
    font-size: 25px;
}

.latest-station-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.latest-station-info > span {
    color: var(--public-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.latest-station-info h3 {
    margin: 3px 0 1px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-station-info small {
    color: var(--public-text-soft);
    font-size: 10px;
}

.latest-station-item > .station-status {
    padding: 0;
    background: transparent;
}

.latest-play-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    border: 0;
    border-radius: 50%;
    background: var(--public-primary);
    color: #ffffff;
}


/* ==========================================================================
   Discovery
   ========================================================================== */

.discovery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.discovery-card {
    padding: 28px;
    border: 1px solid var(--public-border);
    border-radius: 22px;
    background: var(--public-surface);
    box-shadow: var(--public-shadow-sm);
}

.discovery-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.discovery-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--public-border);
    border-radius: 12px;
    color: var(--public-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.discovery-links a:hover {
    border-color: rgba(91, 77, 245, 0.24);
    background: rgba(91, 77, 245, 0.05);
    color: var(--public-primary);
}

.discovery-links p {
    margin: 0;
    color: var(--public-text-soft);
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding: 64px 0 24px;
    background: #182033;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.5fr)
        repeat(3, minmax(150px, 0.7fr));
    gap: 44px;
}

.footer-brand p {
    max-width: 420px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.7;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.footer-logo-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );
    font-size: 21px;
}

.footer-logo > span:last-child {
    display: flex;
    flex-direction: column;
}

.footer-logo strong {
    font-size: 15px;
}

.footer-logo small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.55);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-column h3 {
    margin: 0 0 7px;
    font-size: 13px;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    text-decoration: none;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}


/* ==========================================================================
   Global Player
   ========================================================================== */

.global-player {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            135deg,
            rgba(24, 32, 51, 0.98),
            rgba(51, 37, 98, 0.98)
        );
    color: #ffffff;
    box-shadow:
        0 -16px 36px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(18px);
}

.global-player-content {
    display: flex;
    width: min(100%, var(--public-container));
    margin-inline: auto;
    align-items: center;
    gap: 16px;
}

.global-player-toggle {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--public-primary);
    font-weight: 900;
}

.global-player-station {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.global-player-station span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.global-player-station strong {
    margin-top: 2px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-player-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #86efac;
    font-size: 11px;
    font-weight: 800;
}

.global-player-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.82);
}

.global-player input[type="range"] {
    width: 150px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-feature-card {
        max-width: 620px;
    }

    .station-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .main-nav {
        display: none;
    }

    .platform-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-stats article:nth-child(2) {
        border-right: 0;
    }

    .platform-stats article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--public-border);
    }

    .latest-station-list,
    .discovery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.player-visible {
        padding-bottom: 128px;
    }

    .container {
        width: min(
            calc(100% - 28px),
            var(--public-container)
        );
    }

    .site-header .container {
        min-height: 68px;
    }

    .logo-text span {
        display: none;
    }

    .hero-section {
        padding: 48px 0 36px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content > p {
        font-size: 16px;
    }

    .hero-search {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .hero-search-icon {
        display: none;
    }

    .hero-search input {
        width: 100%;
        padding: 11px 4px;
    }

    .hero-search button {
        width: 100%;
    }

    .hero-feature-card {
        padding: 20px;
    }

    .hero-feature-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-station-logo {
        width: 125px;
        height: 125px;
    }

    .platform-stats-grid,
    .station-grid {
        grid-template-columns: 1fr;
    }

    .platform-stats article {
        border-right: 0;
        border-bottom: 1px solid var(--public-border);
    }

    .platform-stats article:last-child {
        border-bottom: 0;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .discovery-links {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .global-player {
        padding: 10px 14px;
    }

    .global-player-content {
        flex-wrap: wrap;
    }

    .global-player-status {
        margin-left: auto;
    }

    .global-player input[type="range"] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/*
|--------------------------------------------------------------------------
| Radio Platform – Global Player
|--------------------------------------------------------------------------
*/

.global-player {
    position: fixed;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

.global-player[hidden] {
    display: none;
}

.global-player-content {
    display: grid;
    grid-template-columns:
        auto
        minmax(180px, 1fr)
        auto
        auto
        auto
        minmax(120px, 180px)
        auto;
    gap: 18px;
    align-items: center;

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(16, 24, 40, 0.98),
            rgba(26, 36, 58, 0.98)
        );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.global-player-cover {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    flex: 0 0 64px;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.global-player-cover img,
.global-player-cover-placeholder {
    width: 100%;
    height: 100%;
}

.global-player-cover img {
    display: block;
    object-fit: cover;
}

.global-player-cover-placeholder {
    display: grid;
    place-items: center;
    font-size: 28px;
}

.global-player-station {
    min-width: 0;
}

.global-player-label {
    display: block;
    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
}

.global-player-station strong {
    display: block;
    overflow: hidden;

    color: #ffffff;
    font-size: 16px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-player-station small {
    display: block;
    overflow: hidden;
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-player-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.global-player-control,
.global-player-toggle,
.global-player-close {
    display: inline-grid;
    place-items: center;

    padding: 0;
    color: #ffffff;
    cursor: pointer;
    border: 0;
    outline: 0;
}

.global-player-control {
    width: 38px;
    height: 38px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 18px;
}

.global-player-control:hover {
    background: rgba(255, 255, 255, 0.14);
}

.global-player-toggle {
    width: 50px;
    height: 50px;

    color: #102032;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    font-size: 18px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.global-player-toggle:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

.global-player-live {
    display: flex;
    gap: 8px;
    align-items: center;

    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.global-player-live-dot {
    width: 9px;
    height: 9px;

    background: #32d583;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(50, 213, 131, 0.13);
}

.global-player-wave {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    height: 32px;
}

.global-player-wave span {
    width: 3px;
    height: 10px;

    background: rgba(255, 255, 255, 0.44);
    border-radius: 999px;
    transform-origin: center;
}

.global-player.is-playing .global-player-wave span {
    animation: globalPlayerWave 0.9s ease-in-out infinite;
}

.global-player.is-playing .global-player-wave span:nth-child(2) {
    animation-delay: 0.12s;
}

.global-player.is-playing .global-player-wave span:nth-child(3) {
    animation-delay: 0.24s;
}

.global-player.is-playing .global-player-wave span:nth-child(4) {
    animation-delay: 0.36s;
}

.global-player.is-playing .global-player-wave span:nth-child(5) {
    animation-delay: 0.48s;
}

@keyframes globalPlayerWave {
    0%,
    100% {
        height: 8px;
        opacity: 0.45;
    }

    50% {
        height: 28px;
        opacity: 1;
    }
}

.global-player-volume-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.global-player-volume-icon {
    font-size: 15px;
}

.global-player-volume {
    width: 100%;
    accent-color: #ffffff;
    cursor: pointer;
}

.global-player-close {
    width: 36px;
    height: 36px;

    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border-radius: 10px;
    font-size: 26px;
    line-height: 1;
}

.global-player-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.global-player.is-buffering .global-player-toggle {
    opacity: 0.72;
    cursor: progress;
}

.global-player.has-error .global-player-content {
    border-color: rgba(240, 68, 56, 0.48);
}

.global-player.has-error .global-player-live-dot {
    background: #f04438;
    box-shadow: 0 0 0 5px rgba(240, 68, 56, 0.12);
}

body.player-visible {
    padding-bottom: 120px;
}

/*
|--------------------------------------------------------------------------
| Radio Platform – Station Detail
|--------------------------------------------------------------------------
*/

.station-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(12, 20, 35, 0.98),
            rgba(31, 47, 75, 0.96)
        );
}

.station-detail-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.station-detail-background::after {
    position: absolute;
    inset: 0;

    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(10, 18, 31, 0.95),
            rgba(10, 18, 31, 0.68)
        );
}

.station-detail-background img {
    width: 100%;
    height: 100%;

    opacity: 0.24;
    filter: blur(34px) saturate(1.15);
    object-fit: cover;
    transform: scale(1.14);
}

.station-detail-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 46px;
    align-items: center;
}

.station-detail-logo {
    display: grid;
    place-items: center;
    overflow: hidden;

    width: 250px;
    aspect-ratio: 1;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.station-detail-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.station-detail-logo span {
    font-size: 72px;
}

.station-detail-topline {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.station-detail-eyebrow {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.station-detail-content h1 {
    margin: 0 0 16px;

    color: #ffffff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.04;
}

.station-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.station-detail-meta span {
    padding: 8px 12px;

    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 13px;
}

.station-detail-intro {
    max-width: 760px;
    margin: 0 0 28px;

    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.75;
}

.station-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.station-main-play,
.station-secondary-button,
.station-back-button,
.station-sidebar-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 18px;

    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border-radius: 13px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.station-main-play {
    color: #102032;
    background: #ffffff;
    border: 0;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.station-main-play:hover {
    transform: translateY(-1px);
}

.station-main-play:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.station-secondary-button {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.station-secondary-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.station-content-section {
    background: #f6f8fb;
}

.station-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.station-main-content {
    display: grid;
    gap: 24px;
}

.station-content-card,
.station-sidebar-card {
    padding: 26px;

    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(20, 32, 50, 0.05);
}

.station-card-heading {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.station-card-heading h2,
.station-sidebar-card h2 {
    margin: 4px 0 0;
}

.now-playing-live {
    display: inline-flex;
    gap: 7px;
    align-items: center;

    color: #16794b;
    font-size: 12px;
    font-weight: 800;
}

.now-playing-live span {
    width: 8px;
    height: 8px;

    background: #32d583;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(50, 213, 131, 0.12);
}

.now-playing-content {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.now-playing-cover {
    display: grid;
    place-items: center;
    overflow: hidden;

    width: 82px;
    height: 82px;

    background: #eef2f7;
    border-radius: 16px;
}

.now-playing-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.now-playing-cover span {
    font-size: 30px;
}

.now-playing-info {
    min-width: 0;
}

.now-playing-info span,
.now-playing-info small {
    display: block;
    color: #7d8796;
}

.now-playing-info strong {
    display: block;
    margin: 4px 0;

    overflow: hidden;
    color: #1c2737;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.now-playing-button {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #ffffff;
    background: #172338;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
}

.station-description {
    color: #5f6c7d;
    line-height: 1.8;
}

.station-description p {
    margin: 0;
}

.station-history-empty {
    padding: 34px 20px;

    color: #7b8796;
    text-align: center;
    background: #f7f9fc;
    border: 1px dashed #d9e0e9;
    border-radius: 16px;
}

.station-history-empty span {
    display: block;
    margin-bottom: 10px;
    font-size: 34px;
}

.station-sidebar {
    display: grid;
    gap: 24px;
}

.station-information-list {
    margin: 20px 0 0;
}

.station-information-list > div {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;

    padding: 13px 0;
    border-bottom: 1px solid #edf0f4;
}

.station-information-list > div:last-child {
    border-bottom: 0;
}

.station-information-list dt {
    color: #7d8794;
}

.station-information-list dd {
    margin: 0;
    color: #263244;
    font-weight: 700;
    text-align: right;
}

.station-sidebar-card p {
    color: #6f7b8a;
    line-height: 1.65;
}

.station-sidebar-button {
    width: 100%;

    color: #ffffff;
    background: #172338;
    border: 0;
}

.station-error-section {
    min-height: 520px;
    display: grid;
    align-items: center;
}

.station-back-button {
    margin-top: 10px;
    color: #ffffff;
    background: #172338;
}

/*
|--------------------------------------------------------------------------
| Responsive – Station Page i Player
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .global-player-content {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto;
    }

    .global-player-live,
    .global-player-wave,
    .global-player-volume-wrap {
        display: none;
    }

    .station-detail-grid {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 30px;
    }

    .station-detail-logo {
        width: 190px;
    }

    .station-content-grid {
        grid-template-columns: 1fr;
    }

    .station-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .global-player {
        right: 10px;
        bottom: 10px;
        left: 10px;
    }

    .global-player-content {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 11px 12px;
        border-radius: 16px;
    }

    .global-player-cover {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .global-player-controls {
        gap: 6px;
    }

    .global-player-control {
        display: none;
    }

    .global-player-toggle {
        width: 44px;
        height: 44px;
    }

    .global-player-close {
        position: absolute;
        top: -10px;
        right: -6px;

        width: 28px;
        height: 28px;

        color: #ffffff;
        background: #172338;
        border-radius: 50%;
        font-size: 20px;
    }

    body.player-visible {
        padding-bottom: 95px;
    }

    .station-detail-hero {
        padding: 48px 0;
    }

    .station-detail-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .station-detail-logo {
        width: min(210px, 70vw);
        margin: 0 auto;
    }

    .station-detail-topline,
    .station-detail-actions,
    .station-detail-meta {
        justify-content: center;
    }

    .station-detail-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .station-detail-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .station-main-play,
    .station-secondary-button {
        width: 100%;
    }

    .now-playing-content {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .now-playing-cover {
        width: 64px;
        height: 64px;
    }

    .now-playing-info strong {
        font-size: 15px;
    }

    .station-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .station-content-card,
    .station-sidebar-card {
        padding: 20px;
        border-radius: 16px;
    }

    .station-card-heading {
        align-items: flex-start;
    }

    .now-playing-live {
        display: none;
    }

    .station-information-list > div {
        align-items: flex-start;
    }

    .station-information-list dd {
        max-width: 55%;
    }

    .global-player-label {
        display: none;
    }

    .global-player-station strong {
        font-size: 14px;
    }

    .global-player-station small {
        font-size: 11px;
    }
}
.station-history-card{

    margin-top:30px;

    background:#1b1b1b;

    border-radius:14px;

    padding:20px;

}

.station-song-history{

    margin-top:15px;

}

.history-item{

    display:flex;

    gap:15px;

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.history-item:last-child{

    border-bottom:none;

}

.history-time{

    width:60px;

    color:#888;

    font-size:13px;

}

.history-info{

    flex:1;

}

.history-artist{

    color:#fff;

    font-weight:600;

}

.history-title{

    color:#bfbfbf;

    font-size:14px;

}

.history-loading,
.history-empty{

    color:#999;

}
/* ==========================================================================
   PLAYER I PLAY DUGMAD – završna ispravka
   ========================================================================== */

/*
 * Globalni player – logo mora imati stabilnu veličinu.
 */
.global-player-cover {
    position: relative;
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
}

.global-player-cover img,
.global-player-cover-placeholder {
    width: 100%;
    height: 100%;
}

.global-player-cover img {
    display: block;
    object-fit: contain;
    padding: 4px;
    border-radius: inherit;
    background: #ffffff;
}

.global-player-cover-placeholder {
    display: grid;
    place-items: center;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.08);
}

.global-player-cover img[hidden],
.global-player-cover-placeholder[hidden] {
    display: none !important;
}

/*
 * Dugmad na karticama moraju imati vidljiv tekst i širinu
 * i prije pokretanja streama.
 */
.station-play-button,
.latest-play-button {
    min-width: 88px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: #f0edff;
    color: #5b3df5;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

/*
 * Sprječava da dugme na početku izgleda kao prazan oval.
 */

/*
 * Aktivno stanje.
 */
.station-play-button.is-playing,
.latest-play-button.is-playing {
    background: #ebe8ff;
    color: #4f35e8;
}

/*
 * Loading stanje.
 */
.station-play-button.is-loading,
.latest-play-button.is-loading {
    opacity: 0.75;
    cursor: wait;
}

/*
 * Najnovije stanice – stabilan raspored.
 */
.latest-station-item {
    display: grid;
    grid-template-columns:
        56px
        minmax(0, 1fr)
        auto
        auto;
    align-items: center;
    gap: 14px;
}

.latest-station-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #f2efff;
}

.latest-station-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 4px;
}

.latest-station-info {
    min-width: 0;
}

/*
 * Mobilni prikaz.
 */
@media (max-width: 700px) {
    .global-player-cover {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex-basis: 48px;
    }

    .latest-station-item {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            auto;
    }

    .latest-station-item > .station-status {
        display: none;
    }

    .station-play-button,
    .latest-play-button {
        min-width: 74px;
        padding: 8px 10px;
        font-size: 12px;
    }
}
/* ==========================================================================
   PLAY DUGMAD NA KARTICAMA – konačna ispravka
   ========================================================================== */

.station-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

/*
 * Play dugme uvijek mora biti vidljivo.
 */
.station-card-footer .station-play-button {
    position: static;
    inset: auto;

    width: auto;
    min-width: 100px;
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    padding: 9px 14px;

    border: 0;
    border-radius: 12px;

    background: #f0edff;
    color: #5b3df5;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    cursor: pointer;
}

/*
 * Codec i bitrate ostaju desno.
 */
.station-card-footer > span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;

    padding: 9px 12px;

    border-radius: 11px;

    background: #f0edff;
    color: #5b3df5;

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/*
 * Aktivni stream.
 */
.station-card-footer .station-play-button.is-playing {
    background: #e6e1ff;
    color: #4326d9;
}

/*
 * Učitavanje streama.
 */
.station-card-footer .station-play-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/*
 * Dugme ne smije prekrivati druge elemente.
 */
.station-card-footer .station-play-button::before,
.station-card-footer .station-play-button::after {
    position: static;
}

/* Mobilni prikaz */

@media (max-width: 600px) {
    .station-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .station-card-footer .station-play-button,
    .station-card-footer > span {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   LOGO STANICE – VEĆI PRIKAZ U OKVIRU
   ========================================================= */

/* Veliki logo na stranici stanice */
.station-detail-logo {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.station-detail-logo img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;

    /*
     * Vizuelno povećava mali logo unutar okvira.
     * Ne mijenja stvarnu datoteku.
     */
    transform: scale(1.35);
    transform-origin: center;

    padding: 0;
}

/* Logo u Now Playing kartici */
.station-now-playing-cover,
.station-now-playing-cover img {
    overflow: hidden;
}

.station-now-playing-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.30);
    transform-origin: center;
}

/* Logo u donjem globalnom playeru */
.global-player-cover {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.global-player-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;

    transform: scale(1.8);
    transform-origin: center;

    padding: 0;
}
/* ==========================================================================
   PREMIUM STATION CARD v1.0
   Dodati potpuno na kraj public.css
   ========================================================================== */

/* Mreža kartica */
.station-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

/* Glavna kartica */
.station-grid .station-card {
    position: relative;
    overflow: hidden;

    min-width: 0;

    border: 1px solid rgba(91, 77, 245, 0.09);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.station-grid .station-card:hover {
    transform: translateY(-8px);

    border-color: rgba(91, 77, 245, 0.22);

    box-shadow:
        0 28px 68px rgba(15, 23, 42, 0.15);
}


/* ==========================================================================
   Slika i logo
   ========================================================================== */

.station-grid .station-card-image {
    position: relative;

    display: grid;
    place-items: center;

    width: 100%;
    aspect-ratio: 1.22 / 1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(139, 92, 246, 0.10),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            #f8f9ff,
            #eef1fb
        );

    text-decoration: none;
}

/*
 * Logo je veliki, ali se ne reže.
 * max-width i max-height čuvaju različite formate logotipa.
 */
.station-grid .station-card-image img {
    display: block;

    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 78%;

    padding: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 20px rgba(31, 41, 55, 0.10)
        );

    transform: scale(1);
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.station-grid .station-card:hover .station-card-image img {
    transform: scale(1.07);

    filter:
        drop-shadow(
            0 18px 28px rgba(31, 41, 55, 0.16)
        );
}

/* Zamjenska ikona kada nema logotipa */
.station-grid .station-card-placeholder {
    display: grid;
    place-items: center;

    width: 112px;
    height: 112px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(91, 77, 245, 0.13),
            rgba(139, 92, 246, 0.13)
        );

    font-size: 58px;

    transition: transform 0.3s ease;
}

.station-grid .station-card:hover .station-card-placeholder {
    transform: scale(1.06);
}


/* ==========================================================================
   Status stanice
   ========================================================================== */

.station-grid .station-card-image .station-status {
    position: absolute;
    top: 16px;
    right: 16px;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    background: rgba(255, 255, 255, 0.84);

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.10);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================================
   Sadržaj kartice
   ========================================================================== */

.station-grid .station-card-body {
    position: relative;

    min-height: 172px;

    padding:
        24px
        84px
        24px
        24px;
}

/* Žanr se uklanja sa Premium kartice */
.station-grid .station-card-genre {
    display: none;
}

/* Naziv stanice */
.station-grid .station-card h3 {
    margin: 0;

    overflow: hidden;

    color: var(--public-text);

    font-size: 21px;
    font-weight: 850;
    line-height: 1.25;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-grid .station-card h3 a {
    color: inherit;
    text-decoration: none;
}

.station-grid .station-card h3 a:hover {
    color: var(--public-primary);
}

/* Lokacija */
.station-grid .station-card p {
    display: flex;
    align-items: center;
    gap: 7px;

    max-width: 100%;
    margin: 10px 0 0;

    overflow: hidden;

    color: var(--public-text-soft);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mala profesionalna lokacijska oznaka */
.station-grid .station-card p::before {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;

    content: "⌖";

    border-radius: 50%;

    background: rgba(91, 77, 245, 0.09);
    color: var(--public-primary);

    font-size: 11px;
    font-weight: 900;
}


/* ==========================================================================
   Footer i Premium Play dugme
   ========================================================================== */

.station-grid .station-card-footer {
    position: absolute;
    right: 22px;
    bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
}

/* Codec i bitrate se ne prikazuju na početnoj kartici */
.station-grid .station-card-footer > span {
    display: none;
}

/*
 * Tekst u dugmetu ostaje u HTML-u zbog JavaScripta i pristupačnosti,
 * ali se vizuelno prikazuje samo ikona.
 */
.station-grid
.station-card-footer
.station-play-button {
    position: relative;

    display: inline-grid;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    place-items: center;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );

    color: transparent;

    box-shadow:
        0 13px 28px rgba(91, 77, 245, 0.30);

    font-size: 0;
    line-height: 1;

    opacity: 1;
    visibility: visible;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}

.station-grid
.station-card-footer
.station-play-button::before {
    position: static;

    display: block;

    content: "▶";

    color: #ffffff;

    font-size: 18px;
    line-height: 1;

    transform: translateX(2px);
}

.station-grid
.station-card-footer
.station-play-button:hover {
    transform: scale(1.09);

    box-shadow:
        0 18px 36px rgba(91, 77, 245, 0.40);
}

/* Stanica trenutno svira */
.station-grid
.station-card-footer
.station-play-button.is-playing {
    background:
        linear-gradient(
            135deg,
            #4338ca,
            #7c3aed
        );

    color: transparent;
}

.station-grid
.station-card-footer
.station-play-button.is-playing::before {
    content: "Ⅱ";

    font-size: 20px;
    font-weight: 900;

    transform: none;
}

/* Učitavanje streama */
.station-grid
.station-card-footer
.station-play-button.is-loading {
    opacity: 0.72;
    cursor: wait;
}

.station-grid
.station-card-footer
.station-play-button.is-loading::before {
    width: 19px;
    height: 19px;

    content: "";

    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: premiumStationSpin 0.75s linear infinite;

    transform: none;
}

@keyframes premiumStationSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   Responsive Premium kartice
   ========================================================================== */

@media (max-width: 1100px) {
    .station-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .station-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .station-grid .station-card-image {
        aspect-ratio: 1.35 / 1;
    }

    .station-grid .station-card-body {
        min-height: 150px;

        padding:
            21px
            76px
            21px
            21px;
    }

    .station-grid .station-card h3 {
        font-size: 19px;
    }

    .station-grid .station-card-footer {
        right: 19px;
        bottom: 21px;
    }

    .station-grid
    .station-card-footer
    .station-play-button {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}
/* ==========================================================================
   PREMIUM STATION CARD v2.0
   Tačno prilagođeno HTML strukturi iz home.php
   ========================================================================== */

.station-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.station-card--modern {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid rgba(91, 77, 245, 0.10);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.station-card--modern:hover {
    transform: translateY(-8px);

    border-color: rgba(91, 77, 245, 0.22);

    box-shadow:
        0 28px 68px rgba(15, 23, 42, 0.15);
}


/* ==========================================================================
   Gornji dio kartice i logo
   ========================================================================== */

.station-card--modern .station-card-image {
    position: relative;

    display: grid;
    width: 100%;
    aspect-ratio: 1.22 / 1;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.13),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #f9faff,
            #eef1fb
        );

    text-decoration: none;
}

.station-card--modern .station-card-image img {
    display: block;

    width: 82%;
    height: 82%;

    padding: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 14px 24px rgba(31, 41, 55, 0.12)
        );

    transform: scale(1);
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.station-card--modern:hover .station-card-image img {
    transform: scale(1.08);

    filter:
        drop-shadow(
            0 20px 32px rgba(31, 41, 55, 0.17)
        );
}

.station-card--modern .station-card-placeholder {
    display: grid;
    width: 126px;
    height: 126px;
    place-items: center;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(91, 77, 245, 0.13),
            rgba(139, 92, 246, 0.18)
        );

    font-size: 62px;

    transition: transform 0.3s ease;
}

.station-card--modern:hover .station-card-placeholder {
    transform: scale(1.07);
}


/* ==========================================================================
   Status tačka
   ========================================================================== */

.station-card--modern .station-card-status-dot {
    position: absolute;
    top: 16px;
    right: 16px;

    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.90);

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.13);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.station-card--modern .station-card-status-dot > span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #94a3b8;
}

.station-card--modern .station-card-status-dot.is-online > span {
    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.14);
}

.station-card--modern .station-card-status-dot.is-offline > span {
    background: #ef4444;

    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.13);
}

.station-card--modern .station-card-status-dot.is-unknown > span {
    background: #94a3b8;

    box-shadow:
        0 0 0 4px rgba(148, 163, 184, 0.14);
}


/* ==========================================================================
   Donji sadržaj kartice
   ========================================================================== */

.station-card--modern .station-card-body {
    padding: 22px 22px 24px;
}

.station-card--modern .station-card-title {
    margin: 0;

    overflow: hidden;

    color: var(--public-text);

    font-size: 21px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.025em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-card--modern .station-card-title a {
    color: inherit;
    text-decoration: none;
}

.station-card--modern .station-card-title a:hover {
    color: var(--public-primary);
}


/* ==========================================================================
   Lokacija i Play dugme u istom redu
   ========================================================================== */

.station-card--modern .station-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-top: 14px;
}

.station-card--modern .station-card-location {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    color: var(--public-text-soft);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    white-space: nowrap;
}

.station-card--modern .station-card-location > span:last-child {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-card--modern .station-card-location-icon {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;

    border-radius: 50%;

    background: rgba(91, 77, 245, 0.10);
    color: var(--public-primary);

    font-size: 11px;
    font-weight: 900;
}


/* ==========================================================================
   Premium kružno Play dugme
   ========================================================================== */

.station-card--modern .station-card-play-button {
    position: static;

    display: inline-grid;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    flex: 0 0 50px;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );

    color: #ffffff;

    box-shadow:
        0 12px 28px rgba(91, 77, 245, 0.30);

    font-size: 0;
    line-height: 1;

    opacity: 1;
    visibility: visible;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}

.station-card--modern .station-card-play-button > span {
    display: block;

    color: #ffffff;

    font-size: 18px;
    line-height: 1;

    transform: translateX(2px);
}

.station-card--modern .station-card-play-button:hover {
    transform: scale(1.09);

    box-shadow:
        0 18px 38px rgba(91, 77, 245, 0.40);
}

.station-card--modern .station-card-play-button.is-playing {
    background:
        linear-gradient(
            135deg,
            #4338ca,
            #7c3aed
        );
}

.station-card--modern .station-card-play-button.is-playing > span {
    font-size: 0;
    transform: none;
}

.station-card--modern .station-card-play-button.is-playing > span::before {
    content: "Ⅱ";

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.station-card--modern .station-card-play-button.is-loading {
    opacity: 0.72;
    cursor: wait;
}

.station-card--modern .station-card-play-button.is-loading > span {
    width: 19px;
    height: 19px;

    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 50%;

    font-size: 0;

    animation: premiumStationCardSpin 0.75s linear infinite;

    transform: none;
}

@keyframes premiumStationCardSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .station-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .station-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .station-card--modern .station-card-image {
        aspect-ratio: 1.35 / 1;
    }

    .station-card--modern .station-card-image img {
        width: 78%;
        height: 78%;
    }

    .station-card--modern .station-card-body {
        padding: 20px;
    }

    .station-card--modern .station-card-title {
        font-size: 19px;
    }

    .station-card--modern .station-card-play-button {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
        flex-basis: 46px;
    }
}
/* ==========================================================================
   PREMIUM STATION CARD – PLAY/PAUSE IKONA FIX
   Ikona se prikazuje na samom button elementu, ne zavisi od unutrašnjeg span-a.
   ========================================================================== */

.station-card--modern .station-card-play-button {
    position: static;

    color: transparent;
    font-size: 0;
}

/*
 * Skrivamo postojeći tekst ili span jer ikonu crta button::before.
 */
.station-card--modern .station-card-play-button > span {
    display: none !important;
}





@keyframes premiumStationButtonSpin {
    to {
        transform: rotate(360deg);
    }
}
/* ==========================================================
   Header Search
========================================================== */

.site-header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

}

.header-search{

    flex:1;
    max-width:620px;

}

.header-search-box{

    position:relative;

}

.header-search-icon{

    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    pointer-events:none;
    opacity:.6;

}

.header-search input{

    width:100%;
    height:48px;

    padding:0 18px 0 48px;

    border:1px solid #d8dcef;
    border-radius:999px;

    background:#ffffff;

    font-size:15px;

    transition:.25s;

}

.header-search input:focus{

    outline:none;

    border-color:#6c63ff;

    box-shadow:0 0 0 4px rgba(108,99,255,.15);

}

.header-search-results{

    display:none;

    position:absolute;

    left:0;
    right:0;
    top:58px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 12px 40px rgba(0,0,0,.12);

    overflow:hidden;

    z-index:500;

}
.main-nav a {
    position: relative;
}

.main-nav a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;

    height: 2px;

    background: #6557f5;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.2s ease;
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
    transform: scaleX(1);
}
/* ==========================================================
   Directory test pages
========================================================== */

.directory-page {
    min-height: 620px;
    padding: 110px 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(108, 99, 255, 0.14),
            transparent 36%
        ),
        #f8f9ff;
}

.directory-page-header {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.directory-page-icon {
    display: grid;
    place-items: center;

    width: 74px;
    height: 74px;

    margin: 0 auto 22px;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 16px 42px rgba(32, 38, 78, 0.12);

    font-size: 32px;
}

.directory-page-header h1 {
    margin: 12px 0 18px;

    color: #11182d;

    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.05;
}

.directory-page-header p {
    margin: 0;

    color: #6d7489;

    font-size: 18px;
    line-height: 1.8;
}

.directory-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;

    max-width: 760px;

    margin: 52px auto 0;
    padding: 36px;

    border: 1px dashed #cfd4e8;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.82);

    text-align: center;
}

.directory-placeholder strong {
    color: #1c2440;
    font-size: 18px;
}

.directory-placeholder span {
    color: #7a8194;
}

.directory-back-button {
    display: inline-flex;

    margin-top: 28px;
    padding: 14px 22px;

    border-radius: 14px;

    background: #6557f5;
    color: #ffffff;

    font-weight: 700;
}

/* ==========================================================
   Directory grid and cards
========================================================== */

.directory-page {
    min-height: 620px;
    padding: 72px 0 96px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );
    gap: 24px;

    margin-top: 52px;
}

.directory-card {
    overflow: hidden;

    border: 1px solid rgba(207, 212, 232, 0.9);
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 14px 36px rgba(32, 38, 78, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.directory-card:hover {
    transform: translateY(-4px);

    border-color: rgba(101, 87, 245, 0.35);

    box-shadow:
        0 20px 46px rgba(32, 38, 78, 0.13);
}

.directory-card__link {
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 150px;
    padding: 26px;

    color: inherit;
    text-decoration: none;
}

.directory-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(101, 87, 245, 0.14),
            rgba(145, 91, 255, 0.1)
        );

    font-size: 26px;
}

.directory-card__content {
    flex: 1;
    min-width: 0;
}

.directory-card__title {
    margin: 0 0 8px;

    color: #11182d;

    font-size: 22px;
    line-height: 1.25;
}

.directory-card__description {
    margin: 0 0 12px;

    color: #747b90;

    font-size: 14px;
    line-height: 1.6;
}

.directory-card__count {
    display: inline-flex;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(101, 87, 245, 0.1);
    color: #5849df;

    font-size: 13px;
    font-weight: 700;
}

.directory-card__arrow {
    flex: 0 0 auto;

    color: #6557f5;

    font-size: 24px;

    transition: transform 0.2s ease;
}

.directory-card:hover .directory-card__arrow {
    transform: translateX(4px);
}

@media (max-width: 720px) {
    .directory-page {
        padding: 54px 0 72px;
    }

    .directory-page-header h1 {
        font-size: 38px;
    }

    .directory-grid {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-top: 38px;
    }

    .directory-card__link {
        min-height: 130px;
        padding: 22px;
    }
    .hero-actions {
    flex-direction: column;
    }  
    .hero-primary-button,
    .hero-secondary-button {
     width: 100%;
    }

    .hero-quick-stats {
    justify-content: center;
    }
    
}
/*
|--------------------------------------------------------------------------
| Search Page
|--------------------------------------------------------------------------
*/

.directory-search-form {
    width: 100%;
    max-width: 760px;
    margin: 30px auto 36px;
}

.directory-results {
    width: 100%;
}

.directory-results .latest-stations-grid {
    width: 100%;
}

.directory-page .public-pagination {
    margin-top: 34px;
}
/*
|--------------------------------------------------------------------------
| Hero Actions
|--------------------------------------------------------------------------
*/

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.hero-primary-button,
.hero-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.hero-primary-button {
    border: 1px solid transparent;
    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-secondary)
        );
    color: #ffffff;
    box-shadow:
        0 12px 28px rgba(91, 77, 245, 0.24);
}

.hero-secondary-button {
    border: 1px solid var(--public-border);
    background: rgba(255, 255, 255, 0.84);
    color: var(--public-text);
    box-shadow: var(--public-shadow-sm);
}

.hero-primary-button:hover,
.hero-secondary-button:hover {
    transform: translateY(-2px);
}

.hero-primary-button:hover {
    box-shadow:
        0 16px 34px rgba(91, 77, 245, 0.3);
}

.hero-secondary-button:hover {
    border-color: rgba(91, 77, 245, 0.3);
    color: var(--public-primary);
}

.hero-quick-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    color: var(--public-text-soft);
    font-size: 13px;
}

.hero-quick-stats strong {
    color: var(--public-text);
}
/*
|--------------------------------------------------------------------------
| Footer dodatni elementi
|--------------------------------------------------------------------------
*/

.footer-random-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.footer-random-link:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
}

.footer-link-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 255, 255, 0.45);
    cursor: default;
}

.footer-link-disabled small {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-studio-link {
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.footer-studio-link:hover {
    color: #ffffff;
    text-decoration: underline;
}
/*
|--------------------------------------------------------------------------
| Mobile Hamburger Menu
|--------------------------------------------------------------------------
|
| Mobilna navigacija Radio Platform javnog portala.
| Hamburger dugme prikazuje se samo na manjim ekranima.
|
*/

/*
 * Hamburger je skriven na desktop prikazu.
 */
.mobile-menu-toggle {
    display: none;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--public-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--public-text);
    box-shadow: var(--public-shadow-sm);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.mobile-menu-toggle:hover {
    border-color: rgba(91, 77, 245, 0.38);
    background: rgba(91, 77, 245, 0.06);
    box-shadow:
        0 10px 24px rgba(32, 38, 78, 0.12);
}

.mobile-menu-toggle:focus-visible {
    outline: 3px solid rgba(91, 77, 245, 0.2);
    outline-offset: 3px;
}

.mobile-menu-toggle:active {
    transform: scale(0.96);
}

/*
 * Tri linije hamburger ikone.
 */
.mobile-menu-toggle__line {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}

/*
 * Hamburger se pretvara u X kada je meni otvoren.
 */
.mobile-menu-toggle.is-active
.mobile-menu-toggle__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| Tablet and mobile navigation
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    /*
     * Header container služi kao osnova za apsolutno pozicioniran meni.
     */
    .site-header .container {
        position: relative;
        flex-wrap: wrap;
        gap: 14px;
        padding-block: 12px;
    }

    /*
     * Hamburger postaje vidljiv.
     */
    .mobile-menu-toggle {
        display: inline-flex;
        order: 3;
    }

    /*
     * Search zauzima cijeli drugi red headera.
     */
    .header-search {
        order: 4;
        flex: 0 0 100%;
        max-width: none;
    }

    /*
     * Mobilna navigacija je početno zatvorena.
     *
     * Ne koristimo display:none jer želimo glatku animaciju.
     */
    .main-nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        z-index: 600;

        display: flex;
        visibility: hidden;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;

        max-height: 0;
        padding: 0 10px;
        overflow: hidden;

        border: 1px solid transparent;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
            0 22px 55px rgba(23, 28, 57, 0.18);

        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);

        transition:
            max-height 0.3s ease,
            padding 0.3s ease,
            opacity 0.2s ease,
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    /*
     * Otvoreno stanje mobilne navigacije.
     */
    .main-nav.is-open {
        visibility: visible;
        max-height: 420px;
        padding: 12px;
        border-color: rgba(207, 212, 232, 0.92);
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);

        transition:
            max-height 0.3s ease,
            padding 0.3s ease,
            opacity 0.2s ease,
            transform 0.3s ease,
            visibility 0s linear 0s;
    }

    /*
     * Linkovi mobilnog menija.
     */
    .main-nav a {
        width: 100%;
        padding: 14px 16px;
        border-radius: 13px;
        font-size: 14px;
    }

    .main-nav a:hover,
    .main-nav a.is-active {
        background:
            linear-gradient(
                135deg,
                rgba(91, 77, 245, 0.1),
                rgba(139, 92, 246, 0.08)
            );
        color: var(--public-primary);
    }

    /*
     * Desktop donja linija nije potrebna u mobilnom meniju.
     */
    .main-nav a::after {
        display: none;
    }
}


/*
|--------------------------------------------------------------------------
| Small mobile screens
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .site-header .container {
        min-height: 68px;
    }

    .logo {
        min-width: 0;
    }

    .logo-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 20px;
    }

    .logo-text strong {
        font-size: 15px;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .header-search input {
        height: 44px;
        font-size: 14px;
    }

    .main-nav {
        top: calc(100% + 8px);
    }
}
/*
|--------------------------------------------------------------------------
| Mobile Menu Scroll Lock
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {
    body.menu-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   GLOBAL PLAYER UI v2 – FULL WIDTH
   ========================================================================== */

/*
 * Vanjski player zauzima punu širinu ekrana.
 * On ujedno nosi kompletnu pozadinu, blur i sjenu.
 */
.global-player {
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    padding: 0;

    background:
        linear-gradient(
            135deg,
            rgba(16, 24, 40, 0.985),
            rgba(26, 36, 58, 0.985)
        );

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 -12px 38px rgba(0, 0, 0, 0.34);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/*
 * Unutrašnji sadržaj više nema ograničenje od 1180 px.
 * Pozadinu preuzima vanjski player, pa nema dvostrukog okvira.
 */
.global-player-content {
    width: 100%;
    max-width: none;
    min-height: 84px;

    margin: 0;
    padding:
        12px
        clamp(18px, 4vw, 72px);

    box-sizing: border-box;

    color: #ffffff;
    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*
 * Stabilan okvir covera/loga.
 */
.global-player-cover {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    flex: 0 0 60px;

    padding: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
}

/*
 * Slika više nema scale(1.8), pa ostaje potpuno
 * unutar svojih 60 × 60 px.
 */
.global-player-cover img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    padding: 0;

    object-fit: contain;
    object-position: center;

    background: #ffffff;
    border-radius: inherit;

    transform: none;
    transform-origin: center;
}

.global-player-cover-placeholder {
    width: 100%;
    height: 100%;

    background:
        rgba(255, 255, 255, 0.08);

    border-radius: inherit;
}

/*
 * Player više ne treba veliki prazan prostor ispod stranice.
 */
body.player-visible {
    padding-bottom: 96px;
}

/*
 * Tablet raspored.
 */
@media (max-width: 980px) {
    .global-player-content {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto;

        min-height: 80px;
        padding:
            11px
            clamp(14px, 3vw, 28px);
    }
}

/*
 * Mobilni raspored.
 */
@media (max-width: 700px) {
    .global-player {
        right: 0;
        bottom: 0;
        left: 0;
    }

    .global-player-content {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            auto;

        min-height: 72px;
        gap: 11px;

        padding:
            10px
            12px;

        border-radius: 0;
    }

    .global-player-cover {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex-basis: 48px;

        border-radius: 12px;
    }

    .global-player-close {
        top: 4px;
        right: 4px;
    }

    body.player-visible {
        padding-bottom: 82px;
    }
}

/* ==========================================================================
   GLOBAL PLAYER UI v2.1 – MOBILE CONTROL FIX
   ========================================================================== */

@media (max-width: 700px) {

    /*
     * Ostavljamo prostor desno za Close dugme,
     * tako da se više ne preklapa s Play/Pause kontrolom.
     */
    .global-player-content {
        padding-right: 52px;
    }

    .global-player-controls {
        justify-self: end;
    }

    .global-player-toggle {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
    }

    /*
     * Close dugme ostaje u gornjem desnom uglu,
     * ali dobiva manju i uredniju veličinu.
     */
    .global-player-close {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 4;

        width: 26px;
        height: 26px;

        color: rgba(255, 255, 255, 0.88);
        background: rgba(255, 255, 255, 0.08);

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 50%;

        box-shadow:
            0 5px 14px rgba(0, 0, 0, 0.24);

        font-size: 19px;
        line-height: 1;
    }
}

/* ==========================================================================
   RADIO PLATFORM DESIGN SYSTEM – THEME v1.0
   ========================================================================== */

:root {
    color-scheme: light;

    --rp-background: #f4f7fb;
    --rp-background-soft: #eef2f7;

    --rp-surface: rgba(255, 255, 255, 0.94);
    --rp-surface-strong: #ffffff;
    --rp-surface-soft: #f8fafc;

    --rp-input: rgba(255, 255, 255, 0.92);

    --rp-text: #172033;
    --rp-text-soft: #64748b;

    --rp-border: rgba(148, 163, 184, 0.24);

    --rp-primary: #4f46e5;
    --rp-primary-hover: #4338ca;

    --rp-shadow:
        0 18px 45px rgba(15, 23, 42, 0.09);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --rp-background: #07111f;
    --rp-background-soft: #0d1a2b;

    --rp-surface: rgba(15, 29, 48, 0.94);
    --rp-surface-strong: #0f1d30;
    --rp-surface-soft: rgba(20, 35, 56, 0.92);

    --rp-input: rgba(2, 8, 23, 0.72);

    --rp-text: #f8fafc;
    --rp-text-soft: #94a3b8;

    --rp-border: rgba(148, 163, 184, 0.18);

    --rp-primary: #38bdf8;
    --rp-primary-hover: #0ea5e9;

    --rp-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38);
}

/*
 * Osnovna pozadina portala.
 */
body {
    color: var(--rp-text);

    background:
        radial-gradient(
            circle at top left,
            color-mix(
                in srgb,
                var(--rp-primary) 18%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(99, 102, 241, 0.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--rp-background),
            var(--rp-background-soft)
        );

    background-attachment: fixed;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

/*
 * Header prati aktivnu temu.
 */
.site-header {
    color: var(--rp-text);
    background: var(--rp-surface);
    border-bottom-color: var(--rp-border);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/*
 * Desktop header dobija četvrtu kolonu
 * rezervisanu za Theme switch.
 */
.site-header .container {
    grid-template-columns:
        auto
        minmax(260px, 1fr)
        auto
        auto;
}

.logo-text strong {
    color: var(--rp-text);
}

.logo-text span {
    color: var(--rp-text-soft);
}

.header-search-box {
    color: var(--rp-text);
    background: var(--rp-input);
    border-color: var(--rp-border);
}

.header-search-box:focus-within {
    border-color: var(--rp-primary);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--rp-primary) 14%,
            transparent
        );
}

.header-search-box input {
    color: var(--rp-text);
    background: transparent;
}

.header-search-box input::placeholder {
    color: var(--rp-text-soft);
}

.main-nav a {
    color: var(--rp-text-soft);
}

.main-nav a:hover,
.main-nav a.is-active {
    color: var(--rp-primary);
}

.main-nav a::after {
    background: var(--rp-primary);
}

/*
 * Light / Dark switch.
 */
.theme-toggle {
    position: relative;

    width: 44px;
    height: 44px;

    display: inline-grid;
    place-items: center;

    overflow: hidden;

    padding: 0;

    color: var(--rp-text);
    background: var(--rp-surface-soft);

    border: 1px solid var(--rp-border);
    border-radius: 14px;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.08);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);

    color: var(--rp-primary);
    border-color: var(--rp-primary);

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--rp-primary) 18%,
            transparent
        );
}

.theme-toggle__icon {
    position: absolute;

    display: grid;
    place-items: center;

    font-size: 21px;
    line-height: 1;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.theme-toggle__icon--sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--moon {
    opacity: 0;
    transform: rotate(-70deg) scale(0.55);
}

html[data-theme="dark"]
.theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(70deg) scale(0.55);
}

html[data-theme="dark"]
.theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__text {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
    clip: rect(0 0 0 0);

    white-space: nowrap;
}

/*
 * Hamburger prati aktivnu temu.
 */
.mobile-menu-toggle {
    color: var(--rp-text);
    background: var(--rp-surface-soft);
    border-color: var(--rp-border);
}

.mobile-menu-toggle__line {
    background: currentColor;
}

/*
 * Osnovni tamni izgled kartica.
 * Detalje svake vrste kartice sređujemo u narednim fazama.
 */
html[data-theme="dark"] .station-card,
html[data-theme="dark"] .latest-card,
html[data-theme="dark"] .latest-station-card,
html[data-theme="dark"] .country-card,
html[data-theme="dark"] .genre-card,
html[data-theme="dark"] .search-result-card,
html[data-theme="dark"] .panel-card {
    color: var(--rp-text);
    background: var(--rp-surface);
    border-color: var(--rp-border);

    box-shadow: var(--rp-shadow);
}

html[data-theme="dark"] .station-card h2,
html[data-theme="dark"] .station-card h3,
html[data-theme="dark"] .latest-card h2,
html[data-theme="dark"] .latest-card h3,
html[data-theme="dark"] .country-card h2,
html[data-theme="dark"] .country-card h3,
html[data-theme="dark"] .genre-card h2,
html[data-theme="dark"] .genre-card h3 {
    color: var(--rp-text);
}

html[data-theme="dark"] .station-card p,
html[data-theme="dark"] .latest-card p,
html[data-theme="dark"] .country-card p,
html[data-theme="dark"] .genre-card p {
    color: var(--rp-text-soft);
}

/*
 * Mobilni raspored.
 */
@media (max-width: 820px) {
    .site-header .container {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
    }

    .theme-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .mobile-menu-toggle {
        grid-column: 3;
        grid-row: 1;
    }

    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .main-nav {
        grid-column: 1 / -1;
    }

    html[data-theme="dark"] .main-nav {
        background: var(--rp-surface-strong);
        border-color: var(--rp-border);
    }
}

/* ==========================================================================
   DARK THEME – HERO v1.0
   ========================================================================== */

/*
 * Glavna Hero pozadina prati izgled Admin Login stranice.
 */
html[data-theme="dark"] .hero-section {
    position: relative;
    overflow: hidden;

    color: #f8fafc;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(14, 165, 233, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(99, 102, 241, 0.22),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #07111f 0%,
            #0a1626 50%,
            #0d1a2b 100%
        );

    border-bottom:
        1px solid rgba(148, 163, 184, 0.12);
}

/*
 * Stari svijetli dekorativni sloj više ne smije
 * isprati sredinu Hero sekcije.
 */
html[data-theme="dark"] .hero-section::before {
    background:
        radial-gradient(
            circle at center,
            rgba(56, 189, 248, 0.08),
            transparent 58%
        );

    opacity: 1;
}

/*
 * Tekstualni dio.
 */
html[data-theme="dark"] .hero-eyebrow {
    color: #38bdf8;
    text-shadow:
        0 0 24px rgba(56, 189, 248, 0.26);
}

html[data-theme="dark"] .hero-content h1 {
    color: #f8fafc;

    text-shadow:
        0 10px 38px rgba(0, 0, 0, 0.34);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #bae6fd 62%,
            #c7d2fe
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

html[data-theme="dark"] .hero-content > p {
    color: #cbd5e1;
}

/*
 * Glavna Hero dugmad.
 */
html[data-theme="dark"] .hero-primary-button {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border-color:
        rgba(103, 232, 249, 0.38);

    box-shadow:
        0 16px 34px rgba(14, 165, 233, 0.24);
}

html[data-theme="dark"] .hero-primary-button:hover {
    box-shadow:
        0 20px 42px rgba(14, 165, 233, 0.32);
}

html[data-theme="dark"] .hero-secondary-button {
    color: #e2e8f0;

    background:
        rgba(15, 29, 48, 0.76);

    border-color:
        rgba(148, 163, 184, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .hero-secondary-button:hover {
    color: #ffffff;

    background:
        rgba(30, 46, 69, 0.92);

    border-color:
        rgba(56, 189, 248, 0.34);
}

/*
 * Brze statistike.
 */
html[data-theme="dark"] .hero-quick-stats {
    color: #94a3b8;
}

html[data-theme="dark"] .hero-quick-stats > * {
    background:
        rgba(15, 29, 48, 0.62);

    border-color:
        rgba(148, 163, 184, 0.16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .hero-quick-stats strong {
    color: #f8fafc;
}

/*
 * Hero žanrovi/tagovi.
 */
html[data-theme="dark"] .hero-tags a,
html[data-theme="dark"] .hero-tag-muted {
    color: #cbd5e1;

    background:
        rgba(15, 29, 48, 0.70);

    border-color:
        rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .hero-tags a:hover {
    color: #ffffff;

    background:
        rgba(56, 189, 248, 0.14);

    border-color:
        rgba(56, 189, 248, 0.34);
}

/*
 * Istaknuta radio stanica – glavni glass panel.
 */
html[data-theme="dark"] .hero-feature-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.96),
            rgba(17, 31, 52, 0.92)
        );

    border:
        1px solid rgba(148, 163, 184, 0.18);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/*
 * Suptilni cyan/indigo obrub i sjaj.
 */
html[data-theme="dark"] .hero-feature-card::after {
    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.30),
            transparent 42%,
            rgba(99, 102, 241, 0.26)
        );

    opacity: 0.72;
}

html[data-theme="dark"] .hero-feature-glow {
    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.20),
            transparent 68%
        );

    filter: blur(24px);
}

/*
 * Gornji dio kartice.
 */
html[data-theme="dark"] .hero-live-label {
    color: #bae6fd;
}

html[data-theme="dark"] .hero-station-logo {
    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.16),
            rgba(99, 102, 241, 0.15)
        );

    border:
        1px solid rgba(56, 189, 248, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .hero-station-info > span {
    color: #7dd3fc;
}

html[data-theme="dark"] .hero-station-info h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .hero-station-info p {
    color: #94a3b8;
}

/*
 * Unutrašnji mini player istaknute stanice.
 */
html[data-theme="dark"] .hero-player {
    background:
        rgba(2, 8, 23, 0.48);

    border:
        1px solid rgba(148, 163, 184, 0.16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .hero-play-button {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.24);
}

html[data-theme="dark"] .hero-play-button:hover {
    box-shadow:
        0 18px 38px rgba(14, 165, 233, 0.34);
}

html[data-theme="dark"] .hero-player-info strong {
    color: #f8fafc;
}

html[data-theme="dark"] .hero-player-info span {
    color: #94a3b8;
}

html[data-theme="dark"] .hero-wave span {
    background:
        linear-gradient(
            180deg,
            #67e8f9,
            #38bdf8
        );
}

/*
 * Link ispod istaknute stanice.
 */
html[data-theme="dark"] .hero-station-link {
    color: #7dd3fc;
}

html[data-theme="dark"] .hero-station-link:hover {
    color: #ffffff;
}

/*
 * Stanje kada nema istaknute stanice.
 */
html[data-theme="dark"] .hero-empty-station {
    color: #f8fafc;

    background:
        rgba(15, 29, 48, 0.84);

    border-color:
        rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .hero-empty-station p {
    color: #94a3b8;
}

/*
 * Mobilni prikaz – zadržava se tamna pozadina
 * i smanjuje jačina pozadinskog sjaja.
 */
@media (max-width: 700px) {
    html[data-theme="dark"] .hero-section {
        background:
            radial-gradient(
                circle at 20% 8%,
                rgba(14, 165, 233, 0.15),
                transparent 30%
            ),
            linear-gradient(
                160deg,
                #07111f,
                #0d1a2b
            );
    }

    html[data-theme="dark"] .hero-content h1 {
        text-shadow:
            0 8px 28px rgba(0, 0, 0, 0.30);
    }

    html[data-theme="dark"] .hero-feature-card {
        box-shadow:
            0 22px 55px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

/* ==========================================================================
   DARK THEME – STATION CARDS v1.0 START
   ========================================================================== */

/*
 * Statistika platforme iznad sekcija.
 */
html[data-theme="dark"] .platform-stats {
    background:
        linear-gradient(
            180deg,
            #0a1626,
            #0d1a2b
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.10);

    border-bottom:
        1px solid rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .platform-stats-grid {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.96),
            rgba(17, 31, 52, 0.92)
        );

    border:
        1px solid rgba(148, 163, 184, 0.18);

    border-radius: 24px;

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .platform-stats article {
    border-color:
        rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .platform-stats strong {
    color: #f8fafc;
}

html[data-theme="dark"] .platform-stats span {
    color: #94a3b8;
}

/*
 * Pozadina sekcije sa istaknutim i najnovijim stanicama.
 */
html[data-theme="dark"] .public-section-soft {
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(99, 102, 241, 0.10),
            transparent 32%
        ),
        linear-gradient(
            155deg,
            #07111f,
            #0d1a2b
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.10);

    border-bottom:
        1px solid rgba(148, 163, 184, 0.10);
}

/*
 * Naslov i opis sekcije.
 */
html[data-theme="dark"] .section-eyebrow {
    color: #38bdf8;

    text-shadow:
        0 0 22px rgba(56, 189, 248, 0.22);
}

html[data-theme="dark"] .section-heading h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .section-heading p {
    color: #94a3b8;
}

html[data-theme="dark"] .section-link {
    color: #7dd3fc;
}

html[data-theme="dark"] .section-link:hover {
    color: #ffffff;
}

/*
 * Horizontalne Latest / Featured kartice.
 */
html[data-theme="dark"] .latest-station-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.96),
            rgba(17, 31, 52, 0.92)
        );

    border:
        1px solid rgba(148, 163, 184, 0.17);

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .latest-station-card:hover {
    border-color:
        rgba(56, 189, 248, 0.36);

    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(14, 165, 233, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/*
 * Istaknuta kartica dobija blagi cyan sjaj.
 */
html[data-theme="dark"] .featured-station-card {
    background:
        linear-gradient(
            145deg,
            rgba(15, 31, 52, 0.98),
            rgba(20, 32, 57, 0.94)
        );

    border-color:
        rgba(56, 189, 248, 0.20);
}

html[data-theme="dark"] .featured-station-card:hover {
    border-color:
        rgba(56, 189, 248, 0.42);
}

/*
 * Logo stanice.
 */
html[data-theme="dark"] .latest-station-card__logo {
    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.13),
            rgba(99, 102, 241, 0.15)
        );

    border:
        1px solid rgba(148, 163, 184, 0.14);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .latest-station-card__logo img {
    filter:
        drop-shadow(
            0 8px 16px rgba(0, 0, 0, 0.24)
        );
}

/*
 * Naziv, žanr i tehnički podaci.
 */
html[data-theme="dark"] .latest-station-card__title {
    color: #f8fafc;
}

html[data-theme="dark"] .latest-station-card__title a:hover {
    color: #7dd3fc;
}

html[data-theme="dark"] .latest-station-card__meta {
    color: #94a3b8;
}

html[data-theme="dark"] .genre-badge {
    color: #bae6fd;

    background:
        rgba(56, 189, 248, 0.10);

    border:
        1px solid rgba(56, 189, 248, 0.18);
}

/*
 * Now Playing.
 */
html[data-theme="dark"] .latest-station-card__now-playing {
    color: #7dd3fc;
}

html[data-theme="dark"] .latest-station-card__now-playing-icon {
    filter:
        drop-shadow(
            0 0 7px rgba(56, 189, 248, 0.34)
        );
}

/*
 * Status stanice.
 */
html[data-theme="dark"] .latest-station-card__status {
    color: #94a3b8;
}

html[data-theme="dark"]
.latest-station-card__status-dot.is-online {
    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 16px rgba(34, 197, 94, 0.30);
}

/*
 * Play dugme dok stanica nije aktivna.
 */
html[data-theme="dark"]
.latest-station-card__play-button {
    color: #7dd3fc;

    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.10),
            rgba(99, 102, 241, 0.13)
        );

    border:
        1px solid rgba(56, 189, 248, 0.16);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"]
.latest-station-card__play-button:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.18),
            rgba(99, 102, 241, 0.22)
        );

    border-color:
        rgba(56, 189, 248, 0.34);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.26),
        0 0 24px rgba(14, 165, 233, 0.10);
}

/*
 * Aktivna stanica.
 */
html[data-theme="dark"]
.latest-station-card__play-button.is-playing {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border-color:
        rgba(103, 232, 249, 0.42);

    box-shadow:
        0 15px 34px rgba(14, 165, 233, 0.26);
}

/*
 * Premium uspravne kartice na ostalim stranicama.
 */
html[data-theme="dark"]
.station-grid .station-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.96),
            rgba(17, 31, 52, 0.92)
        );

    border-color:
        rgba(148, 163, 184, 0.17);

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"]
.station-grid .station-card:hover {
    border-color:
        rgba(56, 189, 248, 0.36);

    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.36),
        0 0 34px rgba(14, 165, 233, 0.08);
}

html[data-theme="dark"]
.station-grid .station-card-image {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(56, 189, 248, 0.13),
            transparent 54%
        ),
        linear-gradient(
            145deg,
            rgba(9, 19, 33, 0.96),
            rgba(16, 31, 52, 0.94)
        );

    border-bottom:
        1px solid rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"]
.station-grid .station-card-image img {
    filter:
        drop-shadow(
            0 14px 24px rgba(0, 0, 0, 0.32)
        );
}

html[data-theme="dark"]
.station-grid .station-card-image .station-status {
    color: #cbd5e1;

    background:
        rgba(15, 29, 48, 0.82);

    border-color:
        rgba(148, 163, 184, 0.18);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"]
.station-grid .station-card h3 {
    color: #f8fafc;
}

html[data-theme="dark"]
.station-grid .station-card h3 a:hover {
    color: #7dd3fc;
}

html[data-theme="dark"]
.station-grid .station-card p {
    color: #94a3b8;
}

html[data-theme="dark"]
.station-grid .station-card p::before {
    color: #7dd3fc;

    background:
        rgba(56, 189, 248, 0.11);
}

html[data-theme="dark"]
.station-grid
.station-card-footer
.station-play-button {
    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #6366f1
        );

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.24);
}

html[data-theme="dark"]
.station-grid
.station-card-footer
.station-play-button:hover {
    box-shadow:
        0 18px 38px rgba(14, 165, 233, 0.34);
}

html[data-theme="dark"]
.station-grid
.station-card-footer
.station-play-button.is-playing {
    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #67e8f9
        );
}

/*
 * Empty state.
 */
html[data-theme="dark"] .public-empty-state {
    color: #f8fafc;

    background:
        rgba(15, 29, 48, 0.92);

    border-color:
        rgba(148, 163, 184, 0.17);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .public-empty-state p {
    color: #94a3b8;
}

/*
 * Mobilni prikaz.
 */
@media (max-width: 640px) {
    html[data-theme="dark"] .latest-station-card {
        border-radius: 20px;

        box-shadow:
            0 15px 38px rgba(0, 0, 0, 0.25);
    }

    html[data-theme="dark"]
    .latest-station-card__play-button {
        width: 124px;
    }

    html[data-theme="dark"]
    .platform-stats-grid {
        border-radius: 20px;
    }
}

/* ==========================================================================
   DARK THEME – STATION CARDS v1.0 END
   ========================================================================== */

/* ==========================================================================
   DARK THEME – STATION PAGE v1.0 START
   ========================================================================== */

/*
 * Glavna pozadina sadržaja stranice stanice.
 */
html[data-theme="dark"] .station-content-section {
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(99, 102, 241, 0.10),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            #07111f,
            #0d1a2b
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.10);

    border-bottom:
        1px solid rgba(148, 163, 184, 0.10);
}

/*
 * Glavne sadržajne i bočne kartice.
 */
html[data-theme="dark"] .station-content-card,
html[data-theme="dark"] .station-sidebar-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.97),
            rgba(17, 31, 52, 0.93)
        );

    border:
        1px solid rgba(148, 163, 184, 0.17);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .station-content-card:hover,
html[data-theme="dark"] .station-sidebar-card:hover {
    border-color:
        rgba(56, 189, 248, 0.27);

    box-shadow:
        0 28px 68px rgba(0, 0, 0, 0.36),
        0 0 30px rgba(14, 165, 233, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/*
 * Naslovi kartica i oznake sekcija.
 */
html[data-theme="dark"] .station-card-heading h2,
html[data-theme="dark"] .station-sidebar-card h2 {
    color: #f8fafc;
}

html[data-theme="dark"]
.station-content-section
.section-eyebrow {
    color: #38bdf8;

    text-shadow:
        0 0 20px rgba(56, 189, 248, 0.22);
}

/*
 * LIVE oznaka.
 */
html[data-theme="dark"] .now-playing-live {
    color: #86efac;
}

html[data-theme="dark"] .now-playing-live span {
    background: #22c55e;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.12),
        0 0 18px rgba(34, 197, 94, 0.30);
}

/*
 * Now Playing logo / cover.
 */
html[data-theme="dark"] .now-playing-cover {
    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.13),
            rgba(99, 102, 241, 0.15)
        );

    border:
        1px solid rgba(148, 163, 184, 0.15);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .now-playing-cover img {
    object-fit: contain;

    background:
        rgba(255, 255, 255, 0.04);
}

/*
 * Trenutna pjesma.
 */
html[data-theme="dark"] .now-playing-info span,
html[data-theme="dark"] .now-playing-info small {
    color: #94a3b8;
}

html[data-theme="dark"] .now-playing-info strong {
    color: #f8fafc;
}

/*
 * Play/Pause dugme u Now Playing kartici.
 */
html[data-theme="dark"] .now-playing-button {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border:
        1px solid rgba(103, 232, 249, 0.34);

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

html[data-theme="dark"] .now-playing-button:hover {
    transform: translateY(-1px) scale(1.04);

    box-shadow:
        0 18px 38px rgba(14, 165, 233, 0.34);
}

html[data-theme="dark"]
.now-playing-button.is-playing {
    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #67e8f9
        );
}

/*
 * Opis stanice.
 */
html[data-theme="dark"] .station-description {
    color: #cbd5e1;
}

html[data-theme="dark"] .station-description p {
    color: inherit;
}

/*
 * Informacije u desnoj koloni.
 */
html[data-theme="dark"]
.station-information-list > div {
    border-bottom-color:
        rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"]
.station-information-list dt {
    color: #94a3b8;
}

html[data-theme="dark"]
.station-information-list dd {
    color: #f8fafc;
}

/*
 * Share kartica.
 */
html[data-theme="dark"]
.station-sidebar-card p {
    color: #cbd5e1;
}

html[data-theme="dark"]
.station-sidebar-button {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border:
        1px solid rgba(103, 232, 249, 0.32);

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.22);
}

html[data-theme="dark"]
.station-sidebar-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 18px 38px rgba(14, 165, 233, 0.32);
}

/*
 * Historija pjesama.
 *
 * Postojeću gotovo crnu pozadinu povezujemo
 * s ostatkom navy dizajna.
 */
html[data-theme="dark"] .station-history-card {
    margin-top: 0;

    background:
        rgba(2, 8, 23, 0.48);

    border:
        1px solid rgba(148, 163, 184, 0.15);

    border-radius: 17px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"]
.station-history-card h3 {
    color: #f8fafc;
}

html[data-theme="dark"] .history-item {
    border-bottom-color:
        rgba(148, 163, 184, 0.13);
}

html[data-theme="dark"] .history-time {
    color: #64748b;
}

html[data-theme="dark"] .history-artist {
    color: #f8fafc;
}

html[data-theme="dark"] .history-title {
    color: #94a3b8;
}

html[data-theme="dark"] .history-loading,
html[data-theme="dark"] .history-empty {
    color: #94a3b8;
}

/*
 * Prazna historija.
 */
html[data-theme="dark"]
.station-history-empty {
    color: #94a3b8;

    background:
        rgba(2, 8, 23, 0.38);

    border-color:
        rgba(148, 163, 184, 0.22);
}

/*
 * Hero stranice stanice dodatno povezujemo
 * sa Admin Login dizajnom.
 */
html[data-theme="dark"] .station-detail-hero {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(14, 165, 233, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(99, 102, 241, 0.19),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #07111f,
            #0d1a2b
        );
}

html[data-theme="dark"]
.station-detail-background::after {
    background:
        linear-gradient(
            90deg,
            rgba(7, 17, 31, 0.96),
            rgba(13, 26, 43, 0.74)
        );
}

html[data-theme="dark"]
.station-detail-eyebrow {
    color: #7dd3fc;
}

html[data-theme="dark"]
.station-detail-meta span {
    color: #cbd5e1;

    background:
        rgba(15, 29, 48, 0.68);

    border-color:
        rgba(148, 163, 184, 0.17);
}

html[data-theme="dark"]
.station-detail-intro {
    color: #cbd5e1;
}

/*
 * Glavno Play dugme u Hero dijelu.
 */
html[data-theme="dark"] .station-main-play {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    box-shadow:
        0 16px 34px rgba(14, 165, 233, 0.25);
}

html[data-theme="dark"]
.station-secondary-button {
    color: #e2e8f0;

    background:
        rgba(15, 29, 48, 0.72);

    border-color:
        rgba(148, 163, 184, 0.20);
}

html[data-theme="dark"]
.station-secondary-button:hover {
    color: #ffffff;

    background:
        rgba(30, 46, 69, 0.92);

    border-color:
        rgba(56, 189, 248, 0.32);
}

/*
 * Mobilni prikaz station kartica.
 */
@media (max-width: 700px) {
    html[data-theme="dark"]
    .station-content-card,
    html[data-theme="dark"]
    .station-sidebar-card {
        border-radius: 18px;

        box-shadow:
            0 16px 42px rgba(0, 0, 0, 0.27);
    }

    html[data-theme="dark"]
    .station-history-card {
        padding: 17px;
        border-radius: 15px;
    }
}

@media (max-width: 480px) {
    html[data-theme="dark"]
    .now-playing-content {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            44px;
    }

    html[data-theme="dark"]
    .now-playing-cover {
        width: 58px;
        height: 58px;
        border-radius: 13px;
    }

    html[data-theme="dark"]
    .now-playing-button {
        width: 44px;
        height: 44px;
    }

    html[data-theme="dark"]
    .station-information-list dd {
        max-width: 58%;
    }
}

/* ==========================================================================
   DARK THEME – STATION PAGE v1.0 END
   ========================================================================== */

/* ==========================================================================
   DARK THEME – DIRECTORY & DISCOVERY v1.0 START
   ========================================================================== */

/*
 * Stranice Države i Žanrovi.
 */
html[data-theme="dark"] .directory-page {
    min-height: calc(100vh - 90px);

    padding-top:
        clamp(88px, 7vw, 118px);

    padding-bottom:
        clamp(120px, 10vw, 170px);

    color: #f8fafc;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(14, 165, 233, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 86%,
            rgba(99, 102, 241, 0.14),
            transparent 35%
        ),
        linear-gradient(
            155deg,
            #07111f,
            #0d1a2b
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.10);

    border-bottom:
        1px solid rgba(148, 163, 184, 0.10);
}

/*
 * Zaglavlje directory stranice.
 */
html[data-theme="dark"]
.directory-page-header {
    color: #f8fafc;
}

html[data-theme="dark"]
.directory-page-header .section-eyebrow {
    color: #38bdf8;

    text-shadow:
        0 0 22px rgba(56, 189, 248, 0.24);
}

html[data-theme="dark"]
.directory-page-header h1 {
    color: #f8fafc;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #bae6fd 62%,
            #c7d2fe
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0 12px 38px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"]
.directory-page-header p {
    color: #94a3b8;
}

/*
 * Ikona iznad naslova.
 */
html[data-theme="dark"]
.directory-page-icon {
    color: #7dd3fc;

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.14),
            rgba(99, 102, 241, 0.16)
        );

    border:
        1px solid rgba(56, 189, 248, 0.20);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/*
 * Kartice država i žanrova.
 */
html[data-theme="dark"]
.directory-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.97),
            rgba(17, 31, 52, 0.93)
        );

    border:
        1px solid rgba(148, 163, 184, 0.17);

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"]
.directory-card:hover {
    border-color:
        rgba(56, 189, 248, 0.38);

    box-shadow:
        0 27px 64px rgba(0, 0, 0, 0.36),
        0 0 32px rgba(14, 165, 233, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/*
 * Cijela kartica ostaje klikabilna.
 */
html[data-theme="dark"]
.directory-card__link {
    color: #f8fafc;
}

/*
 * Zastava ili ikona žanra.
 */
html[data-theme="dark"]
.directory-card__icon {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.13),
            rgba(99, 102, 241, 0.15)
        );

    border:
        1px solid rgba(148, 163, 184, 0.15);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 26px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"]
.directory-card__title {
    color: #f8fafc;
}

html[data-theme="dark"]
.directory-card__description {
    color: #94a3b8;
}

/*
 * Broj radio stanica.
 */
html[data-theme="dark"]
.directory-card__count {
    color: #bae6fd;

    background:
        rgba(56, 189, 248, 0.11);

    border:
        1px solid rgba(56, 189, 248, 0.18);
}

/*
 * Strelica kartice.
 */
html[data-theme="dark"]
.directory-card__arrow {
    color: #7dd3fc;

    background:
        rgba(56, 189, 248, 0.08);

    border:
        1px solid rgba(56, 189, 248, 0.14);
}

html[data-theme="dark"]
.directory-card:hover
.directory-card__arrow {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border-color:
        rgba(103, 232, 249, 0.34);

    box-shadow:
        0 10px 24px rgba(14, 165, 233, 0.24);
}

/*
 * Prazno stanje directory stranice.
 */
html[data-theme="dark"]
.directory-placeholder {
    color: #f8fafc;

    background:
        rgba(15, 29, 48, 0.94);

    border-color:
        rgba(148, 163, 184, 0.17);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.29);
}

html[data-theme="dark"]
.directory-placeholder strong {
    color: #f8fafc;
}

html[data-theme="dark"]
.directory-placeholder span {
    color: #94a3b8;
}

html[data-theme="dark"]
.directory-back-button {
    color: #03111c;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #67e8f9
        );

    border-color:
        rgba(103, 232, 249, 0.32);

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.22);
}

/*
 * Donji blok početne:
 *
 * - Popularni žanrovi
 * - Države
 */
html[data-theme="dark"]
.discovery-card {
    color: #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 48, 0.97),
            rgba(17, 31, 52, 0.93)
        );

    border:
        1px solid rgba(148, 163, 184, 0.17);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"]
.discovery-card:hover {
    border-color:
        rgba(56, 189, 248, 0.28);

    box-shadow:
        0 28px 68px rgba(0, 0, 0, 0.36),
        0 0 30px rgba(14, 165, 233, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"]
.discovery-card
.section-heading h2 {
    color: #f8fafc;
}

html[data-theme="dark"]
.discovery-card
.section-eyebrow {
    color: #38bdf8;

    text-shadow:
        0 0 20px rgba(56, 189, 248, 0.22);
}

/*
 * Pojedinačni linkovi žanrova i država.
 */
html[data-theme="dark"]
.discovery-links a {
    color: #e2e8f0;

    background:
        rgba(2, 8, 23, 0.40);

    border:
        1px solid rgba(148, 163, 184, 0.15);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

html[data-theme="dark"]
.discovery-links a:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.16),
            rgba(99, 102, 241, 0.18)
        );

    border-color:
        rgba(56, 189, 248, 0.34);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.23),
        0 0 22px rgba(14, 165, 233, 0.08);

    transform:
        translateY(-2px);
}

html[data-theme="dark"]
.discovery-links a > span:first-child {
    filter:
        drop-shadow(
            0 0 8px rgba(56, 189, 248, 0.22)
        );
}

html[data-theme="dark"]
.discovery-links p {
    color: #94a3b8;
}

/*
 * Search forma na directory stranicama.
 */
html[data-theme="dark"]
.directory-search-form {
    color: #f8fafc;

    background:
        rgba(2, 8, 23, 0.50);

    border-color:
        rgba(148, 163, 184, 0.18);
}

/*
 * Mobilni prikaz.
 */
@media (max-width: 700px) {
    html[data-theme="dark"]
    .directory-page {
        padding-top: 76px;
        padding-bottom: 110px;
    }

    html[data-theme="dark"]
    .directory-page-header h1 {
        font-size:
            clamp(34px, 11vw, 52px);

        line-height: 1.05;
    }

    html[data-theme="dark"]
    .directory-card,
    html[data-theme="dark"]
    .discovery-card {
        border-radius: 20px;

        box-shadow:
            0 16px 42px rgba(0, 0, 0, 0.27);
    }
}

/* ==========================================================================
   DARK THEME – DIRECTORY & DISCOVERY v1.0 END
   ========================================================================== */

/* ==========================================================================
   LIGHT THEME – FINAL POLISH v1.0 START
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Osnovna svijetla pozadina
|--------------------------------------------------------------------------
*/

html[data-theme="light"] body {
    color: #172033;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(91, 77, 245, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(56, 189, 248, 0.07),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            #f8fafc,
            #eef3f9
        );

    background-attachment: fixed;
}

html[data-theme="light"] .public-main {
    background: transparent;
}

html[data-theme="light"] .public-section,
html[data-theme="light"] .public-section-soft,
html[data-theme="light"] .platform-stats,
html[data-theme="light"] .station-content-section,
html[data-theme="light"] .directory-page {
    color: #172033;

    background:
        linear-gradient(
            155deg,
            #f8fafc,
            #eef3f9
        );

    border-color:
        rgba(148, 163, 184, 0.16);
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .site-header {
    color: #172033;

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid rgba(148, 163, 184, 0.20);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .header-search-box {
    color: #172033;

    background:
        rgba(248, 250, 252, 0.94);

    border-color:
        rgba(148, 163, 184, 0.26);
}

html[data-theme="light"] .header-search-box input {
    color: #172033;
}

html[data-theme="light"]
.header-search-box input::placeholder {
    color: #8793a6;
}

/*
|--------------------------------------------------------------------------
| Hero početne stranice
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .hero-section {
    color: #172033;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(91, 77, 245, 0.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(56, 189, 248, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );

    border-bottom:
        1px solid rgba(148, 163, 184, 0.18);
}

html[data-theme="light"] .hero-section::before {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.60),
            transparent 62%
        );
}

html[data-theme="light"] .hero-eyebrow {
    color: #5b4df5;
}

html[data-theme="light"] .hero-content h1 {
    color: #172033;

    background:
        linear-gradient(
            135deg,
            #172033,
            #3730a3 62%,
            #0369a1
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: none;
}

html[data-theme="light"] .hero-content > p {
    color: #64748b;
}

/*
 * Istaknuta stanica u Hero dijelu.
 */
html[data-theme="light"] .hero-feature-card {
    color: #172033;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 250, 252, 0.95)
        );

    border:
        1px solid rgba(148, 163, 184, 0.22);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .hero-feature-card::after {
    background:
        linear-gradient(
            135deg,
            rgba(91, 77, 245, 0.16),
            transparent 44%,
            rgba(56, 189, 248, 0.13)
        );
}

html[data-theme="light"] .hero-feature-glow {
    background:
        radial-gradient(
            circle,
            rgba(91, 77, 245, 0.14),
            transparent 68%
        );
}

html[data-theme="light"] .hero-live-label,
html[data-theme="light"] .hero-station-info > span {
    color: #5b4df5;
}

html[data-theme="light"] .hero-station-info h2 {
    color: #172033;
}

html[data-theme="light"] .hero-station-info p,
html[data-theme="light"] .hero-player-info span {
    color: #64748b;
}

html[data-theme="light"] .hero-player {
    background:
        rgba(238, 242, 255, 0.80);

    border:
        1px solid rgba(91, 77, 245, 0.12);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .hero-player-info strong {
    color: #172033;
}

/*
|--------------------------------------------------------------------------
| Sve glavne kartice
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .platform-stats-grid,
html[data-theme="light"] .latest-station-card,
html[data-theme="light"] .station-grid .station-card,
html[data-theme="light"] .station-content-card,
html[data-theme="light"] .station-sidebar-card,
html[data-theme="light"] .discovery-card,
html[data-theme="light"] .directory-card,
html[data-theme="light"] .directory-placeholder {
    color: #172033;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    border-color:
        rgba(148, 163, 184, 0.21);

    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .latest-station-card:hover,
html[data-theme="light"] .station-grid .station-card:hover,
html[data-theme="light"] .discovery-card:hover,
html[data-theme="light"] .directory-card:hover {
    border-color:
        rgba(91, 77, 245, 0.30);

    box-shadow:
        0 26px 62px rgba(15, 23, 42, 0.13),
        0 0 28px rgba(91, 77, 245, 0.06);
}

/*
 * Naslovi kartica.
 */
html[data-theme="light"]
.latest-station-card__title,
html[data-theme="light"]
.station-grid .station-card h3,
html[data-theme="light"]
.station-card-heading h2,
html[data-theme="light"]
.station-sidebar-card h2,
html[data-theme="light"]
.discovery-card .section-heading h2,
html[data-theme="light"]
.directory-card__title {
    color: #172033;
}

/*
 * Sekundarni tekst.
 */
html[data-theme="light"]
.latest-station-card__meta,
html[data-theme="light"]
.latest-station-card__status,
html[data-theme="light"]
.station-description,
html[data-theme="light"]
.station-sidebar-card p,
html[data-theme="light"]
.directory-card__description,
html[data-theme="light"]
.directory-page-header p {
    color: #64748b;
}

/*
|--------------------------------------------------------------------------
| Popularni žanrovi i Države
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .discovery-links a {
    color: #253047;

    background:
        rgba(248, 250, 252, 0.94);

    border:
        1px solid rgba(148, 163, 184, 0.24);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .discovery-links a:hover {
    color: #4338ca;

    background:
        linear-gradient(
            135deg,
            rgba(238, 242, 255, 0.98),
            rgba(240, 249, 255, 0.98)
        );

    border-color:
        rgba(91, 77, 245, 0.30);

    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.09);
}

/*
|--------------------------------------------------------------------------
| Directory stranice
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .directory-page {
    padding-top:
        clamp(88px, 7vw, 118px);

    padding-bottom:
        clamp(120px, 10vw, 170px);
}

html[data-theme="light"] .directory-page-header h1 {
    color: #172033;

    background:
        linear-gradient(
            135deg,
            #172033,
            #3730a3 64%,
            #0369a1
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: none;
}

html[data-theme="light"] .directory-page-icon,
html[data-theme="light"] .directory-card__icon {
    background:
        linear-gradient(
            145deg,
            #eef2ff,
            #f0f9ff
        );

    border:
        1px solid rgba(91, 77, 245, 0.12);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .directory-card__count {
    color: #5145cd;

    background: #f0edff;

    border:
        1px solid rgba(91, 77, 245, 0.12);
}

html[data-theme="light"] .directory-card__arrow {
    color: #5b4df5;

    background:
        rgba(238, 242, 255, 0.86);

    border:
        1px solid rgba(91, 77, 245, 0.12);
}

html[data-theme="light"]
.directory-card:hover
.directory-card__arrow {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5b4df5,
            #38bdf8
        );
}

/*
|--------------------------------------------------------------------------
| Stranica pojedinačne stanice
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .station-detail-hero {
    color: #172033;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(56, 189, 248, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(91, 77, 245, 0.11),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );
}

html[data-theme="light"]
.station-detail-background::after {
    background:
        linear-gradient(
            90deg,
            rgba(248, 250, 252, 0.97),
            rgba(238, 242, 255, 0.82)
        );
}

html[data-theme="light"]
.station-detail-hero h1 {
    color: #172033;
}

html[data-theme="light"]
.station-detail-eyebrow {
    color: #5b4df5;
}

html[data-theme="light"]
.station-detail-intro {
    color: #64748b;
}

html[data-theme="light"]
.station-detail-meta span {
    color: #334155;

    background:
        rgba(255, 255, 255, 0.74);

    border-color:
        rgba(148, 163, 184, 0.22);
}

html[data-theme="light"]
.station-secondary-button {
    color: #334155;

    background:
        rgba(255, 255, 255, 0.86);

    border-color:
        rgba(148, 163, 184, 0.26);
}

html[data-theme="light"]
.station-secondary-button:hover {
    color: #4338ca;

    background: #f5f3ff;

    border-color:
        rgba(91, 77, 245, 0.28);
}

/*
 * Now Playing i informacije.
 */
html[data-theme="light"] .now-playing-info strong,
html[data-theme="light"] .station-information-list dd {
    color: #172033;
}

html[data-theme="light"] .now-playing-info span,
html[data-theme="light"] .now-playing-info small,
html[data-theme="light"] .station-information-list dt {
    color: #64748b;
}

html[data-theme="light"]
.station-information-list > div {
    border-bottom-color:
        rgba(148, 163, 184, 0.18);
}

/*
|--------------------------------------------------------------------------
| Svijetla historija pjesama
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .station-history-card {
    color: #172033;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border:
        1px solid rgba(148, 163, 184, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .station-history-card h3 {
    color: #172033;
}

html[data-theme="light"] .history-item {
    border-bottom-color:
        rgba(148, 163, 184, 0.17);
}

html[data-theme="light"] .history-time {
    color: #94a3b8;
}

html[data-theme="light"] .history-artist {
    color: #172033;
}

html[data-theme="light"] .history-title {
    color: #64748b;
}

html[data-theme="light"] .history-loading,
html[data-theme="light"] .history-empty {
    color: #64748b;
}

/*
|--------------------------------------------------------------------------
| GLOBAL PLAYER – LIGHT VERSION
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .global-player {
    color: #172033;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 247, 252, 0.98)
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.26);

    box-shadow:
        0 -14px 40px rgba(15, 23, 42, 0.15);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html[data-theme="light"]
.global-player-content {
    color: #172033;
    background: transparent;
}

/*
 * Cover i placeholder.
 */
html[data-theme="light"]
.global-player-cover {
    background: #ffffff;

    border:
        1px solid rgba(148, 163, 184, 0.30);

    box-shadow:
        0 9px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"]
.global-player-cover-placeholder {
    color: #5b4df5;

    background:
        linear-gradient(
            145deg,
            #eef2ff,
            #f0f9ff
        );
}

/*
 * Tekst playera.
 */
html[data-theme="light"]
.global-player-label {
    color: #7c8799;
}

html[data-theme="light"]
.global-player-station strong {
    color: #172033;
}

html[data-theme="light"]
.global-player-station small {
    color: #64748b;
}

/*
 * Favorite i Share kontrole.
 */
html[data-theme="light"]
.global-player-control {
    color: #526078;

    background:
        rgba(241, 245, 249, 0.96);

    border:
        1px solid rgba(148, 163, 184, 0.24);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"]
.global-player-control:hover {
    color: #4338ca;

    background: #eef2ff;

    border-color:
        rgba(91, 77, 245, 0.28);
}

/*
 * Glavno Play/Pause dugme.
 */
html[data-theme="light"]
.global-player-toggle {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5b4df5,
            #38bdf8
        );

    border:
        1px solid rgba(91, 77, 245, 0.20);

    box-shadow:
        0 13px 30px rgba(91, 77, 245, 0.24);
}

html[data-theme="light"]
.global-player-toggle:hover {
    box-shadow:
        0 17px 38px rgba(91, 77, 245, 0.32);
}

/*
 * LIVE oznaka.
 */
html[data-theme="light"]
.global-player-live {
    color: #475569;
}

html[data-theme="light"]
.global-player-live-dot {
    background: #22c55e;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.12),
        0 0 16px rgba(34, 197, 94, 0.24);
}

/*
 * Animacija zvuka.
 */
html[data-theme="light"]
.global-player-wave span {
    background:
        linear-gradient(
            180deg,
            #5b4df5,
            #38bdf8
        );
}

/*
 * Glasnoća.
 */
html[data-theme="light"]
.global-player-volume-icon {
    color: #64748b;
}

html[data-theme="light"]
.global-player-volume {
    accent-color: #5b4df5;
}

/*
 * Close dugme.
 */
html[data-theme="light"]
.global-player-close {
    color: #64748b;

    background:
        rgba(241, 245, 249, 0.92);

    border:
        1px solid rgba(148, 163, 184, 0.20);
}

html[data-theme="light"]
.global-player-close:hover {
    color: #172033;

    background: #e9eef5;
}

/*
 * Greška playera.
 */
html[data-theme="light"]
.global-player.has-error
.global-player-content {
    border-color:
        rgba(240, 68, 56, 0.42);
}

/*
|--------------------------------------------------------------------------
| Mobilni Light prikaz
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {
    html[data-theme="light"]
    .directory-page {
        padding-top: 76px;
        padding-bottom: 110px;
    }

    html[data-theme="light"]
    .global-player {
        background:
            rgba(255, 255, 255, 0.985);
    }

    html[data-theme="light"]
    .global-player-close {
        color: #526078;

        background:
            rgba(241, 245, 249, 0.98);

        box-shadow:
            0 6px 16px rgba(15, 23, 42, 0.13);
    }
}

/* ==========================================================================
   LIGHT THEME – FINAL POLISH v1.0 END
   ========================================================================== */

/* ==========================================================================
   LIGHT THEME – FOOTER v1.0 START
   ========================================================================== */

/*
 * Glavna pozadina footera.
 */
html[data-theme="light"] .site-footer {
    color: #334155;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(91, 77, 245, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(56, 189, 248, 0.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f1f5f9
        );

    border-top:
        1px solid rgba(148, 163, 184, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/*
 * Logo i naziv platforme.
 */
html[data-theme="light"] .footer-logo {
    color: #172033;
}

html[data-theme="light"] .footer-logo strong {
    color: #172033;
}

html[data-theme="light"] .footer-logo small {
    color: #64748b;
}

html[data-theme="light"] .footer-logo-icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5b4df5,
            #7c3aed
        );

    border:
        1px solid rgba(91, 77, 245, 0.18);

    box-shadow:
        0 12px 28px rgba(91, 77, 245, 0.20);
}

/*
 * Opis platforme.
 */
html[data-theme="light"] .footer-brand > p {
    color: #64748b;
}

/*
 * Naslovi footer kolona.
 */
html[data-theme="light"] .footer-column h3 {
    color: #172033;
}

/*
 * Aktivni footer linkovi.
 */
html[data-theme="light"] .footer-column a {
    color: #64748b;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

html[data-theme="light"] .footer-column a:hover {
    color: #4f46e5;

    transform: translateX(3px);
}

/*
 * Link za nasumičnu stanicu.
 */
html[data-theme="light"] .footer-random-link {
    color: #4338ca;

    background:
        linear-gradient(
            135deg,
            rgba(238, 242, 255, 0.96),
            rgba(240, 249, 255, 0.96)
        );

    border:
        1px solid rgba(91, 77, 245, 0.18);

    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .footer-random-link:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5b4df5,
            #38bdf8
        );

    border-color:
        rgba(91, 77, 245, 0.28);

    box-shadow:
        0 15px 32px rgba(91, 77, 245, 0.22);

    transform: translateY(-2px);
}

/*
 * Budući, trenutno neaktivni linkovi.
 */
html[data-theme="light"] .footer-link-disabled {
    color: #94a3b8;
}

html[data-theme="light"] .footer-link-disabled small {
    color: #7c3aed;

    background:
        rgba(124, 58, 237, 0.08);

    border:
        1px solid rgba(124, 58, 237, 0.12);
}

/*
 * Donji copyright dio.
 */
html[data-theme="light"] .footer-bottom {
    color: #64748b;

    border-top:
        1px solid rgba(148, 163, 184, 0.20);
}

html[data-theme="light"] .footer-bottom p {
    color: #64748b;
}

html[data-theme="light"] .footer-studio-link {
    color: #4f46e5;
    font-weight: 700;
}

html[data-theme="light"] .footer-studio-link:hover {
    color: #0369a1;
}

/*
 * Mobilni prikaz.
 */
@media (max-width: 700px) {
    html[data-theme="light"] .site-footer {
        background:
            linear-gradient(
                160deg,
                #ffffff,
                #f1f5f9
            );
    }

    html[data-theme="light"] .footer-bottom {
        text-align: center;
    }
}

/* ==========================================================================
   LIGHT THEME – FOOTER v1.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – BRAND LOGO v1.0 START
   ========================================================================== */

.brand-logo {
    position: relative;

    display: block;
    flex: 0 0 auto;

    width:
        clamp(
            195px,
            17vw,
            250px
        );

    height: 58px;

    padding: 0;
    text-decoration: none;
}

.brand-logo__image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease,
        filter 0.22s ease;
}

/*
 * Svijetla tema prikazuje verziju
 * sa tamnim natpisom.
 */
.brand-logo__image--light {
    opacity: 1;
    visibility: visible;
}

.brand-logo__image--dark {
    opacity: 0;
    visibility: hidden;
}

/*
 * Tamna tema prikazuje verziju
 * sa svijetlim natpisom.
 */
html[data-theme="dark"]
.brand-logo__image--light {
    opacity: 0;
    visibility: hidden;
}

html[data-theme="dark"]
.brand-logo__image--dark {
    opacity: 1;
    visibility: visible;
}

/*
 * Diskretan hover efekat.
 */
.brand-logo:hover
.brand-logo__image {
    transform:
        translateY(-1px)
        scale(1.012);
}

html[data-theme="light"]
.brand-logo:hover
.brand-logo__image--light {
    filter:
        drop-shadow(
            0 8px 14px
            rgba(15, 23, 42, 0.13)
        );
}

html[data-theme="dark"]
.brand-logo:hover
.brand-logo__image--dark {
    filter:
        drop-shadow(
            0 8px 18px
            rgba(56, 189, 248, 0.20)
        );
}

@media (max-width: 1250px) {
    .brand-logo {
        width: 210px;
        height: 54px;
    }
}

@media (max-width: 700px) {
    .brand-logo {
        width: 168px;
        height: 47px;
    }
}

@media (max-width: 420px) {
    .brand-logo {
        width: 148px;
        height: 43px;
    }
}

/* ==========================================================================
   RADIO PLATFORM – BRAND LOGO v1.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – AJAX SEARCH v1.0 START
   ========================================================================== */

.header-search-results {
    top: calc(100% + 10px);

    max-height: min(70vh, 520px);

    overflow-x: hidden;
    overflow-y: auto;

    color: #172033;

    background:
        rgba(255, 255, 255, 0.985);

    border:
        1px solid
        rgba(148, 163, 184, 0.24);

    border-radius: 18px;

    box-shadow:
        0 22px 60px
        rgba(15, 23, 42, 0.18);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    z-index: 1600;

    transform-origin: top center;
}

.header-search-results.is-open {
    display: block;

    animation:
        ajaxSearchDropdownIn
        0.18s ease-out both;
}

@keyframes ajaxSearchDropdownIn {
    from {
        opacity: 0;

        transform:
            translateY(-7px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

.ajax-search-result {
    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 13px;

    min-height: 70px;

    padding: 10px 14px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(148, 163, 184, 0.16);

    transition:
        color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.ajax-search-result:hover,
.ajax-search-result:focus-visible,
.ajax-search-result.is-active {
    color: #4338ca;

    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.11),
            rgba(14, 165, 233, 0.06)
        );

    outline: none;
}

.ajax-search-result:hover {
    transform:
        translateX(2px);
}

.ajax-search-result__logo {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(99, 102, 241, 0.13),
            rgba(14, 165, 233, 0.10)
        );

    border:
        1px solid
        rgba(99, 102, 241, 0.15);

    border-radius: 14px;
}

.ajax-search-result__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ajax-search-result__fallback {
    font-size: 23px;

    line-height: 1;
}

.ajax-search-result__body {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 3px;
}

.ajax-search-result__title {
    overflow: hidden;

    color: #172033;

    font-size: 14px;
    font-weight: 750;

    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ajax-search-result:hover
.ajax-search-result__title,
.ajax-search-result:focus-visible
.ajax-search-result__title,
.ajax-search-result.is-active
.ajax-search-result__title {
    color: #4338ca;
}

.ajax-search-result__meta {
    overflow: hidden;

    color: #657188;

    font-size: 12px;

    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ajax-search-result__genre {
    overflow: hidden;

    color: #7c3aed;

    font-size: 11px;
    font-weight: 650;

    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ajax-search-result__arrow {
    color: #8b95a8;

    font-size: 25px;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ajax-search-result:hover
.ajax-search-result__arrow,
.ajax-search-result:focus-visible
.ajax-search-result__arrow,
.ajax-search-result.is-active
.ajax-search-result__arrow {
    color: #4f46e5;

    transform:
        translateX(3px);
}

.ajax-search-all-results {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 16px;

    color: #4338ca;

    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.09),
            rgba(14, 165, 233, 0.06)
        );

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.ajax-search-all-results:hover,
.ajax-search-all-results:focus-visible,
.ajax-search-all-results.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #6155e7,
            #168fd6
        );

    outline: none;
}

.ajax-search-all-results span {
    font-size: 18px;
}

.ajax-search-message {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 74px;

    padding: 18px;

    color: #657188;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.ajax-search-message--loading::before {
    width: 16px;
    height: 16px;

    margin-right: 9px;

    content: "";

    border:
        2px solid
        rgba(99, 102, 241, 0.20);

    border-top-color: #6366f1;

    border-radius: 50%;

    animation:
        ajaxSearchSpinner
        0.75s linear infinite;
}

.ajax-search-message--error {
    color: #c2414b;

    background:
        rgba(239, 68, 68, 0.06);
}

.ajax-search-message--hint {
    color: #6d5bd0;
}

@keyframes ajaxSearchSpinner {
    to {
        transform: rotate(360deg);
    }
}

/*
 * Dark tema.
 */
html[data-theme="dark"]
.header-search-results {
    color: #e8eef9;

    background:
        rgba(9, 16, 30, 0.985);

    border-color:
        rgba(148, 163, 184, 0.18);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"]
.ajax-search-result {
    border-bottom-color:
        rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"]
.ajax-search-result:hover,
html[data-theme="dark"]
.ajax-search-result:focus-visible,
html[data-theme="dark"]
.ajax-search-result.is-active {
    color: #7dd3fc;

    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.18),
            rgba(14, 165, 233, 0.10)
        );
}

html[data-theme="dark"]
.ajax-search-result__title {
    color: #f2f6ff;
}

html[data-theme="dark"]
.ajax-search-result:hover
.ajax-search-result__title,
html[data-theme="dark"]
.ajax-search-result:focus-visible
.ajax-search-result__title,
html[data-theme="dark"]
.ajax-search-result.is-active
.ajax-search-result__title {
    color: #7dd3fc;
}

html[data-theme="dark"]
.ajax-search-result__meta {
    color: #9da9bc;
}

html[data-theme="dark"]
.ajax-search-result__genre {
    color: #c4b5fd;
}

html[data-theme="dark"]
.ajax-search-result__logo {
    background:
        linear-gradient(
            145deg,
            rgba(99, 102, 241, 0.23),
            rgba(14, 165, 233, 0.14)
        );

    border-color:
        rgba(125, 211, 252, 0.13);
}

html[data-theme="dark"]
.ajax-search-all-results {
    color: #a5e7ff;

    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.18),
            rgba(14, 165, 233, 0.11)
        );
}

html[data-theme="dark"]
.ajax-search-message {
    color: #a9b4c6;
}

html[data-theme="dark"]
.ajax-search-message--hint {
    color: #c4b5fd;
}

html[data-theme="dark"]
.ajax-search-message--error {
    color: #fda4af;

    background:
        rgba(239, 68, 68, 0.09);
}

/*
 * Mobilni prikaz.
 */
@media (max-width: 700px) {
    .header-search-results {
        top: calc(100% + 8px);

        max-height:
            min(
                62vh,
                430px
            );

        border-radius: 15px;
    }

    .ajax-search-result {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;

        min-height: 64px;

        gap: 11px;

        padding: 9px 11px;
    }

    .ajax-search-result__logo {
        width: 44px;
        height: 44px;

        border-radius: 12px;
    }

    .ajax-search-result__title {
        font-size: 13px;
    }

    .ajax-search-result__meta,
    .ajax-search-result__genre {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-search-results.is-open,
    .ajax-search-message--loading::before {
        animation: none;
    }

    .ajax-search-result,
    .ajax-search-result__arrow {
        transition: none;
    }
}

/* ==========================================================================
   RADIO PLATFORM – AJAX SEARCH v1.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – PROFESSIONAL NAVIGATION v2.0 START
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Desktop navigacija
|--------------------------------------------------------------------------
*/

.main-nav {
    position: relative;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 5px;

    background:
        rgba(248, 250, 252, 0.90);

    border:
        1px solid
        rgba(148, 163, 184, 0.22);

    border-radius: 999px;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.06),
        inset 0 1px 0
        rgba(255, 255, 255, 0.70);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/*
 * Osnovni izgled navigacijskog linka.
 */
.main-nav a {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0
        14px;

    overflow: hidden;

    color: #637086;

    background: transparent;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 720;

    line-height: 1;

    letter-spacing: 0.012em;

    text-decoration: none;

    transform:
        translateY(0);

    transition:
        color 0.20s ease,
        background 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.20s ease;
}

/*
 * Diskretan svjetlosni prelaz kroz link.
 */
.main-nav a::before {
    position: absolute;
    inset: 0;

    z-index: -1;

    content: "";

    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255, 255, 255, 0.46) 48%,
            transparent 80%
        );

    opacity: 0;

    transform:
        translateX(-70%);

    transition:
        opacity 0.22s ease,
        transform 0.42s ease;
}

/*
 * Postojeću donju liniju pretvaramo
 * u mali profesionalni indikator.
 */
.main-nav a::after {
    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 4px;
    height: 4px;

    content: "";

    background:
        currentColor;

    border-radius: 50%;

    opacity: 0;

    transform:
        translateX(-50%)
        scale(0);

    transition:
        opacity 0.20s ease,
        transform 0.20s ease;
}

.main-nav a:hover {
    color: #5145cd;

    background:
        rgba(99, 102, 241, 0.09);

    box-shadow:
        0 7px 16px
        rgba(79, 70, 229, 0.10);

    transform:
        translateY(-1px);
}

.main-nav a:hover::before {
    opacity: 1;

    transform:
        translateX(70%);
}

/*
 * Trenutno aktivna stranica.
 */
.main-nav a.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            115deg,
            #6357e8 0%,
            #4f46d8 50%,
            #168fd6 100%
        );

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, 0.25),
        inset 0 1px 0
        rgba(255, 255, 255, 0.20);

    transform:
        translateY(-1px);
}

.main-nav a.is-active::after {
    opacity: 0.85;

    transform:
        translateX(-50%)
        scale(1);
}

/*
 * Fokus za korisnike tastature.
 */
.main-nav a:focus-visible {
    outline:
        3px solid
        rgba(99, 102, 241, 0.28);

    outline-offset: 2px;
}

/*
|--------------------------------------------------------------------------
| Dark tema
|--------------------------------------------------------------------------
*/

html[data-theme="dark"]
.main-nav {
    background:
        rgba(14, 23, 40, 0.86);

    border-color:
        rgba(148, 163, 184, 0.15);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.30),
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"]
.main-nav a {
    color: #aab5c8;
}

html[data-theme="dark"]
.main-nav a:hover {
    color: #8be2ff;

    background:
        rgba(56, 189, 248, 0.10);

    box-shadow:
        0 8px 20px
        rgba(14, 165, 233, 0.10);
}

html[data-theme="dark"]
.main-nav a.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            115deg,
            #675bea 0%,
            #4f46d8 45%,
            #087fc4 100%
        );

    box-shadow:
        0 9px 24px
        rgba(37, 99, 235, 0.28),
        inset 0 1px 0
        rgba(255, 255, 255, 0.16);
}

/*
|--------------------------------------------------------------------------
| Hamburger dugme
|--------------------------------------------------------------------------
*/

.mobile-menu-toggle {
    overflow: hidden;

    background:
        rgba(248, 250, 252, 0.88);

    border:
        1px solid
        rgba(148, 163, 184, 0.25);

    border-radius: 13px;

    box-shadow:
        0 8px 20px
        rgba(15, 23, 42, 0.08);

    transition:
        background 0.20s ease,
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.20s ease;
}

.mobile-menu-toggle:hover {
    background:
        rgba(99, 102, 241, 0.10);

    border-color:
        rgba(99, 102, 241, 0.28);

    box-shadow:
        0 9px 22px
        rgba(79, 70, 229, 0.15);

    transform:
        translateY(-1px);
}

.mobile-menu-toggle.is-active {
    background:
        linear-gradient(
            135deg,
            #6357e8,
            #168fd6
        );

    border-color: transparent;

    box-shadow:
        0 10px 24px
        rgba(79, 70, 229, 0.27);
}

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line {
    background: #ffffff;
}

html[data-theme="dark"]
.mobile-menu-toggle {
    background:
        rgba(15, 25, 43, 0.90);

    border-color:
        rgba(148, 163, 184, 0.18);

    box-shadow:
        0 9px 24px
        rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"]
.mobile-menu-toggle:hover {
    background:
        rgba(56, 189, 248, 0.11);

    border-color:
        rgba(56, 189, 248, 0.24);
}

/*
|--------------------------------------------------------------------------
| Mobilna navigacija
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .main-nav {
        gap: 6px;

        padding: 10px;

        background:
            rgba(255, 255, 255, 0.985);

        border:
            1px solid
            rgba(148, 163, 184, 0.22);

        border-radius: 19px;

        box-shadow:
            0 22px 55px
            rgba(15, 23, 42, 0.18);

        transform-origin:
            top right;
    }

    .main-nav.is-open {
        animation:
            radioPlatformMobileMenuIn
            0.22s ease-out both;
    }

    .main-nav a {
        justify-content:
            flex-start;

        width: 100%;
        min-height: 46px;

        padding:
            0
            16px;

        border-radius: 13px;

        font-size: 14px;
    }

    .main-nav a:hover {
        transform:
            translateX(3px);
    }

    /*
     * Na mobilnom se indikator prikazuje desno.
     */
    .main-nav a::after {
        left: auto;
        right: 14px;
        bottom: 50%;

        width: 6px;
        height: 6px;

        transform:
            translateY(50%)
            scale(0);
    }

    .main-nav a.is-active::after {
        transform:
            translateY(50%)
            scale(1);
    }

    html[data-theme="dark"]
    .main-nav {
        background:
            rgba(9, 17, 31, 0.985);

        border-color:
            rgba(148, 163, 184, 0.16);

        box-shadow:
            0 25px 65px
            rgba(0, 0, 0, 0.50);
    }
}

@keyframes radioPlatformMobileMenuIn {
    from {
        opacity: 0;

        transform:
            translateY(-8px)
            scale(0.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Manji mobilni uređaji
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {
    .main-nav {
        padding: 8px;

        border-radius: 17px;
    }

    .main-nav a {
        min-height: 44px;

        padding:
            0
            14px;

        font-size: 13.5px;
    }
}

/*
|--------------------------------------------------------------------------
| Smanjene animacije
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .main-nav.is-open {
        animation: none;
    }

    .main-nav a,
    .main-nav a::before,
    .main-nav a::after,
    .mobile-menu-toggle {
        transition: none;
    }
}

/* ==========================================================================
   RADIO PLATFORM – PROFESSIONAL NAVIGATION v2.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – MOBILE HEADER FIX v1.0 START
   ========================================================================== */

@media (max-width: 900px) {

    /*
    |--------------------------------------------------------------------------
    | Mobilni raspored headera
    |--------------------------------------------------------------------------
    |
    | Prvi red:
    |
    | logo | tema | hamburger
    |
    | Drugi red:
    |
    | AJAX pretraga preko cijele širine
    |
    */

    .site-header .container {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            48px
            48px;

        grid-template-areas:
            "logo theme menu"
            "search search search";

        align-items: center;

        gap:
            12px
            10px;

        width: 100%;

        padding-top: 12px;
        padding-bottom: 14px;
    }

    /*
     * Logo ostaje lijevo i ne gura dugmad.
     */
    .brand-logo {
        grid-area: logo;

        justify-self: start;

        width: min(205px, 100%);
        height: 52px;

        min-width: 0;
    }

    /*
     * Theme dugme stoji desno, odmah uz hamburger.
     */
    .theme-toggle {
        grid-area: theme;

        justify-self: end;

        width: 48px;
        height: 48px;

        margin: 0;

        border-radius: 14px;
    }

    /*
     * Hamburger stoji u istom redu s logom.
     */
    .mobile-menu-toggle {
        grid-area: menu;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        justify-self: end;

        width: 48px;
        height: 48px;

        margin: 0;
        padding: 0;

        border-radius: 14px;
    }

    /*
     * Hamburger linije prilagođene manjem dugmetu.
     */
    .mobile-menu-toggle__line {
        width: 23px;
        height: 2px;
    }

    /*
     * Pretraga zauzima cijeli drugi red.
     */
    .header-search {
        grid-area: search;

        width: 100%;
        max-width: none;

        min-width: 0;

        margin: 0;
    }

    /*
     * Uklanjamo pravougaonu pozadinu oko
     * zaobljenog search inputa.
     */
    .header-search-box,
    html[data-theme="light"]
    .header-search-box,
    html[data-theme="dark"]
    .header-search-box {
        position: relative;

        width: 100%;

        color: inherit;

        background: transparent;

        border: 0;

        border-radius: 999px;

        box-shadow: none;
    }

    .header-search-box:focus-within,
    html[data-theme="light"]
    .header-search-box:focus-within,
    html[data-theme="dark"]
    .header-search-box:focus-within {
        border: 0;

        box-shadow: none;
    }

    /*
     * Search input sada sam nosi cijeli izgled.
     */
    .header-search input {
        width: 100%;
        height: 50px;

        padding:
            0
            18px
            0
            48px;

        border:
            1px solid
            rgba(148, 163, 184, 0.38);

        border-radius: 999px;

        box-shadow:
            0 8px 22px
            rgba(15, 23, 42, 0.08);

        font-size: 14px;
    }

    html[data-theme="light"]
    .header-search input {
        color: #172033;

        background:
            rgba(248, 250, 252, 0.97);

        border-color:
            rgba(148, 163, 184, 0.32);
    }

    html[data-theme="dark"]
    .header-search input {
        color: #e8eef9;

        background:
            rgba(8, 15, 28, 0.82);

        border-color:
            rgba(148, 163, 184, 0.30);

        box-shadow:
            0 10px 28px
            rgba(0, 0, 0, 0.24);
    }

    .header-search input:focus {
        border-color: #6366f1;

        box-shadow:
            0 0 0 4px
            rgba(99, 102, 241, 0.15),
            0 10px 26px
            rgba(15, 23, 42, 0.10);
    }

    html[data-theme="dark"]
    .header-search input:focus {
        border-color: #38bdf8;

        box-shadow:
            0 0 0 4px
            rgba(56, 189, 248, 0.12),
            0 12px 30px
            rgba(0, 0, 0, 0.28);
    }

    .header-search-icon {
        left: 17px;

        font-size: 17px;

        z-index: 2;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobilni navigacijski panel
    |--------------------------------------------------------------------------
    */

    .main-nav {
        position: absolute;

        top: calc(100% + 8px);
        right: 0;
        left: auto;

        display: none;

        flex-direction: column;
        align-items: stretch;

        width:
            min(
                330px,
                calc(100vw - 32px)
            );

        margin: 0;

        z-index: 1700;
    }

    .main-nav.is-open {
        display: flex;
    }

    /*
     * Linkovi ostaju uredno poravnati lijevo.
     */
    .main-nav a {
        width: 100%;

        justify-content: flex-start;

        min-height: 46px;

        padding:
            0
            16px;
    }

    /*
     * Dropdown AJAX rezultata ostaje iznad stranice,
     * ali ispod mobilnog menija.
     */
    .header-search-results {
        left: 0;
        right: 0;

        width: 100%;

        z-index: 1600;
    }
}

/*
|--------------------------------------------------------------------------
| Manji telefoni
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

    .site-header .container {
        grid-template-columns:
            minmax(0, 1fr)
            44px
            44px;

        gap:
            10px
            8px;

        padding-top: 10px;
        padding-bottom: 12px;
    }

    .brand-logo {
        width: min(178px, 100%);
        height: 47px;
    }

    .theme-toggle,
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;

        border-radius: 13px;
    }

    .header-search input {
        height: 48px;

        font-size: 13.5px;
    }

    .main-nav {
        width:
            calc(100vw - 24px);
    }
}

/*
|--------------------------------------------------------------------------
| Vrlo uski telefoni
|--------------------------------------------------------------------------
*/

@media (max-width: 370px) {

    .brand-logo {
        width: 155px;
        height: 43px;
    }

    .site-header .container {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            42px;

        gap: 7px;
    }

    .theme-toggle,
    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   RADIO PLATFORM – MOBILE HEADER FIX v1.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – MOBILE MENU COMPACT v1.0 START
   ========================================================================== */

@media (max-width: 900px) {

    /*
     * Kompaktni panel odmah ispod pretrage.
     */
    .main-nav {
        top: calc(100% + 8px);
        right: 12px;
        left: 12px;

        width: auto;
        height: auto;
        min-height: 0;
        max-height: calc(100vh - 210px);

        justify-content: flex-start;
        align-items: stretch;

        gap: 4px;

        margin: 0;
        padding: 9px;

        overflow-x: hidden;
        overflow-y: auto;

        background:
            rgba(255, 255, 255, 0.99);

        border:
            1px solid
            rgba(148, 163, 184, 0.22);

        border-radius: 18px;

        box-shadow:
            0 22px 60px
            rgba(15, 23, 42, 0.22);

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    html[data-theme="dark"]
    .main-nav {
        background:
            rgba(8, 16, 29, 0.99);

        border-color:
            rgba(148, 163, 184, 0.17);

        box-shadow:
            0 26px 70px
            rgba(0, 0, 0, 0.58);
    }

    /*
     * Uklanjamo veliko vertikalno rastezanje linkova.
     */
    .main-nav a {
        flex:
            0
            0
            auto;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        height: 48px;
        min-height: 48px;
        max-height: 48px;

        margin: 0;
        padding:
            0
            16px;

        border-radius: 12px;

        font-size: 14px;
        font-weight: 700;

        line-height: 1;
    }

    .main-nav a:hover {
        transform:
            translateX(2px);
    }

    /*
     * Aktivni link je uredan i ne zauzima
     * nepotrebno veliki prostor.
     */
    .main-nav a.is-active {
        height: 50px;
        min-height: 50px;
        max-height: 50px;

        box-shadow:
            0 8px 20px
            rgba(79, 70, 229, 0.25);
    }

    /*
     * Mali indikator aktivnog linka.
     */
    .main-nav a::after {
        right: 16px;

        width: 5px;
        height: 5px;
    }

    /*
     * Malo smanjujemo X ikonu otvorenog menija.
     */
    .mobile-menu-toggle.is-active
    .mobile-menu-toggle__line:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg)
            scaleX(0.88);
    }

    .mobile-menu-toggle.is-active
    .mobile-menu-toggle__line:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg)
            scaleX(0.88);
    }
}

@media (max-width: 480px) {

    .main-nav {
        right: 8px;
        left: 8px;

        padding: 8px;

        border-radius: 16px;
    }

    .main-nav a {
        height: 46px;
        min-height: 46px;
        max-height: 46px;

        padding:
            0
            14px;

        font-size: 13.5px;
    }

    .main-nav a.is-active {
        height: 48px;
        min-height: 48px;
        max-height: 48px;
    }
}

/* ==========================================================================
   RADIO PLATFORM – MOBILE MENU COMPACT v1.0 END
   ========================================================================== */


/*
 * ============================================================
 * RADIO PLATFORM – FAVORITES UI v1.0
 * ============================================================
 */

.latest-station-card {
    position: relative;
}

.favorite-toggle {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid
        rgba(125, 190, 255, 0.18);

    border-radius: 12px;

    background:
        rgba(13, 31, 53, 0.72);

    color:
        var(--text-muted, #9ca9ba);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.favorite-toggle:hover {
    transform: translateY(-2px);

    border-color:
        rgba(75, 201, 255, 0.55);

    color:
        #ffffff;

    background:
        rgba(27, 66, 104, 0.82);
}

.favorite-toggle:focus-visible {
    outline:
        2px solid #42c9ff;

    outline-offset:
        3px;
}

.favorite-toggle.is-favorite {
    color:
        #ff5c7a;

    border-color:
        rgba(255, 92, 122, 0.38);

    background:
        rgba(255, 92, 122, 0.10);
}

/*
 * Standardne station kartice.
 */
.latest-station-card > .favorite-toggle {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 3;
}

/*
 * Ostavljamo dovoljno prostora desno od naslova
 * da tekst ne ide ispod srca.
 */
.latest-station-card__content {
    padding-right: 52px;
}

/*
 * HERO
 */
.hero-feature-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-favorite-toggle {
    position: static;
}

/*
 * station.php postojeće veliko dugme.
 */
.station-secondary-button.js-favorite-station.is-favorite {
    border-color:
        rgba(255, 92, 122, 0.40);

    color:
        #ff7891;

    background:
        rgba(255, 92, 122, 0.08);
}

/*
 * Global player.
 */
#globalPlayerFavorite.is-favorite {
    color:
        #ff6a86;
}


/*
 * MOBILE
 */
@media (max-width: 768px) {

    .latest-station-card > .favorite-toggle {
        top: 16px;
        right: 16px;
    }

    .favorite-toggle {
        width: 40px;
        height: 40px;

        font-size: 24px;
    }

    .latest-station-card__content {
        padding-right: 48px;
    }

    .hero-feature-actions {
        gap: 10px;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – FAVORITES CARD LAYOUT v1.2
 * ============================================================
 *
 * Desktop:
 *
 *              ● Online   ♡
 *
 * Favorit je krajnje desno.
 * Status dobiva prostor lijevo od favorita.
 *
 * Mobile postojeći raspored ostaje netaknut.
 */

@media (min-width: 769px) {

    /*
     * Favorit je krajnje desno.
     *
     * Ovaj rule namjerno prepisuje raniji
     * right: 125px testni položaj.
     */
    .latest-station-card > .favorite-toggle {
        top: 18px;
        right: 18px;
    }

    /*
     * ONLINE status pomjeramo lijevo da se
     * nikada ne nalazi ispod favorita.
     */
    .latest-station-card__status {
        margin-right: 58px;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – FAVORITE ICON TOP OFFSET FIX v1
 * ============================================================
 */

@media (min-width: 769px) {

    /*
     * Malo podižemo favorite ikonu na desktopu
     * da bude urednije poravnata uz gornji rub kartice.
     */
    .station-card > .favorite-toggle,
    .latest-station-card > .favorite-toggle,
    .featured-station-card > .favorite-toggle {
        top: 8px;
        right: 18px;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – FAVORITES PAGE v1.0
 * ============================================================
 */

.favorites-page__summary {
    display: flex;
    align-items: center;
    gap: 8px;

    color:
        var(--text-muted, #8fa0b5);

    font-size: 14px;
}

.favorites-page__count {
    min-width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    border:
        1px solid rgba(74, 200, 255, 0.25);

    background:
        rgba(38, 117, 182, 0.12);

    color:
        #4ac8ff;

    font-weight: 800;
}

.favorites-page__status {
    margin-top: 28px;
}

.favorites-page__grid[hidden],
.favorites-page__status[hidden] {
    display: none !important;
}

@media (max-width: 768px) {

    .favorites-page__summary {
        margin-top: 12px;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – PUBLIC USER UI v1.0
 * ============================================================
 */

.public-user-page {
    min-height: 70vh;
}

.public-user-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 480px);

    gap: 70px;

    align-items: center;

    max-width: 1100px;
    margin: 0 auto;
}


.public-user-intro h1 {
    margin:
        10px
        0
        18px;

    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    line-height: 1.08;
}


.public-user-intro > p {
    max-width: 620px;

    color:
        var(
            --text-muted,
            #94a3b8
        );

    font-size: 17px;
    line-height: 1.75;
}


.public-user-benefits {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin-top: 28px;
}


.public-user-benefits span {
    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 600;
}


.public-user-card {
    padding: 30px;

    border:
        1px solid
        rgba(
            94,
            182,
            255,
            0.15
        );

    border-radius: 22px;

    background:
        rgba(
            14,
            29,
            48,
            0.72
        );

    box-shadow:
        0 24px 60px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.public-user-card__header {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 26px;
}


.public-user-card__icon {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 14px;

    background:
        rgba(
            58,
            180,
            255,
            0.11
        );

    font-size: 23px;
}


.public-user-card__header h2 {
    margin: 0;

    font-size: 25px;
}


.public-user-card__header p {
    margin:
        5px
        0
        0;

    color:
        var(
            --text-muted,
            #94a3b8
        );
}


.public-user-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}


.public-user-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.public-user-field label {
    font-size: 14px;
    font-weight: 700;
}


.public-user-field input {
    width: 100%;
    min-height: 48px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(
            120,
            170,
            210,
            0.22
        );

    border-radius: 12px;

    background:
        rgba(
            4,
            15,
            27,
            0.58
        );

    color: inherit;

    font: inherit;

    outline: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.public-user-field input:focus {
    border-color:
        rgba(
            66,
            201,
            255,
            0.72
        );

    box-shadow:
        0 0 0 3px
        rgba(
            66,
            201,
            255,
            0.10
        );
}


.public-user-field small {
    color:
        var(
            --text-muted,
            #8fa0b5
        );

    font-size: 12px;
}


.public-user-primary-button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        22px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1384d5,
            #22aee8
        );

    color: #ffffff;

    font: inherit;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}


.public-user-card__footer {
    margin-top: 24px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            120,
            170,
            210,
            0.14
        );

    text-align: center;

    color:
        var(
            --text-muted,
            #94a3b8
        );

    font-size: 14px;
}


.public-user-card__footer a {
    color: #42c9ff;

    font-weight: 700;

    text-decoration: none;
}


.public-user-message {
    margin-bottom: 22px;

    padding: 14px 16px;

    border-radius: 12px;

    line-height: 1.55;
}


.public-user-message.is-error {
    border:
        1px solid
        rgba(
            255,
            91,
            112,
            0.30
        );

    background:
        rgba(
            255,
            91,
            112,
            0.09
        );

    color: #ff9aaa;
}


.public-user-message.is-success {
    border:
        1px solid
        rgba(
            69,
            212,
            151,
            0.28
        );

    background:
        rgba(
            69,
            212,
            151,
            0.09
        );

    color: #83e8bc;
}


.public-user-success-actions {
    display: flex;
}


.public-user-success-actions
.public-user-primary-button {
    width: 100%;
}


@media (max-width: 860px) {

    .public-user-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 560px) {

    .public-user-card {
        padding: 22px 18px;

        border-radius: 18px;
    }

    .public-user-intro h1 {
        font-size: 34px;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – PUBLIC USER ACCOUNT v1.0
 * ============================================================
 */

.public-user-account-details {
    display: flex;
    flex-direction: column;

    margin-top: 8px;

    border-top:
        1px solid
        rgba(120, 170, 210, 0.14);
}


.public-user-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding:
        15px
        0;

    border-bottom:
        1px solid
        rgba(120, 170, 210, 0.12);
}


.public-user-account-row span {
    color:
        var(--text-muted, #94a3b8);

    font-size: 14px;
}


.public-user-account-row strong {
    text-align: right;

    overflow-wrap: anywhere;
}


.public-user-account-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    margin-top: 25px;
}


.public-user-account-actions form {
    display: flex;
}


.public-user-logout-button {
    width: 100%;
    min-height: 48px;

    border:
        1px solid
        rgba(255, 91, 112, 0.28);

    border-radius: 12px;

    background:
        rgba(255, 91, 112, 0.08);

    color: #ff8fa0;

    font: inherit;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease;
}


.public-user-logout-button:hover {
    background:
        rgba(255, 91, 112, 0.14);

    border-color:
        rgba(255, 91, 112, 0.45);
}


@media (max-width: 560px) {

    .public-user-account-actions {
        grid-template-columns: 1fr;
    }

    .public-user-account-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .public-user-account-row strong {
        text-align: left;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – PUBLIC USER HEADER v1.0
 * ============================================================
 */

.header-user-link {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex: 0 0 auto;

    padding:
        0
        13px;

    border:
        1px solid
        var(--public-border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.68);

    color:
        var(--public-text-soft);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}


.header-user-link:hover {
    color:
        var(--public-primary);

    border-color:
        rgba(91, 77, 245, 0.30);

    background:
        rgba(91, 77, 245, 0.08);

    transform:
        translateY(-1px);
}


.header-user-link.is-active {
    color:
        var(--public-primary);

    border-color:
        rgba(91, 77, 245, 0.30);

    background:
        rgba(91, 77, 245, 0.09);
}


.header-user-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;
}


.header-user-link__text {
    max-width: 110px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/*
 * Srednji desktop:
 * ostavljamo samo ikonu da header ne postane prenatrpan.
 */
@media (
    min-width: 821px
) and (
    max-width: 1180px
) {

    .header-user-link {
        width: 42px;
        padding: 0;
    }

    .header-user-link__text {
        display: none;
    }

}


/*
 * Mobile:
 * kompaktna account ikona uz hamburger/theme kontrole.
 */
@media (max-width: 820px) {

    .header-user-link {
        width: 42px;
        height: 42px;

        min-height: 42px;

        padding: 0;
    }

    .header-user-link__text {
        display: none;
    }

}


/*
 * Dark Theme
 */
html[data-theme="dark"]
.header-user-link {

    background:
        rgba(13, 31, 53, 0.72);

    border-color:
        rgba(125, 190, 255, 0.18);
}


html[data-theme="dark"]
.header-user-link:hover,

html[data-theme="dark"]
.header-user-link.is-active {

    background:
        rgba(74, 160, 255, 0.12);

    border-color:
        rgba(74, 160, 255, 0.30);
}


/*
 * ============================================================
 * RADIO PLATFORM – MOBILE USER HEADER POSITION v1.0
 * ============================================================
 *
 * Mobile raspored:
 *
 * Logo     User   Theme   Hamburger
 * Search
 *
 */

@media (max-width: 820px) {

    .site-header .container {
        display: flex;
        flex-wrap: wrap;

        align-items: center;

        column-gap: 10px;
        row-gap: 12px;
    }


    /*
     * Logo ostaje prvi i zauzima slobodan prostor.
     */
    .site-header .brand-logo {
        order: 1;

        margin-right: auto;
    }


    /*
     * User ikona ide u gornji red.
     */
    .site-header .header-user-link {
        order: 2;

        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;

        flex: 0 0 42px;

        margin: 0;
        padding: 0;
    }


    /*
     * Theme iza user ikone.
     */
    .site-header .theme-toggle {
        order: 3;

        flex: 0 0 auto;
    }


    /*
     * Hamburger zadnji u gornjem redu.
     */
    .site-header .mobile-menu-toggle {
        order: 4;

        flex: 0 0 auto;
    }


    /*
     * Search uvijek ide u svoj puni red ispod.
     */
    .site-header .header-search {
        order: 5;

        flex:
            0
            0
            100%;

        width: 100%;
        max-width: none;

        margin: 0;
    }


    /*
     * Otvoreni hamburger meni ide ispod searcha.
     */
    .site-header .main-nav {
        order: 6;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – DESKTOP HEADER LAYOUT v2.0
 * ============================================================
 *
 * Desktop:
 *
 * LOGO | ŠIRA PRETRAGA | NAV | USER | THEME
 *
 * Mobile ostaje postojeći hamburger layout.
 */


/*
 * Mobilni linkovi su na desktopu skriveni.
 */
.nav-mobile-only {
    display: none;
}


/*
 * ============================================================
 * DESKTOP
 * ============================================================
 */

@media (min-width: 901px) {

    .site-header .container {
        gap: 14px;
    }


    /*
     * Search sada dobija prioritet u headeru.
     */
    .site-header .header-search {
        flex:
            1
            1
            500px;

        width: auto;

        min-width: 280px;
        max-width: 560px;

        margin: 0;
    }


    /*
     * Search rezultat prati širinu search forme.
     */
    .site-header .header-search-box {
        width: 100%;
    }


    .site-header .header-search-results {
        width: 100%;
        min-width: 100%;
    }


    /*
     * Navigacija više ne uzima nepotrebno
     * veliki prostor.
     */
    .site-header .main-nav {
        flex:
            0
            0
            auto;

        gap: 4px;

        width: auto;

        white-space: nowrap;
    }


    .site-header .main-nav > a,
    .site-header .nav-explore > summary {

        min-height: 42px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding:
            0
            10px;

        border-radius: 10px;

        color:
            var(--public-text-soft);

        font-size: 13px;
        font-weight: 700;

        line-height: 1;

        text-decoration: none;

        cursor: pointer;

        transition:
            color 160ms ease,
            background 160ms ease;
    }


    .site-header .main-nav > a:hover,
    .site-header .nav-explore > summary:hover {

        color:
            var(--public-primary);

        background:
            rgba(91, 77, 245, 0.08);
    }


    /*
     * ========================================================
     * ISTRAŽI DROPDOWN
     * ========================================================
     */

    .nav-explore {
        position: relative;

        flex:
            0
            0
            auto;
    }


    /*
     * Uklanjamo browser details marker.
     */
    .nav-explore > summary {
        list-style: none;

        gap: 6px;

        user-select: none;
    }


    .nav-explore > summary::-webkit-details-marker {
        display: none;
    }


    /*
     * Vlastita strelica.
     */
    .nav-explore > summary::after {
        content: "▾";

        display: inline-block;

        margin-top: -2px;

        font-size: 11px;

        transition:
            transform 160ms ease;
    }


    .nav-explore[open] > summary::after {
        transform:
            rotate(180deg);
    }


    /*
     * Aktivna Explore kategorija.
     */
    .nav-explore.is-active > summary,
    .nav-explore[open] > summary {

        color:
            var(--public-primary);

        background:
            rgba(91, 77, 245, 0.08);
    }


    /*
     * Dropdown panel.
     */
    .nav-explore__menu {
        position: absolute;

        top:
            calc(100% + 10px);

        right: 0;

        z-index: 800;

        width: 230px;

        padding: 8px;

        background:
            rgba(255, 255, 255, 0.98);

        border:
            1px solid
            rgba(148, 163, 184, 0.22);

        border-radius: 16px;

        box-shadow:
            0 20px 55px
            rgba(15, 23, 42, 0.16);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }


    .nav-explore__menu a {
        position: relative;

        display: flex;
        align-items: center;

        gap: 10px;

        width: 100%;
        min-height: 44px;

        padding:
            0
            12px;

        border-radius: 11px;

        color:
            var(--public-text-soft);

        font-size: 13px;
        font-weight: 700;

        text-decoration: none;

        transition:
            color 150ms ease,
            background 150ms ease,
            transform 150ms ease;
    }


    .nav-explore__menu a:hover {

        color:
            var(--public-primary);

        background:
            rgba(91, 77, 245, 0.08);

        transform:
            translateX(2px);
    }


    .nav-explore__menu a.is-active {

        color:
            var(--public-primary);

        background:
            rgba(91, 77, 245, 0.10);
    }


    /*
     * Stari main-nav underline ne želimo
     * unutar dropdown panela.
     */
    .nav-explore__menu a::after {
        display: none;
    }


    /*
     * Dark theme dropdown.
     */
    html[data-theme="dark"]
    .nav-explore__menu {

        background:
            rgba(10, 20, 35, 0.98);

        border-color:
            rgba(148, 163, 184, 0.16);

        box-shadow:
            0 24px 65px
            rgba(0, 0, 0, 0.48);
    }

}


/*
 * Malo kompaktniji desktop / laptop.
 */
@media (
    min-width: 901px
) and (
    max-width: 1200px
) {

    .site-header .container {
        gap: 9px;
    }


    .site-header .header-search {
        min-width: 250px;
        max-width: 420px;
    }


    .site-header .main-nav > a,
    .site-header .nav-explore > summary {

        padding:
            0
            8px;

        font-size: 12.5px;
    }

}


/*
 * ============================================================
 * MOBILE / TABLET
 * ============================================================
 */

@media (max-width: 900px) {

    /*
     * Desktop Explore details ne koristimo
     * unutar hamburger menija.
     */
    .nav-explore {
        display: none;
    }


    /*
     * Najnovije / Popularno / Random
     * postaju obične stavke hamburger menija.
     */
    .main-nav .nav-mobile-only {
        display: flex;
    }

}


/*
 * ============================================================
 * RADIO PLATFORM – DESKTOP HEADER LAYOUT v2.1 FIX
 * ============================================================
 */

@media (min-width: 901px) {

    /*
     * Mobilne stavke moraju biti potpuno skrivene
     * na desktop prikazu.
     */
    .site-header
    .main-nav
    > a.nav-mobile-only {

        display: none !important;
    }


    /*
     * Omogućavamo flex elementima da se pravilno
     * smanjuju bez horizontalnog overflowa.
     */
    .site-header .container {
        min-width: 0;
    }


    /*
     * Search dobija više prostora sada kada su
     * Najnovije / Popularno / Random u dropdownu.
     */
    .site-header .header-search {

        flex:
            1
            1
            540px;

        min-width: 360px;
        max-width: 620px;
    }


    .site-header .main-nav {

        flex:
            0
            0
            auto;

        min-width: 0;
    }


    /*
     * User i theme kontrole se ne smiju stiskati.
     */
    .site-header .header-user-link,
    .site-header .theme-toggle {

        flex-shrink: 0;
    }

}


/*
 * Laptop / manji desktop.
 */
@media (
    min-width: 901px
) and (
    max-width: 1250px
) {

    .site-header .header-search {

        min-width: 280px;
        max-width: 460px;
    }

}


/* ==========================================================================
   RADIO PLATFORM – FOOTER v2.0 START
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| Glavni footer
|--------------------------------------------------------------------------
*/

.site-footer {
    position: relative;

    overflow: hidden;

    margin-top: 0;

    padding:
        58px
        0
        0;

    color:
        var(--public-text-soft);

    background:
        linear-gradient(
            180deg,
            #e9eef5 0%,
            #e4eaf3 100%
        );

    border-top:
        1px solid
        rgba(148, 163, 184, 0.16);
}


/*
 * Blagi dekorativni glow.
 */
.site-footer::before {
    content: "";

    position: absolute;

    top: -220px;
    left: -80px;

    width: 520px;
    height: 420px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(91, 77, 245, 0.10) 0%,
            rgba(91, 77, 245, 0.04) 35%,
            transparent 70%
        );
}


/*
 * Drugi glow na desnoj strani.
 */
.site-footer::after {
    content: "";

    position: absolute;

    right: -150px;
    bottom: -240px;

    width: 520px;
    height: 420px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.08) 0%,
            transparent 68%
        );
}


/*
|--------------------------------------------------------------------------
| Dark theme
|--------------------------------------------------------------------------
*/

html[data-theme="dark"]
.site-footer {
    color:
        #8fa0b8;

    background:
        linear-gradient(
            180deg,
            #0c1828 0%,
            #091421 100%
        );

    border-top-color:
        rgba(125, 190, 255, 0.10);
}


/*
|--------------------------------------------------------------------------
| Footer grid
|--------------------------------------------------------------------------
*/

.site-footer .footer-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.45fr)
        repeat(
            3,
            minmax(150px, 0.65fr)
        );

    gap:
        clamp(
            34px,
            5vw,
            72px
        );

    align-items:
        start;

    padding-bottom:
        48px;
}


/*
|--------------------------------------------------------------------------
| Brand dio
|--------------------------------------------------------------------------
*/

.site-footer .footer-brand {
    max-width:
        390px;
}


.site-footer .footer-brand p {
    max-width:
        370px;

    margin:
        0
        0
        22px;

    color:
        var(--public-text-soft);

    font-size:
        14px;

    line-height:
        1.75;
}


html[data-theme="dark"]
.site-footer
.footer-brand p {
    color:
        #8fa0b8;
}


/*
|--------------------------------------------------------------------------
| Stvarni Radio Platform logo
|--------------------------------------------------------------------------
*/

.site-footer
.footer-brand-logo {
    position: relative;

    display: block;

    width:
        235px;

    height:
        66px;

    margin:
        -6px
        0
        20px;

    padding: 0;

    text-decoration: none;
}


.site-footer
.footer-brand-logo__image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position:
        left
        center;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
}


/*
 * Light theme.
 */
.site-footer
.footer-brand-logo__image--light {
    opacity: 1;
    visibility: visible;
}


.site-footer
.footer-brand-logo__image--dark {
    opacity: 0;
    visibility: hidden;
}


/*
 * Dark theme.
 */
html[data-theme="dark"]
.site-footer
.footer-brand-logo__image--light {
    opacity: 0;
    visibility: hidden;
}


html[data-theme="dark"]
.site-footer
.footer-brand-logo__image--dark {
    opacity: 1;
    visibility: visible;
}


/*
 * Logo hover.
 */
.site-footer
.footer-brand-logo:hover
.footer-brand-logo__image {
    transform:
        translateY(-2px)
        scale(1.012);
}


html[data-theme="light"]
.site-footer
.footer-brand-logo:hover
.footer-brand-logo__image--light {
    filter:
        drop-shadow(
            0
            8px
            14px
            rgba(15, 23, 42, 0.12)
        );
}


html[data-theme="dark"]
.site-footer
.footer-brand-logo:hover
.footer-brand-logo__image--dark {
    filter:
        drop-shadow(
            0
            8px
            18px
            rgba(56, 189, 248, 0.18)
        );
}


/*
|--------------------------------------------------------------------------
| Footer kolone
|--------------------------------------------------------------------------
*/

.site-footer
.footer-column {
    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    gap: 3px;
}


.site-footer
.footer-column h3 {
    position: relative;

    margin:
        0
        0
        17px;

    padding-bottom:
        11px;

    color:
        var(--public-text);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        0.01em;
}


html[data-theme="dark"]
.site-footer
.footer-column h3 {
    color:
        #e4edf8;
}


/*
 * Mala header-style linija.
 */
.site-footer
.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 28px;
    height: 2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--public-primary),
            rgba(56, 189, 248, 0.72)
        );
}


/*
|--------------------------------------------------------------------------
| Footer linkovi
|--------------------------------------------------------------------------
*/

.site-footer
.footer-column > a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height:
        34px;

    padding:
        6px
        9px;

    margin-left:
        -9px;

    border-radius:
        9px;

    color:
        var(--public-text-soft);

    font-size:
        13.5px;

    font-weight:
        600;

    line-height:
        1.2;

    text-decoration: none;

    transition:
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease,
        padding 160ms ease;
}


html[data-theme="dark"]
.site-footer
.footer-column > a {
    color:
        #8fa0b8;
}


/*
 * Strelica je nevidljiva dok nema hovera.
 */
.site-footer
.footer-column > a::after {
    content: "→";

    opacity: 0;

    margin-left:
        1px;

    color:
        var(--public-primary);

    transform:
        translateX(-5px);

    transition:
        opacity 160ms ease,
        transform 160ms ease;
}


/*
 * Hover sličan header navigaciji.
 */
.site-footer
.footer-column > a:hover {
    color:
        var(--public-primary);

    background:
        rgba(91, 77, 245, 0.07);

    transform:
        translateX(3px);
}


.site-footer
.footer-column > a:hover::after {
    opacity: 1;

    transform:
        translateX(0);
}


html[data-theme="dark"]
.site-footer
.footer-column > a:hover {
    color:
        #63c9f4;

    background:
        rgba(56, 189, 248, 0.07);
}


/*
|--------------------------------------------------------------------------
| Nasumična stanica
|--------------------------------------------------------------------------
*/

.site-footer
.footer-random-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height:
        46px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(148, 163, 184, 0.26);

    border-radius:
        13px;

    color:
        var(--public-text);

    background:
        rgba(255, 255, 255, 0.42);

    font-size:
        13px;

    font-weight:
        750;

    text-decoration: none;

    box-shadow:
        0
        8px
        24px
        rgba(15, 23, 42, 0.04);

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}


.site-footer
.footer-random-link:hover {
    color:
        var(--public-primary);

    background:
        rgba(91, 77, 245, 0.08);

    border-color:
        rgba(91, 77, 245, 0.28);

    transform:
        translateY(-2px);

    box-shadow:
        0
        12px
        28px
        rgba(15, 23, 42, 0.08);
}


html[data-theme="dark"]
.site-footer
.footer-random-link {
    color:
        #dce8f5;

    background:
        rgba(18, 36, 58, 0.72);

    border-color:
        rgba(125, 190, 255, 0.14);

    box-shadow:
        none;
}


html[data-theme="dark"]
.site-footer
.footer-random-link:hover {
    color:
        #63c9f4;

    background:
        rgba(56, 189, 248, 0.08);

    border-color:
        rgba(56, 189, 248, 0.25);
}


/*
|--------------------------------------------------------------------------
| Footer bottom
|--------------------------------------------------------------------------
*/

.site-footer
.footer-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    min-height:
        68px;

    padding:
        18px
        0;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.16);
}


.site-footer
.footer-bottom p {
    margin: 0;

    color:
        var(--public-text-soft);

    font-size:
        12px;
}


html[data-theme="dark"]
.site-footer
.footer-bottom p {
    color:
        #718299;
}


/*
|--------------------------------------------------------------------------
| DF Web Studio
|--------------------------------------------------------------------------
*/

.site-footer
.footer-studio-link {
    position: relative;

    color:
        var(--public-text-soft);

    font-weight:
        750;

    text-decoration: none;

    transition:
        color 160ms ease,
        text-shadow 160ms ease;
}


.site-footer
.footer-studio-link:hover {
    color:
        var(--public-primary);

    text-shadow:
        0
        0
        18px
        rgba(91, 77, 245, 0.20);
}


html[data-theme="dark"]
.site-footer
.footer-studio-link:hover {
    color:
        #63c9f4;

    text-shadow:
        0
        0
        18px
        rgba(56, 189, 248, 0.22);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .site-footer
    .footer-grid {
        grid-template-columns:
            minmax(260px, 1.25fr)
            repeat(
                2,
                minmax(150px, 0.75fr)
            );

        gap:
            38px
            30px;
    }


    .site-footer
    .footer-column:last-child {
        grid-column:
            2
            / 4;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .site-footer {
        padding-top:
            42px;
    }


    .site-footer
    .footer-grid {
        grid-template-columns:
            1fr;

        gap:
            34px;

        padding-bottom:
            34px;
    }


    .site-footer
    .footer-column:last-child {
        grid-column:
            auto;
    }


    .site-footer
    .footer-brand {
        max-width:
            none;
    }


    .site-footer
    .footer-brand-logo {
        width:
            205px;

        height:
            58px;
    }


    .site-footer
    .footer-column > a {
        min-height:
            40px;

        font-size:
            14px;
    }


    .site-footer
    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            8px;

        min-height:
            84px;

        padding:
            20px
            0;
    }

}


/*
|--------------------------------------------------------------------------
| Vrlo uski telefoni
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .site-footer
    .footer-brand-logo {
        width:
            185px;

        height:
            53px;
    }


    .site-footer
    .footer-random-link {
        width:
            100%;
    }

}


/* ==========================================================================
   RADIO PLATFORM – FOOTER v2.0 END
   ========================================================================== */


/* ==========================================================================
   RADIO PLATFORM – MOBILE PLATFORM STATS HIDE v1.0
   ========================================================================== */

/*
 * Statistika ostaje vidljiva na desktopu i tabletu,
 * a na mobilnim uređajima je potpuno uklanjamo.
 */

@media (max-width: 768px) {

    .platform-stats {
        display: none !important;
    }

}

/* ==========================================================================
   RADIO PLATFORM – MOBILE PLATFORM STATS HIDE v1.0 END
   ========================================================================== */

/* ==========================================================================
   RADIO PLATFORM – LIGHT AUTH THEME FIX v1.0 START
   ========================================================================== */

/*
 * Ovaj blok utiče ISKLJUČIVO na svijetlu temu.
 *
 * Tamna tema ostaje potpuno netaknuta.
 */


/* --------------------------------------------------------------------------
   Aktivna navigacijska stavka
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.main-nav a.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5b4df5 0%,
            #754df7 100%
        );

    box-shadow:
        0 8px 20px
        rgba(91, 77, 245, 0.22);
}

html[data-theme="light"]
.main-nav a.is-active:hover {
    color: #ffffff;
}

html[data-theme="light"]
.main-nav a.is-active::after {
    background: rgba(255, 255, 255, 0.72);
}


/* --------------------------------------------------------------------------
   Public user / Login / Register stranice
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-page {
    color: #172033;
}


/*
 * Glavni Login / Register panel.
 */

html[data-theme="light"]
.public-user-card {
    color: #172033;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    border-color:
        rgba(148, 163, 184, 0.24);

    box-shadow:
        0 24px 60px
        rgba(15, 23, 42, 0.10);
}


/*
 * Naslovi i tekst unutar panela.
 */

html[data-theme="light"]
.public-user-card h1,
html[data-theme="light"]
.public-user-card h2,
html[data-theme="light"]
.public-user-card h3,
html[data-theme="light"]
.public-user-card strong {
    color: #172033;
}

html[data-theme="light"]
.public-user-card p,
html[data-theme="light"]
.public-user-card small {
    color: #64748b;
}


/* --------------------------------------------------------------------------
   Forme
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-form {
    color: #172033;
}

html[data-theme="light"]
.public-user-field label {
    color: #334155;
}


/*
 * Text / email / password inputi.
 */

html[data-theme="light"]
.public-user-field input[type="text"],
html[data-theme="light"]
.public-user-field input[type="email"],
html[data-theme="light"]
.public-user-field input[type="password"] {
    color: #172033;

    background: #f8fafc;

    border-color:
        rgba(148, 163, 184, 0.34);

    box-shadow:
        inset 0 1px 2px
        rgba(15, 23, 42, 0.03);

    caret-color: #2563eb;
}

html[data-theme="light"]
.public-user-field input::placeholder {
    color: #94a3b8;
}


/*
 * Focus mora biti jasan, ali ne agresivan.
 */

html[data-theme="light"]
.public-user-field input[type="text"]:focus,
html[data-theme="light"]
.public-user-field input[type="email"]:focus,
html[data-theme="light"]
.public-user-field input[type="password"]:focus {
    color: #172033;

    background: #ffffff;

    border-color: #38a9e8;

    box-shadow:
        0 0 0 4px
        rgba(14, 165, 233, 0.12);
}


/* --------------------------------------------------------------------------
   Chrome autofill
   --------------------------------------------------------------------------
 *
 * Chrome inače može sam postaviti žutu/plavu pozadinu
 * spremljenog emaila ili lozinke.
 */

html[data-theme="light"]
.public-user-field input:-webkit-autofill,
html[data-theme="light"]
.public-user-field input:-webkit-autofill:hover,
html[data-theme="light"]
.public-user-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172033;

    box-shadow:
        0 0 0 1000px
        #f8fafc
        inset;

    caret-color: #172033;
}


/* --------------------------------------------------------------------------
   Primarno dugme
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-primary-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #168fe1 0%,
            #24afe2 100%
        );

    box-shadow:
        0 12px 28px
        rgba(14, 165, 233, 0.20);
}

html[data-theme="light"]
.public-user-primary-button:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087fca 0%,
            #159fd4 100%
        );

    transform:
        translateY(-1px);
}


/* --------------------------------------------------------------------------
   Linkovi
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-card a {
    color: #0284c7;
}

html[data-theme="light"]
.public-user-card a:hover {
    color: #0369a1;
}


/* --------------------------------------------------------------------------
   Info / pomoćni tekst
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-field small {
    color: #7c8ba1;
}


/* --------------------------------------------------------------------------
   Poruke
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-message {
    border-color:
        rgba(148, 163, 184, 0.24);

    color: #334155;

    background:
        rgba(241, 245, 249, 0.92);
}

html[data-theme="light"]
.public-user-message.is-success {
    color: #166534;

    border-color:
        rgba(22, 163, 74, 0.24);

    background:
        rgba(220, 252, 231, 0.72);
}

html[data-theme="light"]
.public-user-message.is-error {
    color: #b91c1c;

    border-color:
        rgba(220, 38, 38, 0.22);

    background:
        rgba(254, 226, 226, 0.72);
}


/* --------------------------------------------------------------------------
   Account paneli
   -------------------------------------------------------------------------- */

html[data-theme="light"]
.public-user-account-card,
html[data-theme="light"]
.public-user-account-panel {
    color: #172033;

    background:
        rgba(255, 255, 255, 0.96);

    border-color:
        rgba(148, 163, 184, 0.24);

    box-shadow:
        0 18px 48px
        rgba(15, 23, 42, 0.08);
}


/* ==========================================================================
   RADIO PLATFORM – LIGHT AUTH THEME FIX v1.0 END
   ========================================================================== */

/* ============================================================
   RADIO PLATFORM – PUBLIC LANGUAGE SWITCHER v1.0
   ============================================================ */

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.language-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.language-switcher__link:hover,
.language-switcher__link:focus-visible {
    background: rgba(56, 189, 248, 0.14);
    outline: none;
}

.language-switcher__link.is-active {
    color: #ffffff;
    background: #0284c7;
}

@media (max-width: 760px) {
    .language-switcher {
        order: 4;
    }

    .language-switcher__link {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 0.68rem;
    }
}


/* ============================================================
   RADIO PLATFORM – M6-C PRE-DELIVERY POLISH v1.0
   ============================================================ */

/*
 * Desktop language selector stays in the header.
 * Mobile language controls live inside the hamburger menu.
 */
@media (max-width: 900px) {
    .site-header .language-switcher {
        display: none !important;
    }

    .main-nav > a.nav-language-mobile {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .main-nav > a.nav-language-mobile--first {
        margin-top: 8px;
        padding-top: 14px;
        border-top: 1px solid rgba(148, 163, 184, 0.24);
    }

    .main-nav > a.nav-language-mobile.is-active {
        font-weight: 800;
    }
}

@media (min-width: 901px) {
    .main-nav > a.nav-language-mobile {
        display: none !important;
    }
}

/*
 * Light theme: player/hero equalizer bars must remain visible
 * against the white/light station cards.
 */
html[data-theme="light"] .hero-wave span {
    background: #4f46e5;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.16);
}

html[data-theme="light"] .global-player-wave span {
    background: #2563eb;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
}

/*
 * Hero station details link.
 */
.hero-station-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid rgba(79, 70, 229, 0.25);
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.hero-station-page-link:hover,
.hero-station-page-link:focus-visible {
    border-color: rgba(79, 70, 229, 0.48);
    background: rgba(79, 70, 229, 0.14);
    color: #312e81;
    outline: none;
}

html[data-theme="dark"] .hero-station-page-link {
    border-color: rgba(129, 140, 248, 0.36);
    background: rgba(99, 102, 241, 0.16);
    color: #c7d2fe;
}

/*
 * Station sidebar Top 10 card.
 */
.station-top-list-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.station-top-list-card__heading h2 {
    margin: 3px 0 0;
}

.station-top-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.station-top-list__item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.station-top-list__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.10);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 900;
}

.station-top-list__link {
    display: grid;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.station-top-list__link:hover,
.station-top-list__link:focus-visible {
    background: rgba(99, 102, 241, 0.08);
    outline: none;
}

.station-top-list__name {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-top-list__listeners {
    margin-top: 2px;
    color: var(--text-muted, #64748b);
    font-size: 0.76rem;
}

.station-top-list__all {
    display: inline-flex;
    margin-top: 14px;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

/*
 * Home Most Listened section gets a slight visual break while
 * reusing the existing station-grid renderer.
 */
.public-section-most-listened {
    position: relative;
}

@media (max-width: 640px) {
    .hero-station-page-link {
        width: 100%;
    }
}