/* =========================================================
   Music FM — Core Design System 2026
   שכבת עיצוב מרכזית: צבעים, זכוכית, כפתורים, כרטיסים, מובייל ופוליש.
   נבנה כשכבת איחוד בטוחה מעל הקבצים הקיימים, בלי לשבור PHP/JS.
========================================================= */

:root{
    --mf-primary:#147cff;
    --mf-primary-2:#005bea;
    --mf-cyan:#59c7ff;
    --mf-ink:#07111f;
    --mf-text:#101828;
    --mf-muted:#667085;
    --mf-soft:#f4f8ff;
    --mf-bg:#f4f7fb;
    --mf-white:#ffffff;
    --mf-line:rgba(214,226,241,.92);
    --mf-line-soft:rgba(231,238,247,.92);
    --mf-glass:rgba(255,255,255,.82);
    --mf-glass-strong:rgba(255,255,255,.94);
    --mf-glass-dark:rgba(7,17,31,.92);
    --mf-radius-xs:12px;
    --mf-radius-sm:16px;
    --mf-radius-md:22px;
    --mf-radius-lg:30px;
    --mf-radius-xl:38px;
    --mf-shadow-soft:0 12px 30px rgba(15,23,42,.055);
    --mf-shadow:0 18px 46px rgba(15,23,42,.075);
    --mf-shadow-strong:0 26px 70px rgba(15,23,42,.12);
    --mf-shadow-blue:0 18px 40px rgba(20,124,255,.22);
    --mf-gradient:linear-gradient(135deg,var(--mf-primary),var(--mf-primary-2));
    --mf-gradient-glow:linear-gradient(135deg,#147cff,#59c7ff,#005bea);
    --mf-transition:.22s cubic-bezier(.2,.8,.2,1);
    --mf-container:1280px;
    --mf-page-gap:24px;
}

html{scroll-behavior:smooth;}

body{
    font-family:'Heebo',Arial,sans-serif;
    color:var(--mf-text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body:not(.mf-admin-body){
    background:
        radial-gradient(circle at 12% 14%,rgba(20,124,255,.10),transparent 24%),
        radial-gradient(circle at 88% 18%,rgba(89,199,255,.10),transparent 26%),
        linear-gradient(180deg,#f7fbff 0%,#f4f7fb 45%,#ffffff 100%);
}

img{max-width:100%;}

a,button,input,textarea,select{font-family:inherit;}

button,a,input,textarea,select{
    -webkit-tap-highlight-color:transparent;
}

/* Containers */
.mf-container,
.mf-page-shell,
.mf-shell{
    width:min(var(--mf-container),calc(100% - 32px));
    margin-inline:auto;
}

.mf-page-section{
    margin-block:var(--mf-page-gap);
}

/* Premium glass/card system */
.mf-glass,
.mf-card,
.mf-premium-card,
.box,
.card,
.dashboard-card,
.stat-card,
.ol-card,
.profile-progress-card,
.playlist-row,
.insight-card{
    border:1px solid var(--mf-line-soft);
    background:var(--mf-glass-strong);
    box-shadow:var(--mf-shadow-soft);
}

.mf-glass,
.mf-premium-card{
    backdrop-filter:blur(14px) saturate(1.06);
    -webkit-backdrop-filter:blur(14px) saturate(1.06);
}

.mf-card,
.mf-premium-card{
    border-radius:var(--mf-radius-lg);
    padding:24px;
}

.mf-floating,
.mf-card-hover,
.card,
.box,
.dashboard-card,
.stat-card,
.ol-card{
    transition:transform var(--mf-transition), box-shadow var(--mf-transition), border-color var(--mf-transition), background var(--mf-transition);
}

.mf-card-hover:hover,
.card:hover,
.box:hover,
.dashboard-card:hover,
.stat-card:hover,
.ol-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--mf-shadow);
}

/* Buttons */
.mf-btn,
.primary-action,
.full-action,
.play-site-btn,
button[type="submit"],
.send-form button,
.full-btn{
    min-height:46px;
    border:0;
    border-radius:var(--mf-radius-sm);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 20px;
    background:var(--mf-gradient);
    color:#fff;
    font-weight:950;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(20,124,255,.18);
    transition:transform var(--mf-transition), box-shadow var(--mf-transition), filter var(--mf-transition);
}

.mf-btn:hover,
.primary-action:hover,
.full-action:hover,
.play-site-btn:hover,
button[type="submit"]:hover,
.send-form button:hover,
.full-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--mf-shadow-blue);
}

.mf-btn-secondary,
.secondary-action,
.section-title.with-link > a,
.playlist-actions a{
    min-height:46px;
    border-radius:var(--mf-radius-sm);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 18px;
    background:rgba(255,255,255,.92);
    color:var(--mf-primary) !important;
    border:1px solid rgba(219,234,254,.95);
    font-weight:950;
    text-decoration:none;
    box-shadow:var(--mf-shadow-soft);
    transition:transform var(--mf-transition), box-shadow var(--mf-transition), background var(--mf-transition);
}

