/* =====================================================
   ANOWXRADIO - MAIN STYLESHEET
   Version: 1.0.0
   Author: Anow Hosting
   ===================================================== */

/* =====================================================
   1. CSS RESET & ROOT VARIABLES
   ===================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    /* Background Colors */
    --bg-primary:#ffffff;
    --bg-secondary:#f2f2f5;
    --bg-card:#ffffff;
    --bg-card-hover:#f8f8fa;
    
    /* Text Colors */
    --text-primary:#1a1a2e;
    --text-secondary:#555;
    --text-muted:#999;
    
    /* Accent Colors - These will be overridden by admin settings */
    --accent-red:#DC143C;
    --accent-dark-red:#8B0000;
    --accent-pink:#FF1493;
    
    /* Gradients */
    --gradient-nav:linear-gradient(135deg,#FFD700,#FFA500);
    --gradient-section:linear-gradient(135deg,#DC143C,#FF1493);
    --gradient-player:linear-gradient(135deg,#0f0c29,#302b63,#24243e);
    --gradient-header:linear-gradient(135deg,#8B0000,#DC143C);
    
    /* Borders & Shadows */
    --border-light:rgba(0,0,0,0.06);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
    --shadow:0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:0 8px 40px rgba(0,0,0,0.12);
    --shadow-card:0 2px 12px rgba(0,0,0,0.05);
    
    /* Border Radius */
    --radius-sm:8px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    
    /* Footer & Download */
    --footer-bg:#1a0a12;
    --download-bg:#3D0A1E;
    
    /* Transitions */
    --ease:cubic-bezier(0.4,0,0.2,1);
    --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    
    /* Spacing */
    --spacing-xs:4px;
    --spacing-sm:8px;
    --spacing-md:16px;
    --spacing-lg:24px;
    --spacing-xl:32px;
    --spacing-xxl:48px;
}

/* =====================================================
   2. BASE STYLES
   ===================================================== */
html{
    scroll-behavior:smooth;
    -webkit-tap-highlight-color:transparent;
    font-size:16px;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background:var(--bg-secondary);
    color:var(--text-primary);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{text-decoration:none;color:inherit;transition:var(--transition)}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;outline:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}

::selection{background:var(--accent-pink);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--accent-red);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dark-red)}

/* =====================================================
   3. LAYOUT
   ===================================================== */
.main-content{
    max-width:1200px;
    margin:0 auto;
    padding:20px 16px;
    min-height:60vh;
}

@media(max-width:768px){
    .main-content{
        padding:15px 12px;
    }
}

@media(max-width:480px){
    .main-content{
        padding:12px 10px;
    }
}

/* =====================================================
   4. TOP HEADER
   ===================================================== */
.top-header{
    background:var(--gradient-header);
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:var(--shadow);
}

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

.logo-img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,0.3);
}

.header-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.header-icon-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:var(--transition);
    border:none;
    cursor:pointer;
}

.header-icon-btn:hover{
    background:rgba(255,255,255,0.25);
    transform:scale(1.05);
}

@media(max-width:480px){
    .top-header{
        padding:10px 14px;
    }
    .logo-img{
        width:36px;
        height:36px;
    }
    .header-icon-btn{
        width:36px;
        height:36px;
        font-size:14px;
    }
}

/* =====================================================
   5. NAVIGATION
   ===================================================== */
.main-nav{
    background:var(--bg-primary);
    border-bottom:1px solid var(--border-light);
    padding:0 20px;
    position:sticky;
    top:66px;
    z-index:999;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:1200px;
    margin:0 auto;
}

.hamburger-btn{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--text-primary);
    border-radius:var(--radius-sm);
    transition:var(--transition);
}

.hamburger-btn:hover{
    background:var(--bg-secondary);
    color:var(--accent-red);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:8px 0;
    flex:1;
}

.nav-links::-webkit-scrollbar{display:none}

.nav-links li a{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    border-radius:var(--radius);
    white-space:nowrap;
    transition:var(--transition);
}

.nav-links li a:hover,
.nav-links li a.active{
    background:var(--bg-secondary);
    color:#000;
}

.nav-links li a i{
    font-size:14px;
}

@media(max-width:768px){
    .main-nav{
        padding:0 14px;
        top:56px;
    }
    .nav-links li a{
        padding:8px 12px;
        font-size:12px;
    }
}

