/* =====================================================
   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;

    }

}