.mf-btn-secondary:hover,
.secondary-action:hover,
.section-title.with-link > a:hover,
.playlist-actions a:hover{
    transform:translateY(-2px);
    background:#fff;
    box-shadow:var(--mf-shadow);
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select{
    border:1px solid var(--mf-line);
    border-radius:var(--mf-radius-sm);
    background:rgba(255,255,255,.88);
    color:var(--mf-text);
    outline:0;
    transition:border-color var(--mf-transition), box-shadow var(--mf-transition), background var(--mf-transition);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus,
select:focus{
    background:#fff;
    border-color:rgba(20,124,255,.58);
    box-shadow:0 0 0 5px rgba(20,124,255,.10);
}

/* Typography helpers */
.mf-kicker,
.mf-chip,
.promo-kicker,
.mf-artist-kicker,
.community-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(20,124,255,.10);
    color:var(--mf-primary);
    border:1px solid rgba(20,124,255,.14);
    font-size:12px;
    font-weight:950;
}

.mf-muted{color:var(--mf-muted);}
.mf-blue{color:var(--mf-primary);}

/* Unified hero treatment */
.mf-hero,
.dashboard-hero-card,
.artist-promo-hero,
.mf-artist-hero:not(.mf-artist-public-body .mf-artist-hero){
    border:1px solid rgba(255,255,255,.92);
    box-shadow:var(--mf-shadow);
}

/* Badges */
.mf-badge,
.badge,
.artist-badge,
.mf-artist-verified{
    display:inline-grid;
    place-items:center;
    border-radius:999px;
}

.artist-badge,
.mf-artist-verified{
    background:linear-gradient(135deg,#a855f7,#7c3aed,#2563eb);
    color:#fff;
    box-shadow:0 0 0 4px rgba(168,85,247,.14),0 12px 26px rgba(124,58,237,.28);
}

/* Navigation polish */
.topbar{
    box-shadow:0 16px 45px rgba(15,23,42,.12) !important;
}

.topbar .nav a,
.topbar .icons a,
.topbar .icons button{
    transition:transform var(--mf-transition), color var(--mf-transition), opacity var(--mf-transition), background var(--mf-transition) !important;
}

/* Safe motion */
@keyframes mfFadeUp{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}

.mf-reveal{
    animation:mfFadeUp .45s ease both;
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* Mobile first polish */
@media(max-width:900px){
    :root{--mf-page-gap:18px;}

    .mf-container,
    .mf-page-shell,
    .mf-shell{
        width:min(100% - 18px,100%);
    }

    .mf-card,
    .mf-premium-card{
        border-radius:22px;
        padding:18px;
    }

    .topbar{
        padding-inline:14px !important;
        min-height:68px !important;
        border-radius:0 0 20px 20px !important;
    }

    .topbar .logo{
        flex-basis:auto !important;
    }

    .topbar .logo img{
        height:44px !important;
        max-width:160px !important;
    }
}

@media(max-width:560px){
    .mf-btn,
    .mf-btn-secondary,
    .primary-action,
    .secondary-action,
    .full-action,
    .play-site-btn{
        width:100%;
    }
}

/* =========================================================
   Music FM — Stage 2: Header / Home Hero / Cards Polish
   שכבת פוליש בטוחה מעל העיצוב הקיים.
========================================================= */

/* Page rhythm */
.page,
.mf-mag-page,
.mf-onlive-profile,
.mf-user-dashboard,
.clips-page,
.artist-promo-page,
.mf-artist-page{
    isolation:isolate;
}

/* Homepage layout refinement */
body:not(.mf-admin-body) .page{
    gap:22px !important;
    width:min(1560px,calc(100% - 28px));
    margin-inline:auto;
}

/* Home HERO — cinematic but still Music FM clean */
.hero.hero-slider,
.hero{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.92) !important;
    border-radius:var(--mf-radius-xl) !important;
    background:
        radial-gradient(circle at 16% 18%,rgba(20,124,255,.20),transparent 30%),
        radial-gradient(circle at 88% 84%,rgba(89,199,255,.18),transparent 28%),
        linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,250,255,.78)) !important;
    box-shadow:var(--mf-shadow-strong), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.hero.hero-slider::before,
.hero::before{
    content:"";
    position:absolute;
    inset:-160px auto auto -170px;
    width:430px;
    height:430px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,124,255,.17),transparent 68%);
    pointer-events:none;
}