@media(max-width:480px){
    .main-nav{
        padding:0 10px;
        top:52px;
    }
    .hamburger-btn{
        width:36px;
        height:36px;
        font-size:18px;
    }
    .nav-links{
        gap:4px;
    }
    .nav-links li a{
        padding:6px 10px;
        font-size:11px;
    }
    .nav-links li a i{
        font-size:12px;
    }
}

/* =====================================================
   6. SIDEBAR
   ===================================================== */
.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:1050;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}

.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    max-width:85vw;
    height:100vh;
    background:var(--bg-primary);
    z-index:1060;
    transform:translateX(-100%);
    transition:transform 0.3s var(--ease);
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-lg);
}

.sidebar.active{
    transform:translateX(0);
}

.sidebar-header{
    background:var(--gradient-header);
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.sidebar-logo img{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.3);
}

.sidebar-logo span{
    font-size:16px;
    font-weight:600;
}

.sidebar-close{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.15);
    border-radius:50%;
    color:#fff;
    font-size:16px;
    transition:var(--transition);
}

.sidebar-close:hover{
    background:rgba(255,255,255,0.25);
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:15px 0;
}

.sidebar-nav li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    font-size:14px;
    color:var(--text-primary);
    transition:var(--transition);
    border-left:3px solid transparent;
}

.sidebar-nav li a:hover,
.sidebar-nav li a.active{
    background:var(--bg-secondary);
    color:var(--accent-red);
    border-left-color:var(--accent-red);
}

.sidebar-nav li a i{
    width:20px;
    text-align:center;
    font-size:16px;
}

.sidebar-social{
    padding:20px;
    border-top:1px solid var(--border-light);
    display:flex;
    justify-content:center;
    gap:12px;
}

.sidebar-social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-secondary);
    border-radius:50%;
    color:var(--text-secondary);
    font-size:16px;
    transition:var(--transition);
}

.sidebar-social a:hover{
    background:var(--accent-red);
    color:#fff;
    transform:translateY(-2px);
}

/* =====================================================
   7. SEARCH MODAL
   ===================================================== */
.search-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    backdrop-filter:blur(10px);
}

.search-overlay.active{
    opacity:1;
    visibility:visible;
}

.search-modal{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    background:var(--bg-primary);
    max-width:600px;
    margin:0 auto;
    transform:translateY(-20px);
    opacity:0;
    transition:var(--transition);
}

.search-overlay.active .search-modal{
    transform:translateY(0);
    opacity:1;
}

.search-modal-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    border-bottom:1px solid var(--border-light);
    background:var(--bg-primary);
}

.search-input-wrap{
    flex:1;
    position:relative;
    display:flex;
    align-items:center;
}

.search-input-icon{
    position:absolute;
    left:14px;
    color:var(--text-muted);
    font-size:16px;
}

.search-input{
    width:100%;
    padding:12px 40px 12px 44px;
    border:2px solid var(--border-light);
    border-radius:var(--radius-xl);
    font-size:15px;
    background:var(--bg-secondary);
    color:var(--text-primary);
    transition:var(--transition);
}

.search-input:focus{
    border-color:var(--accent-red);
    background:var(--bg-primary);
    outline:none;
}

.search-clear{
    position:absolute;
    right:12px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-secondary);
    border-radius:50%;
    color:var(--text-muted);
    font-size:12px;
    transition:var(--transition);
    opacity:0;
    visibility:hidden;
}

.search-input:not(:placeholder-shown) ~ .search-clear{
    opacity:1;
    visibility:visible;
}

.search-clear:hover{
    background:var(--accent-red);
    color:#fff;
}

.search-close-btn{
    padding:10px 16px;
    font-size:14px;
    font-weight:500;
    color:var(--accent-red);
    background:none;
    border:none;
    cursor:pointer;
}

.search-results{
    flex:1;
    overflow-y:auto;
    padding:16px;
}

.search-empty,
.search-no-results{
    text-align:center;
    padding:60px 20px;
    color:var(--text-muted);
}

.search-empty i,
.search-no-results i{
    font-size:48px;
    margin-bottom:16px;
    opacity:0.5;
}

.search-empty p,
.search-no-results p{
    font-size:14px;
}

.search-results-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.search-result-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    background:var(--bg-secondary);
    border-radius:var(--radius);
    transition:var(--transition);
}

.search-result-item:hover{
    background:var(--bg-card-hover);
    transform:translateX(4px);
}

