/* =====================================================
   POWERFM 1.8C
   STYLE.CSS
   Alle styling uit index.html gehaald
===================================================== */


/* =====================================================
   ROOT
===================================================== */

:root {

    --bg:
        #050b14;

    --bg2:
        #091321;

    --panel:
        #0c1827;

    --panel2:
        #101f32;

    --blue:
        #16a8ff;

    --blue2:
        #006eff;

    --green:
        #35e56c;

    --white:
        #ffffff;

    --text:
        #e9f1fa;

    --muted:
        #8998aa;

    --border:
        rgba(255,255,255,.08);

    --player-art-color:
        rgba(22,168,255,.16);

    --player-art-glow:
        rgba(22,168,255,.36);

    --shadow:
        0 25px 70px rgba(0,0,0,.45);

}


/* =====================================================
   RESET
===================================================== */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:

        radial-gradient(
            circle at 50% -10%,
            rgba(22,168,255,.08),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            var(--bg2),
            var(--bg)
        );

    color:
        var(--text);

    min-height:
        100vh;

}


/* =====================================================
   HEADER
   ALTIJD BOVENAAN
===================================================== */

.header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    width:
        100%;

    z-index:
        1000;

    background:
        rgba(5,11,20,.92);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid var(--border);

}


.header-inner {

    width:
        min(1200px,94%);

    margin:
        auto;

    height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {

    font-size:
        28px;

    font-weight:
        900;

    letter-spacing:
        4px;

    color:
        var(--white);

}


.logo span {

    color:
        var(--blue);

}


.nav {

    display:
        flex;

    gap:
        28px;

}


.nav a {

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    transition:
        color .2s ease;

}


.nav a:hover {

    color:
        var(--blue);

}


.menu-button {

    display:
        none;

    background:
        none;

    border:
        none;

    color:
        white;

    font-size:
        28px;

    cursor:
        pointer;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        70px 20px;

    background:

        radial-gradient(
            circle at center,
            rgba(22,168,255,.08),
            transparent 50%
        );

}


.hero-content {

    max-width:
        850px;

}


.hero-label {

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        4px;

    margin-bottom:
        18px;

}


.hero h1 {

    font-size:
        clamp(45px,9vw,90px);

    line-height:
        .95;

    font-weight:
        900;

    letter-spacing:
        5px;

    text-shadow:
        0 0 15px rgba(22,168,255,.18),
        0 0 40px rgba(22,168,255,.10);

}


.hero h1 span {

    color:
        var(--blue);

}


.hero p {

    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        17px;

}


.hero-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        35px;

    padding:
        16px 30px;

    border-radius:
        50px;

    background:

        linear-gradient(
            135deg,
            var(--blue),
            var(--blue2)
        );

    color:
        white;

    text-decoration:
        none;

    font-weight:
        bold;

    box-shadow:
        0 10px 35px rgba(22,168,255,.20);

    transition:
        transform .2s ease;

}


.hero-button:hover {

    transform:
        translateY(-2px);

}


/* =====================================================
   GENERAL
===================================================== */

.container {

    width:
        min(1100px,94%);

    margin:
        auto;

}


.section {

    padding:
        70px 0;

}


.section-title {

    margin-bottom:
        30px;

}


.section-title small {

    color:
        var(--blue);

    font-size:
        11px;

    letter-spacing:
        3px;

    font-weight:
        bold;

}


.section-title h2 {

    margin-top:
        7px;

    font-size:
        32px;

}


/* =====================================================
   GROTE PLAYER
===================================================== */

.player-section {

    margin-top:
        -40px;

    position:
        relative;

    z-index:
        5;

}


.player {

    position:
        relative;

    background:

        linear-gradient(
            145deg,
            var(--player-art-color),
            rgba(16,31,50,.98) 48%,
            rgba(6,13,23,.98)
        );

    border:
        1px solid var(--border);

    border-radius:
        28px;

    padding:
        28px;

    box-shadow:

        0 0 55px var(--player-art-glow),

        var(--shadow);

    transition:

        background 1.4s ease,

        box-shadow 1.4s ease;

}


.player-grid {

    display:
        grid;

    grid-template-columns:
        300px 1fr;

    gap:
        35px;

    align-items:
        center;

}


/* =====================================================
   COVER
===================================================== */

