/*
Theme Name: HotRadio AI
Theme URI: https://hotradioai.sk
Author: Maroš
Version: 1.0
Description: Custom theme for HotRadio AI
Text Domain: hotradioai
*/

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#050816;color:white;font-family:Arial,sans-serif;overflow-x:hidden}

.topbar{
    position:fixed;top:0;left:0;width:100%;height:58px;padding:0 35px;
    display:flex;align-items:center;justify-content:space-between;z-index:999;
    background:rgba(3,6,20,.82);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.top-left{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800}
.live-pill{border:1px solid #ff5a00;padding:7px 12px;border-radius:7px;font-size:12px;font-weight:900;box-shadow:0 0 14px rgba(255,90,0,.35)}
.live-pill span{display:inline-block;width:7px;height:7px;background:#ff2b00;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #ff2b00}

.main-nav{display:flex;gap:20px}
.main-nav a{color:white;text-decoration:none;font-size:12px;font-weight:900}
.main-nav a:hover{color:#ff6600}
.socials{display:flex;gap:15px;font-weight:900;font-size:13px}

.hero{
    min-height:48vh;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:22px;
    padding:65px 40px 0;
    background:
        radial-gradient(circle at 75% 45%,rgba(0,119,255,.25),transparent 32%),
        radial-gradient(circle at 55% 50%,rgba(255,102,0,.18),transparent 32%),
        linear-gradient(180deg,#050816 0%,#030512 100%);
}

.hero-content h2{font-size:20px;margin-bottom:8px;font-weight:900}

.hero-content h1{
    font-size:54px;line-height:.9;font-weight:900;
    background:linear-gradient(90deg,#00aaff,#7b5cff,#ff6600);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:12px;
}

.hero-content p{font-size:13px;max-width:470px;line-height:1.45;color:#d7d7d7}
.hero-buttons{display:flex;gap:12px;margin-top:18px}

.btn{
    display:inline-block;padding:10px 21px;
    background:linear-gradient(135deg,#ff3c00,#ff7a00);
    color:white;text-decoration:none;border-radius:8px;
    font-size:13px;font-weight:900;
    box-shadow:0 0 20px rgba(255,102,0,.35);
}

.btn-secondary{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:none;
}

.hero-stats{display:flex;gap:24px;margin-top:18px}
.stat strong{display:block;font-size:16px}
.stat span{color:#b7b7b7;font-size:9px;font-weight:900}

.hero-logo{position:relative;display:flex;align-items:center;justify-content:center}
.hero-logo:before{
    content:"";position:absolute;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(0,132,255,.24),transparent 62%);
    filter:blur(10px);
}

.hero-logo img{
    position:relative;width:100%;max-width:460px;
    filter:drop-shadow(0 0 24px rgba(0,140,255,.38))
           drop-shadow(0 0 24px rgba(255,102,0,.25));
}

.player{
    margin:-35px 40px 18px;
    padding:14px 18px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:rgba(8,12,31,.9);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    position:relative;z-index:10;
}

.track{display:flex;align-items:center;gap:12px;min-width:230px}
.cover{width:64px;height:44px;border-radius:9px;background:linear-gradient(135deg,#ff6600,#006eff)}
.track small{color:#00aaff;font-size:10px;font-weight:900}
.track h3{font-size:16px;margin-top:3px}
.track p{font-size:11px;color:#cfcfcf}

.wave{
    flex:1;height:28px;border-radius:100px;
    background:repeating-linear-gradient(90deg,#ff6600 0 3px,transparent 3px 10px,#00aaff 10px 13px,transparent 13px 20px);
    opacity:.85;
    mask-image:linear-gradient(180deg,transparent 0%,black 25%,black 75%,transparent 100%);
}

.controls{display:flex;align-items:center;gap:14px;font-size:20px}
.play{
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#ff4500,#006eff);
    box-shadow:0 0 22px rgba(255,102,0,.48);
}

.play-link{text-decoration:none;color:white;display:flex;align-items:center;justify-content:center}
.play-link .play{cursor:pointer}

.partners-title{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:14px 40px 20px;
}

.partners-title h2{
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size:40px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    background:linear-gradient(90deg,#ff6600,#ffffff,#00aaff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.content-grid{
    padding:0 40px 18px;
    display:grid;
    grid-template-columns:1.1fr .65fr .7fr;
    gap:14px;
}

.panel{
    background:rgba(8,12,31,.88);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:14px;
}

.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel-title h2{font-size:16px}
.panel-title a{color:#ff7a00;text-decoration:none;font-size:10px;font-weight:900}

.hosts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.host-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:9px}
.host-card img{width:100%;height:108px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.host-card h3{font-size:14px;color:#ff4fbd}
.host-card span{font-size:11px;color:#cfcfcf}

.schedule-list{display:flex;flex-direction:column;gap:12px;font-size:13px}
.schedule-row{display:grid;grid-template-columns:95px 1fr;gap:10px;color:#dcdcdc}
.schedule-row b{color:#00aaff}

.news-list{display:flex;flex-direction:column;gap:12px}
.news-item{display:grid;grid-template-columns:72px 1fr;gap:11px;align-items:center}
.news-thumb{height:48px;border-radius:8px;background:linear-gradient(135deg,#ff3c00,#006eff)}
.news-item h3{font-size:13px;margin-bottom:3px}
.news-item span{color:#aaa;font-size:11px}

.features{
    margin:0 40px 18px;padding:18px;border-radius:14px;
    display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
    background:rgba(8,12,31,.88);
    border:1px solid rgba(255,255,255,.12);
}

.feature{display:flex;gap:12px;align-items:center;border-right:1px solid rgba(255,255,255,.08)}
.feature:last-child{border-right:none}
.feature-icon{font-size:30px;color:#ff6600}
.feature h3{font-size:14px;margin-bottom:4px}
.feature p{color:#cfcfcf;font-size:11px;line-height:1.35}

.footer{
    margin-top:20px;
    padding:26px 40px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    color:#aaa;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(3,6,20,.88);
}

.footer-logo{
    font-size:24px;
    font-weight:900;
    background:linear-gradient(90deg,#ff6600,#ffffff,#00aaff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.footer-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.footer-menu a{
    color:#cfcfcf;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.footer-menu a:hover{
    color:#ff6600;
}

.footer-copy{
    color:#777;
    font-size:11px;
    text-align:center;
}

@media(max-width:1100px){
    .socials{display:none}
    .main-nav{gap:14px}
    .hero-content h1{font-size:48px}
    .content-grid{grid-template-columns:1fr}
    .features{grid-template-columns:1fr}
    .feature{border-right:none}
}

@media(max-width:800px){
    .topbar{padding:0 20px}
    .main-nav{display:none}
    .hero{
        grid-template-columns:1fr;
        text-align:center;
        padding:85px 24px 65px;
    }
    .hero-content h1{font-size:42px}
    .hero-buttons,.hero-stats{justify-content:center;flex-wrap:wrap}
    .player{margin:-35px 20px 18px;flex-direction:column}
    .wave{width:100%;flex:none}
    .hosts-grid{grid-template-columns:repeat(2,1fr)}
    .content-grid{padding:0 20px 18px}
    .features{margin:0 20px 18px}
    .footer{flex-direction:column;gap:12px}
}

.partners-grid{
    padding:0 40px 18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.partner-card{
    height:115px;
    border-radius:14px;
    background:rgba(8,12,31,.88);
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    padding:12px;
}

.partner-card img{
    max-width:150px;
    max-height:42px;
    width:auto;
    height:auto;
    object-fit:contain;
    margin-bottom:8px;
    background:white;
    border-radius:6px;
    padding:5px 8px;
}

.partner-card h3{
    font-size:13px;
    font-weight:900;
    margin-bottom:3px;
}

.partner-card span{
    font-size:10px;
    color:#cfcfcf;
    font-weight:700;
}

.partner-card.empty{
    background:rgba(255,255,255,.035);
    border:1px dashed rgba(255,255,255,.20);
}

.partner-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.partner-link:hover .partner-card{
    transform:translateY(-4px);
    border-color:#ff6600;
    box-shadow:0 0 20px rgba(255,102,0,.25);
    transition:.25s ease;
}

.legal-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top right,rgba(0,119,255,.22),transparent 35%),
        radial-gradient(circle at left,rgba(255,102,0,.14),transparent 30%),
        #050816;
    color:white;
    padding:90px 24px;
}

.legal-box{
    max-width:900px;
    margin:0 auto;
    background:rgba(8,12,31,.9);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.legal-back{
    display:inline-block;
    color:#ff6600;
    text-decoration:none;
    font-weight:900;
    margin-bottom:25px;
}

.legal-box h1{
    font-size:42px;
    margin-bottom:25px;
}

.legal-box h2{
    font-size:24px;
    margin-top:28px;
    margin-bottom:10px;
    color:#00aaff;
}

.legal-box p{
    color:#d8d8d8;
    line-height:1.7;
    font-size:16px;
    margin-bottom:12px;
}

.legal-date{
    margin-top:35px;
    color:#888 !important;
}
.top-brand{
    color:white;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
}

.footer-copy a,
.legal-box a{
    color:#ff7a00;
}

.form-box{
    max-width:760px;
}

.hotradio-form{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-row.two-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.hotradio-form label{
    font-size:13px;
    font-weight:900;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.hotradio-form input,
.hotradio-form textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    color:white;
    border-radius:10px;
    padding:13px 14px;
    font-size:15px;
    outline:none;
}

.hotradio-form input:focus,
.hotradio-form textarea:focus{
    border-color:#ff6600;
    box-shadow:0 0 18px rgba(255,102,0,.18);
}

.form-submit{
    align-self:flex-start;
    border:0;
    cursor:pointer;
    padding:13px 25px;
    border-radius:10px;
    color:white;
    font-size:14px;
    font-weight:900;
    background:linear-gradient(135deg,#ff3c00,#ff7a00);
    box-shadow:0 0 22px rgba(255,102,0,.35);
}

.form-alert{
    margin:18px 0 0;
    padding:13px 15px;
    border-radius:10px;
    font-weight:800;
    font-size:14px;
}

.form-alert.success{
    background:rgba(0,180,120,.14);
    border:1px solid rgba(0,180,120,.35);
    color:#9fffd8;
}

.form-alert.error{
    background:rgba(255,60,0,.14);
    border:1px solid rgba(255,60,0,.35);
    color:#ffd0c2;
}

.wp-page-content{
    color:#d8d8d8;
    line-height:1.7;
    font-size:16px;
}

.wp-page-content p,
.wp-page-content ul,
.wp-page-content ol{
    margin-bottom:14px;
}

@media(max-width:800px){
    .form-row.two-cols{
        grid-template-columns:1fr;
    }

    .legal-box{
        padding:26px 20px;
    }

    .legal-box h1{
        font-size:32px;
    }
}