.search-result-item img{
    width:50px;
    height:50px;
    border-radius:var(--radius-sm);
    object-fit:cover;
}

.search-result-info{
    flex:1;
    min-width:0;
}

.search-result-name{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.search-result-meta{
    display:block;
    font-size:12px;
    color:var(--text-muted);
    margin-top:2px;
}

@media(max-width:600px){
    .search-modal{
        max-width:100%;
    }
}

/* =====================================================
   8. RADIO SECTIONS
   ===================================================== */
.radio-section{
    margin-bottom:40px;
}

.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:10px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.section-title i{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-section);
    border-radius:var(--radius-sm);
    color:#fff;
    font-size:16px;
}

.section-title h2{
    font-size:20px;
    font-weight:700;
    color:var(--text-primary);
}

.section-count{
    font-size:13px;
    color:var(--text-muted);
    background:var(--bg-secondary);
    padding:6px 14px;
    border-radius:var(--radius-xl);
}

@media(max-width:480px){
    .section-title i{
        width:32px;
        height:32px;
        font-size:14px;
    }
    .section-title h2{
        font-size:17px;
    }
    .section-count{
        font-size:11px;
        padding:4px 10px;
    }
}

/* =====================================================
   9. RADIO GRID
   ===================================================== */
.radio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:16px;
}

.radio-card{
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:var(--transition);
    display:block;
}

.radio-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.radio-img-wrap{
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
    background:var(--bg-secondary);
}

.radio-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.4s var(--ease);
}

.radio-card:hover .radio-img-wrap img{
    transform:scale(1.08);
}

/* =====================================================
   LIVE BADGE - FIXED: Small, Corner Positioned, Site Color
   ===================================================== */
.live-badge{
    position:absolute;
    top:6px;
    left:6px;
    background:var(--accent-red) !important;
    color:#fff;
    font-size:8px;
    font-weight:700;
    padding:2px 6px;
    border-radius:3px;
    display:inline-flex;
    align-items:center;
    gap:3px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    line-height:1;
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
    z-index:2;
}

.live-dot{
    width:5px;
    height:5px;
    background:#fff;
    border-radius:50%;
    animation:pulse 1.5s infinite;
    flex-shrink:0;
}

@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:0.4}
}

.radio-info{
    padding:14px;
}

.radio-name{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:4px;
}

.radio-meta{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:var(--text-muted);
}

.radio-meta i{
    font-size:11px;
}

/* Grid Responsive */
@media(max-width:1200px){
    .radio-grid{
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:14px;
    }
}

@media(max-width:768px){
    .radio-grid{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:12px;
    }
    .radio-info{
        padding:12px;
    }
    .radio-name{
        font-size:13px;
    }
}

@media(max-width:480px){
    .radio-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .radio-info{
        padding:10px;
    }
    .radio-name{
        font-size:12px;
    }
    .radio-meta{
        font-size:11px;
    }
    .live-badge{
        font-size:7px !important;
        padding:2px 5px !important;
        top:5px !important;
        left:5px !important;
    }
}

@media(max-width:360px){
    .radio-grid{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }
}

/* =====================================================
   10. SHOW ALL BUTTON
   ===================================================== */
.show-all-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:24px auto 0;
    padding:12px 28px;
    background:var(--bg-primary);
    border:2px solid var(--accent-red);
    color:var(--accent-red);
    font-size:14px;
    font-weight:600;
    border-radius:var(--radius-xl);
    transition:var(--transition);
    cursor:pointer;
}

.show-all-btn:hover{
    background:var(--accent-red);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(220,20,60,0.25);
}

.radio-section .show-all-btn{
    display:flex;
    width:fit-content;
}

@media(max-width:480px){
    .show-all-btn{
        padding:10px 20px;
        font-size:13px;
    }
}

/* =====================================================
   11. COUNTRY FILTER INFO
   ===================================================== */
.country-filter-info{
    padding:0 0 20px;
}

.country-filter-info .filter-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--gradient-section);
    color:#fff;
    padding:12px 20px;
    border-radius:var(--radius-xl);
    font-weight:600;
    font-size:14px;
    box-shadow:0 4px 15px rgba(220,20,60,0.3);
}

.country-filter-info .filter-badge i{
    font-size:18px;
}

.country-filter-info .view-all-link{
    color:rgba(255,255,255,0.9);
    text-decoration:none;
    font-size:12px;
    margin-left:10px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,0.3);
    transition:var(--transition);
}

