/* ==========================================================================
   Fon Music landing - orange + blue theme  (/fon-music)

   Overlay on top of fonmusic-landing.css. Original blue rules stay untouched.
   Blue = atmosphere / glass surfaces. Orange (#f7641f) = logo / actions.
   Revert: comment out the fonmusic-landing-orange.css link in
   Views/FonMusic/Index.cshtml and set fmlOrangeTheme = false in fonmusic-landing.js.
   ========================================================================== */

.fml-page {
    --fml-orange: #f7641f;
    --fml-orange-soft: #ff9a4d;
    --fml-orange-100: #ffb078;
    --fml-orange-200: #ffc49a;
}

.fml-page ::selection {
    background: var(--fml-orange-100);
    color: var(--fml-bg);
}

/* ---------- hero: blue photo stays, SVG color mesh ------------------- */

.fml-page .fml-hero__glow {
    background: none;
}

.fml-page .fml-hero__svg-bg {
    opacity: .9;
    mix-blend-mode: screen;
}

.fml-page .fml-hero__bg img {
    height: 115%;
    width: 115%;
    max-width: none;
    animation: fml-hero-pan 28s ease-in-out infinite alternate;
}

.fml-page .fml-hero__rotator {
    color: var(--fml-orange-100);
}

.fml-page .fml-kicker {
    color: var(--fml-orange-100);
}

.fml-page .fml-sec--faq .fml-kicker {
    color: var(--fml-orange-soft);
}

/* Frosted-glass CTAs: orange primary, blue secondary */
.fml-page .fml-hero__cta .fml-btn--light,
.fml-page .fml-hero__cta .fml-btn--ghost {
    color: #fff;
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.fml-page .fml-hero__cta .fml-btn--light {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(247, 100, 31, 0.26) 100%);
    border: 1px solid rgba(255, 176, 120, 0.5);
}

.fml-page .fml-hero__cta .fml-btn--ghost {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(23, 108, 255, 0.22) 100%);
    border: 1px solid rgba(138, 195, 255, 0.42);
}

.fml-page .fml-hero__cta .fml-btn--light:hover,
.fml-page .fml-hero__cta .fml-btn--ghost:hover {
    color: #fff;
}

.fml-page .fml-hero__cta .fml-btn--light:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(247, 100, 31, 0.38) 100%);
    border-color: rgba(255, 196, 154, 0.7);
    box-shadow:
        0 12px 36px rgba(247, 100, 31, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.fml-page .fml-hero__cta .fml-btn--ghost:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(23, 108, 255, 0.34) 100%);
    border-color: rgba(145, 196, 255, 0.65);
    box-shadow:
        0 12px 36px rgba(23, 108, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.fml-page .fml-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--fml-orange-100);
}

.fml-page .fml-link-arrow {
    color: var(--fml-orange-100);
}

/* ---------- features: blue panel, orange orb + 70% ------------------ */

.fml-page .fml-sec--features {
    background:
        linear-gradient(180deg, var(--fml-bg) 0%, rgba(2, 7, 16, 0.7) 28%, transparent 64%),
        radial-gradient(circle at 18% 32%, rgba(247, 100, 31, .2), transparent 40%),
        radial-gradient(circle at 50% 36%, rgba(29, 106, 224, .22), transparent 46%),
        var(--fml-bg);
}

.fml-page .fml-panel {
    border-color: rgba(121, 184, 255, 0.2);
    background: linear-gradient(145deg, rgba(20, 64, 125, .24), rgba(255, 255, 255, .025));
    box-shadow: 0 26px 90px rgba(0, 65, 155, .12);
}

.fml-page .fml-panel__orb {
    background: rgba(247, 100, 31, 0.28);
}

.fml-page .fml-features__claim em {
    background: linear-gradient(110deg, #ffffff 8%, #ff9a4d 48%, #75b7ff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- playlists: blue glass cards, orange play ----------------- */

.fml-page .fml-card {
    border-color: rgba(117, 183, 255, 0.08);
    background: linear-gradient(160deg, rgba(24, 92, 183, .12), rgba(255, 255, 255, .018));
    box-shadow: 0 16px 48px rgba(0, 20, 55, .12);
}

.fml-page .fml-card__art--empty {
    background:
        radial-gradient(circle at 30% 20%, rgba(247, 100, 31, .18), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(117, 183, 255, .18), transparent 55%),
        rgba(255, 255, 255, 0.05);
}

.fml-page .fml-track__play {
    border: 0;
    background: rgba(247, 100, 31, 0.78);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(180, 55, 8, .18);
}

/* ---------- guides / plans / faq ------------------------------------ */

.fml-page .fml-sec--guides {
    background:
        radial-gradient(circle at 18% 8%, rgba(247, 100, 31, .14), transparent 30%),
        radial-gradient(circle at 78% 10%, rgba(48, 133, 255, .18), transparent 34%),
        var(--fml-bg-3);
}

.fml-page .fml-sec--plans.pricing-dark {
    background:
        radial-gradient(circle at 18% 12%, rgba(247, 100, 31, .12), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(28, 104, 222, .16), transparent 34%),
        var(--fml-bg);
}

/* ---------- pricing: blue surfaces, orange selected / badge ----------- */

.fml-page .pricing-dark {
    --pk-accent: #f7641f;
    --pk-accent-soft: #ff9a4d;
    --pk-accent-hover: #ff8a3d;
}

.fml-page .pricing-dark .global-billing-radio:checked + .global-billing-label {
    box-shadow: 0 2px 8px rgba(180, 55, 8, .28);
    border: 1px solid rgba(255, 176, 120, .28);
    color: var(--pk-accent-soft);
}

.fml-page .pricing-dark .global-discount-badge {
    background: rgba(247, 100, 31, .22);
    color: var(--pk-accent-soft);
}

.fml-page .pricing-dark .global-billing-radio:checked + .global-billing-label .global-discount-badge {
    background: rgba(247, 100, 31, .38);
}

.fml-page .pricing-dark .PlanCardItem.selected {
    border-color: var(--pk-accent);
    box-shadow: 0 0 0 1px var(--pk-accent), 0 8px 24px rgba(247, 100, 31, .22);
    background: linear-gradient(135deg, var(--pk-surface-elevated) 0%, rgba(247, 100, 31, .12) 52%, rgba(23, 108, 255, .12) 100%);
}

.fml-page .pricing-dark .btn-proceed-payment {
    background:
        radial-gradient(ellipse 100% 120% at 0% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%),
        linear-gradient(135deg, rgba(247, 100, 31, 0.20) 0%, rgba(23, 108, 255, 0.20) 100%);
}

.fml-page .pricing-dark .btn-proceed-payment:hover {
    background:
        radial-gradient(ellipse 100% 120% at 0% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 70%),
        linear-gradient(135deg, rgba(247, 100, 31, 0.32) 0%, rgba(23, 108, 255, 0.28) 100%);
}