.cover {

    position:
        relative;

    aspect-ratio:
        1;

    border-radius:
        20px;

    overflow:
        hidden;

    background:
        var(--panel2);

    box-shadow:
        0 0 45px var(--player-art-glow);

    transition:
        box-shadow 1.4s ease;

}


.cover img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

}


/* =====================================================
   ON AIR
===================================================== */

.onair {

    position:
        absolute;

    top:
        18px;

    right:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    background:
        rgba(0,0,0,.78);

    padding:
        8px 12px;

    border-radius:
        30px;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    z-index:
        10;

}


.dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #666;

}


.onair.live .dot {

    background:
        var(--green);

    box-shadow:
        0 0 12px var(--green);

}


/* =====================================================
   TRACK INFO
===================================================== */

.track-status {

    color:
        var(--muted);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.track-title {

    font-size:
        clamp(25px,4vw,40px);

    font-weight:
        900;

    margin-top:
        10px;

}


.track-artist {

    color:
        #b7c4d4;

    font-size:
        20px;

    margin-top:
        8px;

}


.track-album {

    color:
        var(--muted);

    font-size:
        13px;

    margin-top:
        6px;

}


/* =====================================================
   CONTROLS
===================================================== */

.controls {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        28px;

}


.control {

    width:
        45px;

    height:
        45px;

    border:
        1px solid var(--border);

    border-radius:
        50%;

    background:
        var(--panel2);

    color:
        white;

    cursor:
        pointer;

}


.play {

    width:
        65px;

    height:
        65px;

    border:
        none;

    background:

        linear-gradient(
            135deg,
            var(--blue),
            var(--blue2)
        );

    box-shadow:
        0 8px 25px rgba(22,168,255,.25);

}


.control svg {

    width:
        20px;

    height:
        20px;

    fill:
        currentColor;

}


.play svg {

    width:
        26px;

    height:
        26px;

}


/* =====================================================
   VOLUME
===================================================== */

.volume {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        22px;

}


.volume input {

    width:
        180px;

    accent-color:
        var(--blue);

}


.volume-percent {

    min-width:
        42px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        bold;

    text-align:
        right;

}


/* =====================================================
   PROGRESS
===================================================== */

.progress-wrapper {

    margin-top:
        20px;

}


.progress {

    height:
        5px;

    background:
        #1b2939;

    border-radius:
        10px;

    overflow:
        hidden;

    cursor:
        pointer;

}


.progress-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--blue);

    border-radius:
        10px;

    transition:
        width .3s linear;

}


.progress-times {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        11px;

    font-variant-numeric:
        tabular-nums;

}


/* =====================================================
   CARDS
===================================================== */

.cards {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        25px;

}


.card {

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        20px;

    padding:
        22px;

}


.card-title {

    color:
        var(--blue);

    font-size:
        11px;

    letter-spacing:
        2px;

    font-weight:
        bold;

    margin-bottom:
        18px;

}


.next-track {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.next-art {

    width:
        60px;

    height:
        60px;

    border-radius:
        10px;

    object-fit:
        cover;

}


.next-name {

    font-weight:
        bold;

}


.next-artist {

    color:
        var(--muted);

    font-size:
        13px;

    margin-top:
        5px;

}


.history-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 0;

    border-bottom:
        1px solid var(--border);

}


.history-item:last-child {

    border-bottom:
        none;

}


.history-art {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    border-radius:
        8px;

    object-fit:
        cover;

    background:
        var(--panel2);

}


.history-info {

    min-width:
        0;

}