.country-filter-info .view-all-link:hover{
    color:#fff;
}

@media(max-width:480px){
    .country-filter-info .filter-badge{
        padding:10px 16px;
        font-size:13px;
    }
    .country-filter-info .view-all-link{
        font-size:11px;
    }
}

/* =====================================================
   12. NO STATIONS MESSAGE
   ===================================================== */
.no-stations-section{
    padding:60px 20px;
    text-align:center;
}

.no-stations-message{
    max-width:400px;
    margin:0 auto;
    padding:40px;
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

.no-stations-message i{
    font-size:60px;
    color:var(--accent-red);
    margin-bottom:20px;
    opacity:0.5;
}

.no-stations-message h3{
    font-size:22px;
    margin-bottom:10px;
    color:var(--text-primary);
}

.no-stations-message p{
    color:var(--text-secondary);
    margin-bottom:20px;
    line-height:1.6;
    font-size:14px;
}

.reset-filter-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--accent-red);
    color:#fff;
    padding:12px 24px;
    border-radius:var(--radius-xl);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:var(--transition);
}

.reset-filter-btn:hover{
    background:var(--accent-dark-red);
    transform:translateY(-2px);
}

@media(max-width:480px){
    .no-stations-section{
        padding:40px 15px;
    }
    .no-stations-message{
        padding:30px 20px;
    }
    .no-stations-message i{
        font-size:48px;
    }
    .no-stations-message h3{
        font-size:18px;
    }
    .no-stations-message p{
        font-size:13px;
    }
}

/* =====================================================
   13. LOAD MORE BUTTON
   ===================================================== */
.load-more-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:30px auto;
    padding:14px 36px;
    background:var(--accent-red);
    color:#fff;
    border:none;
    border-radius:var(--radius-xl);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.load-more-btn:hover{
    background:var(--accent-dark-red);
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(220,20,60,0.3);
}

.load-more-btn.loading{
    pointer-events:none;
    opacity:0.7;
}

.load-more-btn.loading i{
    animation:spin 1s linear infinite;
}

@keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* =====================================================
   14. PROMO BANNER
   ===================================================== */
.promo-banner{
    margin-bottom:30px;
}

.promo-card{
    background:var(--gradient-section);
    border-radius:var(--radius-lg);
    padding:40px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.promo-card::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:100%;
    height:100%;
    background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 60%);
    pointer-events:none;
}

.promo-icon{
    font-size:48px;
    margin-bottom:16px;
    opacity:0.9;
}

.promo-card h2{
    font-size:26px;
    font-weight:700;
    margin-bottom:10px;
}

.promo-card p{
    font-size:15px;
    opacity:0.9;
    margin-bottom:20px;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}

.promo-cta{
    display:inline-block;
    background:#fff;
    color:var(--accent-red);
    padding:12px 28px;
    border-radius:var(--radius-xl);
    font-weight:600;
    font-size:14px;
    transition:var(--transition);
}

.promo-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,0.2);
}

@media(max-width:768px){
    .promo-card{
        padding:30px 20px;
    }
    .promo-icon{
        font-size:40px;
    }
    .promo-card h2{
        font-size:22px;
    }
    .promo-card p{
        font-size:14px;
    }
}

@media(max-width:480px){
    .promo-card{
        padding:24px 16px;
    }
    .promo-icon{
        font-size:36px;
    }
    .promo-card h2{
        font-size:18px;
    }
    .promo-card p{
        font-size:13px;
    }
    .promo-cta{
        padding:10px 22px;
        font-size:13px;
    }
}

/* =====================================================
   15. DOWNLOAD SECTION
   ===================================================== */
.download-section{
    background:var(--download-bg);
    padding:60px 20px;
    text-align:center;
    margin-top:40px;
}

.download-content{
    max-width:600px;
    margin:0 auto;
}

.download-icon{
    width:80px;
    height:80px;
    background:var(--gradient-section);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:36px;
    color:#fff;
}

.download-section h2{
    font-size:26px;
    color:#fff;
    margin-bottom:10px;
}

.download-section p{
    color:rgba(255,255,255,0.7);
    font-size:15px;
    margin-bottom:30px;
}

.store-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.store-btn{
    display:flex;
    align-items:center;
    gap:12px;
    background:#000;
    color:#fff;
    padding:12px 24px;
    border-radius:var(--radius);
    transition:var(--transition);
}