.hero.hero-slider::after,
.hero::after{
    content:"";
    position:absolute;
    top:-35%;
    right:22%;
    width:170px;
    height:160%;
    transform:rotate(34deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
    opacity:.55;
    pointer-events:none;
}

.hero-slide,
.hero-content,
.hero-text,
.hero-image{
    position:relative;
    z-index:1;
}

.hero-text .tag,
.hero-meta .tag,
.mf-news-category,
.album-pill{
    background:rgba(20,124,255,.10) !important;
    color:var(--mf-primary) !important;
    border:1px solid rgba(20,124,255,.14) !important;
    border-radius:999px !important;
    font-weight:950 !important;
    box-shadow:0 10px 24px rgba(20,124,255,.08) !important;
}

.hero-text h1,
.hero-text h2{
    color:#07111f !important;
    letter-spacing:-.045em;
}

.hero-text p,
.hero-text .hero-subtitle,
.hero-text .subtitle{
    color:#536173 !important;
    font-weight:800;
}

.hero-image,
.hero-image img{
    border-radius:28px !important;
}

.hero-image img{
    box-shadow:0 24px 58px rgba(15,23,42,.14) !important;
    transition:transform .35s ease, filter .35s ease;
}

.hero:hover .hero-image img{
    transform:scale(1.018);
}

.hero-dots span{
    border-radius:999px !important;
    background:rgba(20,124,255,.10) !important;
    color:var(--mf-primary) !important;
    border:1px solid rgba(20,124,255,.14) !important;
    font-weight:950 !important;
}

.hero-dots span.active{
    background:var(--mf-gradient) !important;
    color:#fff !important;
    box-shadow:0 12px 26px rgba(20,124,255,.22) !important;
}

/* Universal home cards */
.left.box,
.trending.box,
.chart,
.clips,
.weekly-user-widget,
.follow-card,
.search-box,
.msg,
.mf-news-card,
.clip,
.trend,
.event,
.next-user-strip{
    border:1px solid rgba(231,238,247,.94) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:var(--mf-shadow-soft) !important;
    backdrop-filter:blur(10px) saturate(1.04);
    -webkit-backdrop-filter:blur(10px) saturate(1.04);
}

.mf-news-card,
.clip,
.chart-row,
.trend,
.msg,
.follow-row{
    transition:transform var(--mf-transition), box-shadow var(--mf-transition), border-color var(--mf-transition), background var(--mf-transition);
}

.mf-news-card:hover,
.clip:hover,
.chart-row:hover,
.trend:hover,
.msg:hover,
.follow-row:hover{
    transform:translateY(-2px);
    box-shadow:var(--mf-shadow) !important;
    border-color:rgba(20,124,255,.18) !important;
}

/* News carousel polish */
.mf-news-section{
    position:relative;
    padding:2px 0;
}

.mf-news-title,
.clips-headline h2,
.trending h2,
.chart h2,
.panel-title h2{
    color:#07111f !important;
    font-weight:1000 !important;
    letter-spacing:-.025em;
}

.mf-news-arrow,
.clips-all-link,
.album-open-btn{
    border:1px solid rgba(219,234,254,.95) !important;
    background:rgba(255,255,255,.92) !important;
    color:var(--mf-primary) !important;
    box-shadow:var(--mf-shadow-soft) !important;
    transition:transform var(--mf-transition), box-shadow var(--mf-transition), background var(--mf-transition), color var(--mf-transition);
}

.mf-news-arrow:hover,
.clips-all-link:hover,
.album-open-btn:hover{
    transform:translateY(-2px);
    background:var(--mf-gradient) !important;
    color:#fff !important;
    box-shadow:var(--mf-shadow-blue) !important;
}

.mf-news-image img,
.clip-thumb img,
.trend-img img,
.chart-row img{
    transition:transform .35s ease, filter .35s ease;
}

.mf-news-card:hover .mf-news-image img,
.clip:hover .clip-thumb img,
.trend:hover .trend-img img,
.chart-row:hover img{
    transform:scale(1.045);
}

/* Clips and music cards */
.clip,
.clip-album-card{
    border-radius:24px !important;
    overflow:hidden;
}

.clip-thumb,
.trend-img,
.user-img,
.weekly-user-photo,
.song-cover{
    overflow:hidden;
}

.play-small,
.trend-img::after{
    background:var(--mf-gradient) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(20,124,255,.22) !important;
}

.liked-badge,
.saved-badge{
    border-radius:999px !important;
    font-weight:950 !important;
}

/* Forms */
.send-form input,
.send-form textarea,
.search-box input{
    background:rgba(255,255,255,.88) !important;
    border-color:rgba(214,226,241,.92) !important;
}

.notice,
.empty,
.site-alert{
    border-radius:18px !important;
}

/* Consistent mobile app feeling */
@media(max-width:1100px){
    body:not(.mf-admin-body) .page{
        width:min(100% - 18px,100%);
        grid-template-columns:1fr !important;
    }

    .left,
    .right{
        position:static !important;
    }
}

@media(max-width:760px){
    .hero.hero-slider,
    .hero{
        border-radius:26px !important;
    }

    .hero-content{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .hero-text h1,
    .hero-text h2{
        font-size:clamp(30px,9vw,44px) !important;
        line-height:1.05 !important;
    }

    .mf-news-card,
    .clip,
    .left.box,
    .trending.box,
    .chart,
    .clips,
    .weekly-user-widget,
    .follow-card{
        border-radius:22px !important;
    }
}

/* Reduce heavy effects on low-end mobile */
@media(max-width:520px){
    .left.box,
    .trending.box,
    .chart,
    .clips,
    .weekly-user-widget,
    .follow-card,
    .search-box,
    .msg,
    .mf-news-card,
    .clip,
    .trend,
    .event,
    .next-user-strip{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
}