.history-title {

    font-size:
        14px;

    font-weight:
        bold;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.history-artist {

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        3px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


/* =====================================================
   VERZOEKPLATEN
===================================================== */

.requests-search {

    margin-bottom:
        20px;

}


.requests-search input {

    width:
        100%;

    padding:
        14px 18px;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        var(--panel);

    color:
        white;

    outline:
        none;

    font-size:
        14px;

}


.requests-search input::placeholder {

    color:
        var(--muted);

}


.requests-search input:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 15px rgba(22,168,255,.12);

}


.requests-grid {

    display:
        grid;

    gap:
        12px;

}


.request-item {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        12px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        14px;

}


.request-art {

    width:
        65px;

    height:
        65px;

    flex:
        0 0 65px;

    border-radius:
        10px;

    object-fit:
        cover;

    background:
        var(--panel2);

}


.request-info {

    min-width:
        0;

    flex:
        1;

}


.request-title {

    font-size:
        15px;

    font-weight:
        bold;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.request-artist {

    color:
        var(--muted);

    font-size:
        13px;

    margin-top:
        5px;

}


.request-button {

    flex:
        0 0 auto;

    padding:
        8px 13px;

    border:
        1px solid var(--blue);

    border-radius:
        20px;

    color:
        var(--blue);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        bold;

    transition:
        all .2s ease;

    cursor:
        pointer;

    white-space:
        nowrap;

}


.request-button:hover {

    background:
        var(--blue);

    color:
        white;

}


.request-disabled {

    opacity:
        .35;

    cursor:
        default;

}


.request-disabled:hover {

    background:
        transparent;

    color:
        var(--blue);

}


/* =====================================================
   REQUEST FOUTMELDING
===================================================== */

.request-error-card {

    color:
        var(--muted);

    text-align:
        center;

}


/* =====================================================
   REQUEST SUCCES / FOUT MELDING
===================================================== */

.request-message {

    width:
        100%;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin:
        0 0 22px 0;

    padding:
        10px 0;

    text-align:
        center;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.5;

    transition:
        opacity .5s ease,
        transform .5s ease;

}


.request-message-line {

    flex:
        1;

    height:
        1px;

    min-width:
        20px;

    background:
        rgba(255,255,255,.25);

}


.request-message-text {

    display:
        block;

    max-width:
        80%;

}


.request-message-success {

    color:
        #5dff9a;

}


.request-message-success
.request-message-line {

    background:
        rgba(0,220,120,.45);

}


.request-message-error {

    color:
        #ff6b6b;

}


.request-message-error
.request-message-line {

    background:
        rgba(255,80,80,.45);

}


.request-message-hide {

    opacity:
        0;

    transform:
        translateY(-5px);

}


.request-pagination {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        25px;

}


.page-button {

    padding:
        9px 16px;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    background:
        var(--panel2);

    color:
        white;

    cursor:
        pointer;

}


.page-button:disabled {

    opacity:
        .35;

    cursor:
        default;

}


.page-info {

    color:
        var(--muted);

    font-size:
        12px;

}


/* =====================================================
   ABOUT
===================================================== */

.about {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        50px;

    align-items:
        center;

}


.about-text p {

    color:
        var(--muted);

    line-height:
        1.8;

    margin-top:
        15px;

}


.about-box {

    min-height:
        280px;

    border-radius:
        25px;

    background:

        radial-gradient(
            circle,
            rgba(22,168,255,.12),
            transparent 60%
        ),

        var(--panel);

    border:
        1px solid var(--border);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.about-box strong {

    font-size:
        42px;

    letter-spacing:
        5px;

}


.about-box img {

    display:
        block;

    width:
        100%;

    max-width:
        500px;

    height:
        auto;

    margin:
        0 auto;

    border-radius:
        16px;

    object-fit:
        contain;

}


/* =====================================================
   NEWS
===================================================== */

.news-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        25px;

}


.news-card {

    display:
        flex;

    gap:
        18px;

    align-items:
        flex-start;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        18px;

    padding:
        22px;

}


.news-image {

    flex:
        0 0 180px;

    width:
        180px;

    height:
        180px;

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        var(--panel2);

}


.news-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    border-radius:
        16px;

}


.news-content {

    flex:
        1;

    min-width:
        0;

}


.news-date {

    color:
        var(--blue);

    font-size:
        11px;

    letter-spacing:
        1px;

}


.news-card h3 {

    margin-top:
        10px;

}


.news-card p {

    color:
        var(--muted);

    line-height:
        1.6;

    margin-top:
        10px;

}


/* =====================================================
   CONTACT
===================================================== */

.contact {

    text-align:
        center;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        25px;

    padding:
        50px 25px;

}


.contact p {

    color:
        var(--muted);

    margin-top:
        12px;

}


.contact-button {

    display:
        inline-block;

    margin-top:
        25px;

    padding:
        13px 25px;

    border:
        1px solid var(--blue);

    border-radius:
        30px;

    color:
        var(--blue);

    text-decoration:
        none;

}


.contact-button:hover {

    background:
        var(--blue);

    color:
        white;

}


/* =====================================================
   MINI PLAYER
===================================================== */

.mini-player {

    position:
        fixed;

    left:
        50%;

    bottom:
        18px;

    transform:
        translate(-50%,20px);

    width:
        min(430px,calc(100% - 28px));

    background:
        rgba(10,20,34,.96);

    backdrop-filter:
        blur(18px);

    border:
        1px solid var(--border);

    border-radius:
        16px;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.5);

    opacity:
        0;

    visibility:
        hidden;

    z-index:
        2000;

    transition:
        opacity .35s ease,
        transform .35s ease;

}