.store-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

.store-btn i{
    font-size:28px;
}

.store-text{
    text-align:left;
}

.store-text small{
    font-size:10px;
    opacity:0.8;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.store-text strong{
    display:block;
    font-size:16px;
}

@media(max-width:768px){
    .download-section{
        padding:40px 16px;
    }
    .download-icon{
        width:64px;
        height:64px;
        font-size:28px;
    }
    .download-section h2{
        font-size:22px;
    }
}

@media(max-width:480px){
    .download-section{
        padding:32px 14px;
    }
    .download-icon{
        width:56px;
        height:56px;
        font-size:24px;
    }
    .download-section h2{
        font-size:18px;
    }
    .download-section p{
        font-size:13px;
        margin-bottom:24px;
    }
    .store-buttons{
        flex-direction:column;
        align-items:center;
    }
    .store-btn{
        width:100%;
        max-width:260px;
        justify-content:center;
    }
}

/* =====================================================
   16. FOOTER
   ===================================================== */
.main-footer{
    background:var(--footer-bg);
    padding:40px 20px 30px;
    text-align:center;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:20px;
}

.footer-links a{
    color:rgba(255,255,255,0.7);
    font-size:13px;
    transition:var(--transition);
}

.footer-links a:hover{
    color:#fff;
}

.made-in{
    color:rgba(255,255,255,0.5);
    font-size:13px;
    margin-bottom:8px;
}

.copyright{
    color:rgba(255,255,255,0.4);
    font-size:12px;
}

@media(max-width:480px){
    .main-footer{
        padding:30px 14px 24px;
    }
    .footer-links{
        gap:14px;
    }
    .footer-links a{
        font-size:12px;
    }
}

/* =====================================================
   17. SCROLL TO TOP
   ===================================================== */
.scroll-top{
    position:fixed;
    bottom:24px;
    right:24px;
    width:46px;
    height:46px;
    background:var(--accent-red);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    box-shadow:var(--shadow);
    z-index:900;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:var(--transition);
}

.scroll-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top:hover{
    background:var(--accent-dark-red);
    transform:translateY(-3px);
}

@media(max-width:480px){
    .scroll-top{
        width:40px;
        height:40px;
        font-size:16px;
        bottom:20px;
        right:16px;
    }
}

/* =====================================================
   18. BREADCRUMB
   ===================================================== */
.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:20px;
    padding:12px 16px;
    background:var(--bg-card);
    border-radius:var(--radius);
}

.breadcrumb a{
    color:var(--text-secondary);
    transition:var(--transition);
}

.breadcrumb a:hover{
    color:var(--accent-red);
}

.breadcrumb i.fa-chevron-right{
    font-size:10px;
    color:var(--text-muted);
}

@media(max-width:480px){
    .breadcrumb{
        font-size:12px;
        padding:10px 12px;
        gap:6px;
    }
}

/* =====================================================
   19. TOAST NOTIFICATION
   ===================================================== */
.toast,
.anowxradio-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:#333;
    color:#fff;
    padding:14px 24px;
    border-radius:var(--radius);
    font-size:14px;
    font-weight:500;
    z-index:9999;
    opacity:0;
    transition:var(--transition);
    box-shadow:var(--shadow-lg);
}

.toast.show,
.anowxradio-toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1;
}

/* =====================================================
   20. AD BANNER
   ===================================================== */
.ad-banner{
    margin-bottom:30px;
    text-align:center;
}

.ad-banner img{
    max-width:100%;
    height:auto;
    border-radius:var(--radius);
}

/* =====================================================
   21. RESPONSIVE UTILITIES
   ===================================================== */
.hide-mobile{
    display:block;
}

.show-mobile{
    display:none;
}

@media(max-width:768px){
    .hide-mobile{
        display:none;
    }
    .show-mobile{
        display:block;
    }
}

/* Flex utilities */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-sm{gap:8px}
.gap-md{gap:16px}
.gap-lg{gap:24px}

/* Text utilities */
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.font-bold{font-weight:700}

/* Margin utilities */
.mt-sm{margin-top:8px}
.mt-md{margin-top:16px}
.mt-lg{margin-top:24px}
.mb-sm{margin-bottom:8px}
.mb-md{margin-bottom:16px}
.mb-lg{margin-bottom:24px}