/* ===========================================================================
   STRIVEMAKE — GLASSMORPHISM LAYER
   Deployed 2026-05-05. Adds frosted-glass treatment to cards, buttons, nav,
   pricing plans, FAQ, integration pills, and add-on detail surfaces.
   Designed to layer ON TOP of existing inline styles — non-destructive.
   Mobile, prefers-reduced-motion, and no-backdrop-filter fallbacks included.
   =========================================================================== */

/* --- 0. Animated background orbs (only visible on desktop) ----------------- */
/* These give the glass something colorful to "show" against your cream BG.   */

body {
    position: relative;
    /* Soft ambient gradient under the orbs */
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%,    rgba(12,175,96,0.10)  0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 25%,   rgba(255,107,74,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 50% 100%,  rgba(10,40,24,0.05)   0%, transparent 60%),
        var(--sm-bg, var(--sm-cream, #FAF6EF));
}

body::before, body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.30;
    will-change: transform;
}
body::before {
    width: 620px; height: 620px;
    top: -180px; left: -160px;
    background: radial-gradient(circle, rgba(12,175,96,0.45), transparent 65%);
    animation: sm-orb-1 28s ease-in-out infinite;
}
body::after {
    width: 540px; height: 540px;
    bottom: -160px; right: -140px;
    background: radial-gradient(circle, rgba(255,107,74,0.40), transparent 65%);
    animation: sm-orb-2 32s ease-in-out infinite;
}
@keyframes sm-orb-1 {
    0%, 100% { transform: translate(0, 0)        scale(1); }
    33%      { transform: translate(80px, 100px) scale(1.12); }
    66%      { transform: translate(-40px, 60px) scale(0.95); }
}
@keyframes sm-orb-2 {
    0%, 100% { transform: translate(0, 0)         scale(1); }
    33%      { transform: translate(-70px, -80px) scale(0.9); }
    66%      { transform: translate(40px, -50px)  scale(1.08); }
}

/* Make sure all content sits above the orbs */
body > * { position: relative; z-index: 1; }

/* --- 1. Universal glass token (apply via class .sm-glass) ------------------ */

.sm-glass,
.sm-glass-card,
.glass-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 32px rgba(10, 40, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                background .35s ease,
                border-color .35s ease;
}
.sm-glass:hover,
.sm-glass-card:hover,
.glass-card:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-4px);
    box-shadow:
        0 18px 48px rgba(10, 40, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* --- 2. Existing site cards: cards, plan cards, FAQ, founder, etc. --------- */

.sm-card,
.sm-faq-item,
.sm-plan,
.sm-pricing-page .sm-plan,
.sm-founder,
.sm-case,
.sm-hero-visual,
.sm-hero-visual-stat,
.sm-hero-visual-cap,
.sm-ind-wrap,
.sm-compare,
.sm-toggle-wrap {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        0 8px 28px rgba(10, 40, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                background .35s ease,
                border-color .35s ease !important;
}
.sm-card:hover,
.sm-faq-item:hover,
.sm-plan:hover,
.sm-pricing-page .sm-plan:hover,
.sm-founder:hover,
.sm-case:hover,
.sm-ind-wrap:hover {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-4px);
    box-shadow:
        0 18px 44px rgba(10, 40, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* FAQ open state — primary-color glass border for emphasis */
.sm-faq-item[open] {
    background: rgba(231, 244, 236, 0.72) !important;
    border-color: rgba(12, 175, 96, 0.35) !important;
    box-shadow:
        0 12px 36px rgba(12, 175, 96, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Featured (middle) pricing plan keeps its dark fill but gets glass border + shimmer */
.sm-plan.featured,
.sm-pricing-page .sm-plan.featured {
    background: linear-gradient(135deg, rgba(10,40,24,0.95), rgba(10,40,24,0.85)) !important;
    border: 1px solid rgba(255, 107, 74, 0.30) !important;
    box-shadow:
        0 16px 48px rgba(10, 40, 24, 0.25),
        0 0 0 1px rgba(255, 107, 74, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.sm-plan.featured:hover,
.sm-pricing-page .sm-plan.featured:hover {
    background: linear-gradient(135deg, rgba(10,40,24,0.97), rgba(10,40,24,0.88)) !important;
    transform: translateY(-6px);
    box-shadow:
        0 28px 64px rgba(10, 40, 24, 0.35),
        0 0 0 1px rgba(255, 107, 74, 0.30) !important;
}

/* --- 3. Buttons — glass primary, glass ghost, shimmer hover ---------------- */

.sm-btn-primary,
.sm-pricing-page .sm-btn-primary {
    background: linear-gradient(135deg, var(--sm-primary, #0CAF60) 0%, var(--sm-primary-dark, #067F47) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        0 10px 28px rgba(12, 175, 96, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.sm-btn-coral,
.sm-pricing-page .sm-btn-coral {
    background: linear-gradient(135deg, var(--sm-coral, #FF6B4A) 0%, #E54A2C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        0 10px 28px rgba(255, 107, 74, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    position: relative;
    overflow: hidden;
}
.sm-btn-primary::before,
.sm-btn-coral::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%);
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.sm-btn-primary:hover::before,
.sm-btn-coral:hover::before {
    transform: translateX(100%);
}
.sm-btn-primary:hover,
.sm-btn-coral:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 40px rgba(12, 175, 96, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
.sm-btn-coral:hover {
    box-shadow:
        0 16px 40px rgba(255, 107, 74, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.sm-btn-ghost,
.sm-pricing-page .sm-btn-ghost {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1.5px solid rgba(10, 40, 24, 0.18) !important;
    box-shadow:
        0 4px 14px rgba(10, 40, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.sm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(10, 40, 24, 0.32) !important;
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px rgba(10, 40, 24, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.sm-btn-light {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(10, 40, 24, 0.10) !important;
}

/* --- 4. Navigation — frosted floating PILL (.sm-nav-inner is the visual element) ---- */
/* .sm-nav is just the positioning wrapper; the pill we see is .sm-nav-inner */
.sm-nav-inner {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
        0 6px 24px rgba(10, 40, 24, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(10, 40, 24, 0.04) !important;
}

/* --- 4b. Footer text contrast — strengthened on the original dark background ---- */
.sm-footer h4 {
    color: rgba(255, 255, 255, 0.80) !important;  /* was 0.5 — too faded */
}
.sm-footer a {
    color: rgba(255, 255, 255, 0.92) !important;  /* was 0.85 */
}
.sm-footer a:hover {
    color: var(--sm-coral, #FF6B4A) !important;
}
.sm-footer-bottom {
    color: rgba(255, 255, 255, 0.72) !important;  /* was 0.5 */
}
.sm-footer p, .sm-footer span {
    color: rgba(255, 255, 255, 0.85) !important;
}
.sm-footer-brand, .sm-footer-brand strong {
    color: #FFFFFF !important;
}

/* --- 5. Integration pills — small glass chips ----------------------------- */

.sm-integ-pill,
.sm-badge {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow:
        0 2px 8px rgba(10, 40, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sm-integ-pill:hover,
.sm-badge:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 16px rgba(10, 40, 24, 0.08) !important;
}

/* --- 6. Eyebrow chips (small section labels) ------------------------------ */

.sm-eyebrow {
    background: rgba(231, 244, 236, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(12, 175, 96, 0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- 7. Add-on detail / marketplace cards (templates, modules, screenshots) - */

.addon-card,
.module-card,
.sm-template-card,
.sm-module-card,
.template-card,
.marketplace-card,
.module-tile,
.addon-tile {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 28px rgba(10, 40, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                background .35s ease !important;
}
.addon-card:hover,
.module-card:hover,
.sm-template-card:hover,
.sm-module-card:hover,
.template-card:hover,
.marketplace-card:hover,
.module-tile:hover,
.addon-tile:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    transform: translateY(-6px);
    box-shadow:
        0 22px 52px rgba(10, 40, 24, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Catch-all generic Bootstrap-style "card" used by add-on detail templates */
.card {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 18px !important;
    box-shadow:
        0 6px 22px rgba(10, 40, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.card:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    transform: translateY(-3px);
    box-shadow:
        0 14px 36px rgba(10, 40, 24, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* --- 8. Footer — leave original dark styling alone (white text on dark green) ---- */
/* Removed cream-glass override that was making footer text invisible.
   Original .sm-footer { background: var(--sm-secondary); color: rgba(255,255,255,0.85); }
   in landingpage.blade.php is correct and should not be glassed. */

/* --- 9. Toggle / save pill / mobile menu ---------------------------------- */

.sm-toggle-wrap,
.sm-pricing-page .sm-toggle-wrap {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 6px 18px rgba(10, 40, 24, 0.05);
}

.sm-mobile-menu {
    background: rgba(250, 246, 239, 0.92) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
}

/* --- 10. Comparison table — subtle glass rows ---------------------------- */

.sm-compare table {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

/* --- 11. Mobile: reduce blur for performance ----------------------------- */

@media (max-width: 768px) {
    body::before, body::after {
        opacity: 0.35;
        animation-duration: 60s; /* slower = less repaint */
    }
    .sm-card, .sm-faq-item, .sm-plan, .sm-founder, .sm-case,
    .sm-glass, .sm-glass-card, .glass-card,
    .addon-card, .module-card, .sm-template-card, .card {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .sm-nav {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

@media (max-width: 480px) {
    /* Aggressive simplification on small phones */
    body::before, body::after { display: none; }
}

/* --- 12. Fallback: browsers without backdrop-filter ----------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sm-card, .sm-faq-item, .sm-plan, .sm-founder, .sm-case, .sm-ind-wrap,
    .sm-glass, .sm-glass-card, .glass-card,
    .addon-card, .module-card, .sm-template-card, .card,
    .sm-nav, .sm-mobile-menu, .sm-footer {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    body::before, body::after { display: none; }
}

/* --- 13. Reduced motion preference ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
    .sm-card, .sm-faq-item, .sm-plan, .sm-glass, .sm-glass-card,
    .addon-card, .module-card, .sm-template-card, .card,
    .sm-btn-primary, .sm-btn-coral, .sm-btn-ghost,
    .sm-integ-pill, .sm-badge {
        transition: none !important;
    }
    .sm-btn-primary::before, .sm-btn-coral::before {
        display: none !important;
    }
}

/* --- 14. Print: clean glass off ------------------------------------------- */

@media print {
    body::before, body::after { display: none; }
    .sm-card, .sm-plan, .sm-faq-item,
    .sm-glass, .sm-glass-card, .glass-card,
    .addon-card, .module-card, .sm-template-card, .card {
        background: white !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* === END glassmorphism layer === */