.mini-player.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%,0);

}


.mini-art {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        9px;

    object-fit:
        cover;

}


.mini-info {

    min-width:
        0;

    flex:
        1;

}


.mini-title {

    font-size:
        12px;

    font-weight:
        bold;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.mini-artist {

    color:
        var(--muted);

    font-size:
        10px;

    margin-top:
        3px;

}


.mini-button {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--blue);

    color:
        white;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.mini-button svg {

    width:
        17px;

    height:
        17px;

    fill:
        currentColor;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    margin-top:
        50px;

    border-top:
        1px solid var(--border);

    padding:
        35px 20px;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        12px;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px) {

    .nav {

        display:
            none;

        position:
            absolute;

        top:
            74px;

        left:
            0;

        right:
            0;

        flex-direction:
            column;

        padding:
            20px;

        background:
            #07111f;

        border-bottom:
            1px solid var(--border);

    }


    .nav.open {

        display:
            flex;

    }


    .menu-button {

        display:
            block;

    }


    .player-grid {

        grid-template-columns:
            1fr;

    }


    .cover {

        width:
            min(80vw,330px);

        margin:
            auto;

    }


    .cards {

        grid-template-columns:
            1fr;

    }


    .about {

        grid-template-columns:
            1fr;

    }


    .news-grid {

        grid-template-columns:
            1fr;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:500px) {

    body {

        overflow-x:
            hidden;

    }


    .hero {

        min-height:
            430px;

    }


    .hero h1 {

        font-size:
            43px;

    }


    .player {

        padding:
            18px;

    }


    .onair {

        top:
            12px;

        right:
            14px;

    }


    .player-grid {

        padding-top:
            28px;

    }


    .volume {

        justify-content:
            flex-start;

    }


    .volume input {

        flex:
            1;

        width:
            auto;

    }


    .request-item {

        gap:
            10px;

    }


    .request-art {

        width:
            55px;

        height:
            55px;

        flex-basis:
            55px;

    }


    .request-button {

        padding:
            7px 10px;

    }


    .mini-player {

        width:
            calc(100% - 24px);

        bottom:
            12px;

        padding:
            7px 8px;

    }


    .request-message {

        gap:
            10px;

        font-size:
            13px;

        padding:
            8px 0;

    }


    .request-message-text {

        max-width:
            85%;

    }

}


/* =====================================================
   IPHONE / IOS
   VOLUME SLIDER VERBERGEN
===================================================== */

@supports (-webkit-touch-callout: none) {

    .volume {

        display:
            none;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce) {

    * {

        transition:
            none !important;

    }

}


/* =====================================================
   NIEUWS MOBIEL ALTIJD ONDER ELKAAR
===================================================== */

@media screen and (max-width:700px) {

    .news-grid {

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        gap:
            20px !important;

    }


    .news-card {

        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            none !important;

    }

}


/* =====================================================
   VERZOEKPLATEN MOBIEL
===================================================== */

@media screen and (max-width:700px) {

    #verzoek {

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }


    #verzoek .container {

        width:
            100%;

        max-width:
            100%;

        padding-left:
            15px;

        padding-right:
            15px;

        box-sizing:
            border-box;

    }


    .requests-search {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

    }


    .requests-search input {

        display:
            block;

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;

    }


    .requests-grid {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;

    }


    .request-item {

        max-width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;

    }

}


/* =====================================================
   IPHONE / SAFARI
===================================================== */

html,
body {

    max-width:
        100%;

    overflow-x:
        hidden;

}


@media screen and (max-width:700px) {

    #verzoek {

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            clip;

    }


    #verzoek .container {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

    }


    .requests-search,
    .requests-grid,
    .request-pagination {

        max-width:
            100%;

        box-sizing:
            border-box;

    }


    .requests-search input {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

    }

}


/* =====================================================
   SCREEN READER ONLY
===================================================== */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;

}


/* =====================================================
   POWER FM
   STATION BUTTONS
===================================================== */

.station-buttons {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-top:
        18px;

    width:
        100%;

}


.station-button {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 18px;

    border:
        1px solid rgba(22,168,255,.55);

    border-radius:
        12px;

    background:

        linear-gradient(
            135deg,
            rgba(22,168,255,.22),
            rgba(5,11,20,.95)
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        .5px;

    cursor:
        pointer;

    box-shadow:

        0 0 10px rgba(22,168,255,.12),

        inset 0 0 12px rgba(22,168,255,.05);

    transition:

        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .15s ease;

}


.station-button:hover {

    background:

        linear-gradient(
            135deg,
            rgba(22,168,255,.45),
            rgba(5,11,20,.95)
        );

    border-color:
        #16a8ff;

    box-shadow:

        0 0 16px rgba(22,168,255,.35),

        inset 0 0 14px rgba(22,168,255,.08);

}


.station-button:active {

    transform:
        scale(.98);

}


.station-button.active {

    background:

        linear-gradient(
            135deg,
            #087fc7,
            #064c78
        );

    border-color:
        #16a8ff;

    box-shadow:

        0 0 18px rgba(22,168,255,.45),

        inset 0 0 12px rgba(255,255,255,.08);

}


.station-button span {

    display:
        block;

}


.station-button span:first-child {

    margin-right:
        8px;

}


@media(max-width:600px) {

    .station-buttons {

        gap:
            10px;

        margin-top:
            15px;

    }


    .station-button {

        min-height:
            50px;

        font-size:
            13px;

    }

}


/* =====================================================
   POWER FM NIEUWS
   AFRONDING DEFINITIEF
===================================================== */

.news-card .news-image {

    width:
        100% !important;

    aspect-ratio:
        1 / 1 !important;

    position:
        relative !important;

    overflow:
        hidden !important;

    border-radius:
        18px !important;

    clip-path:
        inset(0 round 18px) !important;

}


.news-card .news-image img {

    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        18px !important;

}


@media(max-width:600px) {

    .news-card .news-image {

        border-radius:
            14px !important;

        clip-path:
            inset(0 round 14px) !important;

    }


    .news-card .news-image img {

        border-radius:
            14px !important;

    }

}


/* =====================================================
   POWER FM NIEUWS
   MOBIEL AFRONDING
===================================================== */

@media screen and (max-width:700px) {

    .news-card .news-image {

        width:
            100% !important;

        height:
            auto !important;

        aspect-ratio:
            1 / 1 !important;

        overflow:
            hidden !important;

        border-radius:
            16px !important;

    }


    .news-card .news-image img {

        width:
            100% !important;

        height:
            100% !important;

        display:
            block !important;

        object-fit:
            contain !important;

        border-radius:
            16px !important;

    }

}


/* =====================================================
   REQUEST MELDING
   MOBIEL EXTRA NETJES
===================================================== */

@media screen and (max-width:600px) {

    .request-message {

        width:
            100%;

        max-width:
            100%;

        overflow:
            hidden;

    }


    .request-message-line {

        min-width:
            15px;

    }


    .request-message-text {

        max-width:
            82%;

        overflow-wrap:
            break-word;

    }

}
/* =====================================================
   POWER FM
   DONKER / LICHT MODUS
===================================================== */


/* =====================================================
   LIGHT THEME VARIABELEN
===================================================== */

html.light-theme {

    --bg:
        #f4f7fb;

    --bg2:
        #ffffff;

    --panel:
        #ffffff;

    --panel2:
        #eef3f8;

    --text:
        #172231;

    --muted:
        #667384;

    --white:
        #172231;

    --border:
        rgba(20,40,60,.12);

    --shadow:
        0 25px 70px rgba(20,40,60,.14);

}


/* =====================================================
   LIGHT THEME BODY
===================================================== */

html.light-theme body {

    background:

        radial-gradient(
            circle at 50% -10%,
            rgba(22,168,255,.10),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #ffffff,
            #eef3f8
        );

    color:
        var(--text);

}


/* =====================================================
   LIGHT THEME HEADER
===================================================== */

html.light-theme .header {

    background:
        rgba(255,255,255,.92);

    border-bottom:
        1px solid rgba(20,40,60,.10);

}


/* =====================================================
   LIGHT THEME NAVIGATIE
===================================================== */

html.light-theme .nav a {

    color:
        #667384;

}


html.light-theme .nav a:hover {

    color:
        var(--blue);

}


/* =====================================================
   LIGHT THEME HERO
===================================================== */

html.light-theme .hero {

    background:

        radial-gradient(
            circle at center,
            rgba(22,168,255,.10),
            transparent 50%
        );

}


html.light-theme .hero p {

    color:
        #667384;

}


/* =====================================================
   LIGHT THEME PLAYER
===================================================== */

html.light-theme .player {

    background:

        linear-gradient(
            145deg,
            var(--player-art-color),
            rgba(255,255,255,.98) 48%,
            rgba(238,243,248,.98)
        );

    border-color:
        rgba(20,40,60,.10);

}


/* =====================================================
   LIGHT THEME PLAYER TEKST
===================================================== */

html.light-theme .track-artist {

    color:
        #526173;

}


/* =====================================================
   LIGHT THEME CONTROLS
===================================================== */

html.light-theme .control {

    background:
        var(--panel2);

    color:
        #172231;

    border-color:
        rgba(20,40,60,.12);

}


/* =====================================================
   LIGHT THEME PROGRESS
===================================================== */

html.light-theme .progress {

    background:
        #dce4ec;

}


/* =====================================================
   LIGHT THEME CARDS
===================================================== */

html.light-theme .card {

    background:
        #ffffff;

    border-color:
        rgba(20,40,60,.10);

    box-shadow:
        0 10px 30px rgba(20,40,60,.06);

}


/* =====================================================
   LIGHT THEME TITELS
===================================================== */

html.light-theme .section-title h2 {

    color:
        #172231;

}


/* =====================================================
   LIGHT THEME STATION BUTTONS
===================================================== */

html.light-theme .station-button {

    background:
        #ffffff;

    color:
        #172231;

    border-color:
        rgba(20,40,60,.12);

}


html.light-theme .station-button.active {

    background:

        linear-gradient(
            135deg,
            #16a8ff,
            #006eff
        );

    color:
        #ffffff;

    border-color:
        #16a8ff;

}


/* =====================================================
   LIGHT THEME REQUEST MELDINGEN
===================================================== */

html.light-theme .request-message {

    background:
        #ffffff;

    color:
        #172231;

    border-color:
        rgba(20,40,60,.12);

}


/* =====================================================
   THEME BUTTON
===================================================== */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


/* =====================================================
   THEME TOGGLE
===================================================== */

.theme-toggle {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border);

    border-radius:
        50%;

    background:
        var(--panel2);

    color:
        var(--text);

    cursor:
        pointer;

    font-size:
        19px;

    line-height:
        1;

    transition:

        background .25s ease,

        color .25s ease,

        border-color .25s ease,

        transform .2s ease;

}


.theme-toggle:hover {

    transform:
        scale(1.08);

    border-color:
        var(--blue);

}


.theme-toggle:active {

    transform:
        scale(.95);

}


.theme-toggle span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

}


/* =====================================================
   LIGHT THEME BUTTON
===================================================== */

html.light-theme .theme-toggle {

    background:
        #eef3f8;

    color:
        #172231;

    border-color:
        rgba(20,40,60,.12);

}


/* =====================================================
   SMOOTH THEME OVERGANG
===================================================== */

body,
.header,
.hero,
.player,
.card,
.control,
.station-button,
.theme-toggle {

    transition:

        background-color .35s ease,

        background .35s ease,

        color .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}


/* =====================================================
   MOBIEL
===================================================== */

@media screen and (max-width:700px) {

    .header-actions {

        gap:
            7px;

    }


    .theme-toggle {

        width:
            40px;

        height:
            40px;

        font-size:
            18px;

    }

}
/* =====================================================
   THEME BUTTON - MOBIEL FIX
===================================================== */

@media screen and (max-width: 700px) {

    .header-inner {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

    }


    .header-actions {

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        gap:
            7px;

        flex-shrink:
            0;

    }


    .theme-toggle {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            40px;

        height:
            40px;

        min-width:
            40px;

        min-height:
            40px;

        padding:
            0;

        margin:
            0;

        cursor:
            pointer;

        z-index:
            1000;

    }


    .theme-toggle span {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        height:
            100%;

    }

}
/* =====================================================
   HAMBURGER MENU - LICHT / DONKER
===================================================== */

.menu-button {

    color:
        var(--white);

    transition:
        color .35s ease,
        background-color .35s ease;

}


/* =====================================================
   LICHTE MODUS
===================================================== */

html.light-theme .menu-button {

    color:
        #172231;

}
/* =====================================================
   LINKS SUBMENU
===================================================== */

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown .menu-link {
    display: block;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 180px;

    background: #091321 !important;

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

    padding: 8px 0;

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

    z-index: 9999;
}

.submenu a {
    display: block;

    padding: 10px 16px;

    white-space: nowrap;

    text-decoration: none;

    color: #ffffff !important;

    background: transparent !important;
}

.submenu a:hover {
    color: #16a8ff !important;

    background:
        rgba(22,168,255,.08) !important;
}

.menu-dropdown:hover .submenu {
    display: block;
}
/* =====================================================
   HEADER ALTIJD DONKER
===================================================== */

.header {
    background: #050b14 !important;
    color: #ffffff !important;
}

.header .logo-text {
    color: #ffffff !important;
}

.header .power-text {
    color: #ffffff !important;
}

.header .fm-text {
    color: #168cff !important;
}

.header .nav a {
    color: #ffffff !important;
}

.header .menu-link {
    color: #ffffff !important;
}
/* =====================================================
   POWER FM
   HEADER + MOBIEL MENU ALTIJD DONKER
===================================================== */

/* Header blijft altijd donker */
.header {
    background: #050b14 !important;
    color: #ffffff !important;
}

/* Logo */
.header .logo-text,
.header .power-text {
    color: #ffffff !important;
}

.header .fm-text {
    color: #168cff !important;
}

/* Desktop navigatie */
.header .nav a,
.header .menu-link {
    color: #ffffff !important;
}

.header .nav a:hover,
.header .menu-link:hover {
    color: #16a8ff !important;
}

/* Hamburger altijd wit */
.header .menu-button {
    color: #ffffff !important;
}

/* Mobiel menu altijd donker */
@media screen and (max-width: 800px) {

    .header .nav {
        background: #050b14 !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .header .nav a,
    .header .nav .menu-link {
        color: #ffffff !important;
    }

    .header .nav a:hover,
    .header .nav .menu-link:hover {
        color: #16a8ff !important;
    }

    /* Submenu op mobiel */
    .header .submenu {
        background: #091321 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 12px 30px rgba(0,0,0,.45);
    }

    .header .submenu a {
        color: #ffffff !important;
    }

    .header .submenu a:hover {
        color: #16a8ff !important;
        background: rgba(22,168,255,.08);
    }

.header .submenu a:hover {
    color: #16a8ff !important;
    background: rgba(22,168,255,.08);
}

}


/* =====================================================
   WEBSDR ICONEN
===================================================== */

.websdr-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    object-fit: contain !important;
    display: block !important;
}
/* =====================================================
   WEBSDR TITEL
   DONKER / LICHT / MOBIEL
===================================================== */

.websdr-page-title h1 {

    color: var(--blue) !important;

}

.websdr-page-title h1 span {

    color: var(--text) !important;

}
/* =====================================================
   HEADER LOGO - HERSTEL
===================================================== */

.header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header .logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.header .logo-text {
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.header .power-text {
    color: #ffffff !important;
}

.header .fm-text {
    color: #168cff !important;
}
/* =====================================================
   LIGHT THEME PLAYER TEKST - FIX
===================================================== */

/* ON AIR tekst altijd wit */
html.light-theme .onair {

    color:
        #ffffff !important;

}


/* =====================================================
   LICHTE MODUS - GROTE PLAYER TITEL
===================================================== */

body.light-mode .player-title,
body.light-mode .player-song-title,
body.light-mode .now-playing-title {
    color: #111827 !important;
}


/* Hoofdplayer artiest */
html.light-theme .track-artist {

    color:
        #526173 !important;

}


/* Mini-player titel wit */
html.light-theme .mini-title {

    color:
        #ffffff !important;

}


/* Mini-player artiest blijft zoals hij goed staat */
html.light-theme .mini-artist {

    color:
        var(--muted) !important;

}
/* =====================================================
   VIDEO TITEL
   DONKER / LICHT / MOBIEL
===================================================== */

.video-page-title h1 span:first-child {

    color: var(--text) !important;

}

.video-page-title .video-title-blue {

    color: var(--blue) !important;

}