/* ================================================
   GENIUS QUICKTOOLS — OFFICIAL PALETTE.CSS
   Burgundy space theme + FULL support for ALL tools
   ================================================ */

:root {
    /* === YOUR EXACT PALETTE === */
    --primary-cyan: #0086c9;        /* Sky Blue Sword - main accents, borders, glows */
    --accent-violet: #ff5500;       /* Fire Orange */
    --accent-amber: #ff5500;
    --text-light: #81aabe;          /* Silver-Cloud Sword - headlines */
    --text-secondary: #e08700;      /* Yellow-Gold - body text */
    --primary-yellow: #e08700;
    --primary-orange: #ff5500;
    --primary-gray: #e0e0e0;
    --primary-blue: #81aabe;
    --text-cyan: #e08700;
    --orb-start: #e0e0e0;
    --orb-middle: #81aabe;
    --orb-end: #e0e0e0;
    --button-secondary-bg: #e0e0e0;
    --glow-intensity: 40px;
    --card-bg: rgba(255,255,255,0.09);

    /* Logo paths */
    --logo-ball: #22d3ee;
    --logo-I: #e08700;
    --logo-G: #050402;
    --logo-L: #ff5500;

    /* === GENIUS MENU ORBS === */
    --center-orb-from: #210700;
    --center-orb-via: #81aabe;
    /* --center-orb-via: #0086c9; */
    --center-orb-to: #ff5500;
    --mindmap-live-from: #0086c9;
    --mindmap-live-to: #ff5500;
    --mindmap-coming-from: #210700;
    --mindmap-coming-to: #3a1a0a;

    /* === NEW TOOL-SPECIFIC COLORS === */
    --accent-emerald: #34d399;      /* Success buttons, premium badges */
    --accent-rose: #f43f5e;         /* Negative/avoid text */
    --accent-indigo: #6366f1;       /* Wizard progress & links */
    --badge-premium-bg: #10b981;
    --badge-premium-text: #000;
    --progress-fill-from: #e08700;
    --progress-fill-to: #ff5500;
    --checkbox-accent: #0086c9;
    --input-bg: rgba(255,255,255,0.10);
    --input-border: #0086c9;
    --link-indigo: #a78bfa;
}

html { scroll-behavior: smooth; }
body { 
    margin: 0; 
    background: #000000; 
    font-family: system-ui, -apple-system, sans-serif; 
}
#three-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* === CORE OVERRIDES === */
.hero-glow { text-shadow: 0 0 var(--glow-intensity) var(--primary-cyan), 0 0 calc(var(--glow-intensity) * 2) var(--primary-cyan) !important; }
h1, h2, h3, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl { color: var(--text-light) !important; }
.light-blue { color: var(--text-light) !important; }
.bg-light-blue { background-color: var(--text-light) !important; }
.text-secondary, .text-gray-300, .text-gray-400, .text-white\/70, .text-white\/80 { color: var(--text-secondary) !important; }
.text-cyan-100, .text-cyan-200, .text-cyan-300, .text-cyan-400, .text-cyan-500 { color: var(--text-cyan) !important; }
.text-amber-400, .text-amber-500, .text-amber-300 { color: var(--accent-amber) !important; }
.text-yellow-400, .text-yellow-500, .text-yellow-300 { color: var(--primary-yellow) !important; }

/* Cards & buttons */
.bg-white\/5, .bg-white\\/5, .bg-white\/10, .bg-black\/70, .bg-black\/60 { background: var(--card-bg) !important; }
.bg-white, .hover\:bg-white:hover { background-color: var(--button-secondary-bg) !important; color: #000 !important; }
.border-cyan-400, .border-cyan-300, .border-cyan-500, .border-white\/10 { border-color: var(--primary-cyan) !important; }
.bg-cyan-500, .bg-cyan-400, .hover\:bg-cyan-400:hover { background-color: var(--primary-cyan) !important; color: #000 !important; }
.border-yellow-400, .border-yellow-300, .border-yellow-500, .border-yellow\/10 { border-color: var(--primary-yellow) !important; }
.bg-yellow-500, .bg-yellow-400, .hover\:bg-yellow-400:hover { background-color: var(--primary-yellow) !important; color: #000 !important; }
.border-orange-400, .border-orange-300, .border-orange-500, .border-orange\/10 { border-color: var(--primary-orange) !important; }
.bg-orange-500, .bg-orange-400, .hover\:bg-orange-400:hover { background-color: var(--primary-orange) !important; color: #000 !important; }
.border-gray-400, .border-gray-300, .border-gray-500, .border-gray\/10 { border-color: var(--primary-gray) !important; }
.bg-gray-500, .bg-gray-400, .hover\:bg-gray-400:hover { background-color: var(--primary-gray) !important; color: #000 !important; }
.border-blue-400, .border-blue-300, .border-blue-500, .border-blue\/10 { border-color: var(--primary-blue) !important; }
.bg-blue-500, .bg-blue-400, .hover\:bg-blue-400:hover { background-color: var(--primary-blue) !important; color: #000 !important; }


/* Plasma orb + Genius Menu */
/* ====================== GENIUS MENU — SPACE WOW EDITION ====================== */
/* Plasma orb (top nav + floating) — unchanged but kept for consistency */
.plasma-orb {
    background: linear-gradient(to bottom right, var(--orb-start), var(--orb-middle), var(--orb-end)) !important;
    animation: plasma-pulse 3s ease-in-out infinite;
}
@keyframes plasma-pulse {
    0%,100% { box-shadow: 0 0 25px var(--primary-cyan), 0 0 50px var(--accent-violet); }
    50%     { box-shadow: 0 0 45px var(--accent-violet), 0 0 80px var(--primary-cyan); }
}

/* Center GENIUS orb — enhanced readability + stronger glow */
#center-orb {
    background: linear-gradient(to bottom right, var(--center-orb-from), var(--center-orb-via), var(--center-orb-to)) !important;
    box-shadow: 0 0 60px 20px var(--primary-cyan),
                0 0 120px 40px #ff5500 !important;
}

/* ====================== MINDMAP NODES — COIN FLIP EMOJIS ====================== */
.mindmap-node {
    /* Required for 3D coin-flip depth */
    perspective: 1200px;
    box-shadow: 0 0 30px 8px rgba(103, 232, 249, 0.3) !important;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    opacity: 0;
    transform: scale(0);
    z-index: 10;
}

/* Live nodes get the vibrant gradient */
.mindmap-node:not(.opacity-40) {
    background: linear-gradient(to bottom right, var(--mindmap-live-from), var(--mindmap-live-to)) !important;
}

/* Coming-soon nodes stay grayed out */
.mindmap-node.opacity-40 {
    background: linear-gradient(to bottom right, var(--mindmap-coming-from), var(--mindmap-coming-to)) !important;
}

/* Pop-in animation (triggered by JS) */
.mindmap-node.pop-in,
.mindmap-node[style*="scale(1)"] {
    opacity: 1;
    transform: scale(1) !important;
}

/* === COIN-FLIP ANIMATION (Y-axis 3D flip) === */
.mindmap-node span:first-child {
    display: inline-block;
    animation: coinFlip 14s linear infinite;
    transform-style: preserve-3d;
    backface-visibility: visible; /* keeps the emoji visible on both "sides" */
}

/* Pause flip on hover for perfect readability and clicking */
.mindmap-node:hover span:first-child {
    animation-play-state: paused;
}

@keyframes coinFlip {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* Plasma energy ring orbiting each orb (still there for wow factor) */
.mindmap-node::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 9999px;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #67e8f9 180deg,
        #ff5500 270deg,
        transparent 360deg
    );
    opacity: 0.3;
    animation: ringRotate 16s linear infinite;
    z-index: -1;
    pointer-events: none;
}

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

/* Strong hover glow */
.mindmap-node:hover {
    box-shadow: 
        0 0 45px 15px #67e8f9,
        0 0 80px 30px #ff5500,
        0 0 120px 40px rgba(255, 85, 0, 0.4) !important;
    transform: scale(1.15) !important;
    z-index: 20;
}

/* Gentle float (very subtle breathing motion) */
.mindmap-node {
    animation: spaceFloat 7s ease-in-out infinite;
}

@keyframes spaceFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}
/* === TOOL-SPECIFIC FIXES === */

/* Shopping List */
.text-cyan-500 { color: var(--primary-cyan) !important; }
.bg-emerald-400, .hover\:bg-emerald-300:hover { background-color: var(--accent-emerald) !important; color: #000 !important; }
.bg-amber-400, .hover\:bg-amber-300:hover { background-color: var(--accent-amber) !important; color: #000 !important; }

/* Base nav - User badge & icon */
.bg-emerald-400 { background-color: var(--accent-emerald) !important; color: #000 !important; }
.text-cyan-400, .text-cyan-300 { color: var(--primary-cyan) !important; }

/* Tip page - Crypto button */
.from-purple-500, .to-cyan-500, .hover\:from-purple-600, .hover\:to-cyan-600 {
    background: linear-gradient(to right, #a78bfa, var(--primary-cyan)) !important;
}

/* Whats For Dinner */
.text-rose-400 { color: var(--accent-rose) !important; }
.bg-emerald-400 { background-color: var(--accent-emerald) !important; color: #000 !important; }
.accent-cyan-400 { accent-color: var(--checkbox-accent) !important; }
.border-cyan-400\/30, .border-cyan-400\/50 { border-color: rgba(0,134,201,0.3) !important; }
.bg-amber-400\/10, .border-amber-400\/30 { border-color: rgba(255,85,0,0.3) !important; }
.text-amber-300 { color: var(--accent-amber) !important; }

/* Recipe Submission Wizard */
#progress-fill {
    background: linear-gradient(to right, var(--progress-fill-from), var(--progress-fill-to)) !important;
}
.from-indigo-500, .to-cyan-400, .hover\:from-indigo-600, .hover\:to-cyan-500 {
    background: linear-gradient(to right, var(--accent-indigo), var(--primary-cyan)) !important;
}

/* Community Recipes */
.bg-white\/10, .border-cyan-400\/30 { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
.focus\:border-cyan-400:focus { border-color: var(--primary-cyan) !important; }

/* Weekly Planner */
.text-indigo-400, .hover\:text-indigo-300 { color: var(--accent-indigo) !important; }
.text-cyan-300 { color: var(--text-cyan) !important; }
.border-cyan-400\/30 { border-color: rgba(0,134,201,0.3) !important; }

/* === PAYMENTS + DASHBOARD FIXES === */
.bg-emerald-400, .bg-emerald-500, .hover\:bg-emerald-400:hover, .hover\:bg-emerald-300:hover { background-color: var(--accent-emerald) !important; color: #000 !important; }
.text-emerald-300, .text-emerald-400 { color: var(--accent-emerald) !important; }
.border-emerald-400 { border-color: var(--accent-emerald) !important; }

.bg-red-400\/10, .bg-red-400, .bg-red-500, .hover\:bg-red-400:hover, .hover\:bg-red-600:hover { background: rgba(244,63,94,0.1) !important; }
.text-red-300, .text-red-400 { color: var(--accent-red) !important; }
.border-red-400 { border-color: var(--accent-red) !important; }

.text-purple-400, .text-purple-300, .border-purple-400, .border-purple-400\/50, .border-purple-400\/30 { color: var(--accent-purple) !important; border-color: var(--accent-purple) !important; }

.text-sky-400, .border-sky-400 { color: var(--accent-sky) !important; border-color: var(--accent-sky) !important; }
.text-lime-400, .border-lime-400 { color: var(--accent-lime) !important; border-color: var(--accent-lime) !important; }
.text-rose-400, .border-rose-400 { color: var(--accent-rose) !important; border-color: var(--accent-rose) !important; }

/* Amber warnings (checkout) */
.bg-amber-400\/10, .border-amber-400 { background: rgba(255,85,0,0.1) !important; border-color: var(--accent-amber) !important; }

/* Checkboxes, progress, inputs */
.accent-cyan-400 { accent-color: var(--checkbox-accent) !important; }
#progress-fill { background: linear-gradient(to right, var(--progress-fill-from), var(--progress-fill-to)) !important; }
.bg-white\/10, .border-white\/20, .border-cyan-400\/30 { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
.focus\:border-cyan-400:focus { border-color: var(--primary-cyan) !important; }

/* SVG logo paths */
#path1 { fill: var(--logo-L) !important; stroke: var(--logo-L) !important; }
#path2 { fill: var(--logo-G) !important; stroke: var(--logo-G) !important; }
#path3 { fill: var(--logo-I) !important; stroke: var(--logo-I) !important; }
#path4 { fill: var(--logo-ball) !important; stroke: var(--logo-ball) !important; }



/* ================================================
   INDEX.HTML CARD HOVER EFFECTS — FINAL VERSION
   Now Available = fire orange (#ff5500) highlight
   Coming Soon   = clearly greyed-out / inactive look
   ================================================ */

#tools .grid > div {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==================== NOW AVAILABLE CARDS ==================== */
#tools .grid > div.border.border-cyan-400.rounded-3xl.p-8 {
    border-color: var(--primary-cyan) !important;
}

/* Hover: Fire Orange (#ff5500) border + strong glow */
#tools .grid > div.border.border-cyan-400.rounded-3xl.p-8:hover {
    border-color: #ff5500 !important;
    transform: translateY(-8px) scale(1.04) !important;
    box-shadow: 0 20px 25px -5px rgb(255 85 0 / 0.4),
                0 0 0 2px rgb(255 85 0 / 0.3) !important;
}

/* ==================== COMING SOON CARDS ==================== */
#tools .grid > div.border.border-white\/10.rounded-3xl.p-8 {
    opacity: 0.65 !important;
    filter: grayscale(0.6) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Very subtle hover for Coming Soon (no strong lift) */
#tools .grid > div.border.border-white\/10.rounded-3xl.p-8:hover {
    opacity: 0.85 !important;
    filter: grayscale(0.3) !important;
    transform: translateY(-3px) scale(1.02) !important;
    border-color: #ff5500 !important;
    box-shadow: 0 10px 15px -5px rgb(255 85 0 / 0.2) !important;
}

/* Premium / Founder badge */
@keyframes premium-shimmer {
            0%   { transform: translateX(-220%); }
            100% { transform: translateX(420%); }
        }

        .premium-badge {
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            background: linear-gradient(90deg, #1e2937, #334155 30%, #64748b 50%, #334155 70%, #1e2937);
            color: #f8fafc;
            font-weight: 700;
            font-size: 10px;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: 9999px;
            border: 1px solid #67e8f9;
            box-shadow: 
                0 0 18px -2px rgb(103 232 249),
                inset 0 1px 0 rgba(255,255,255,0.35),
                0 2px 5px -2px rgb(15 23 42);
            white-space: nowrap;
        }

        .premium-badge::before {
            content: '';
            position: absolute;
            top: -60%;
            left: -150%;
            width: 60%;
            height: 320%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.95),
                transparent
            );
            animation: premium-shimmer 2.4s linear infinite;
            transform: skewX(-25deg);
            z-index: 1;
        }

        .premium-badge span {
            position: relative;
            z-index: 2;
        }
        
/* Crypto Button */
@keyframes crypto-shimmer {
        0%   { transform: translateX(-220%); }
        100% { transform: translateX(420%); }
    }

    .crypto-btn {
        position: relative;
        overflow: hidden;
        background: linear-gradient(90deg, #e08700, #ff5500, #e08700);
        color: #0f172a;
        font-weight: 700;
        letter-spacing: 0.5px;
        border: 2px solid #e08700;
        box-shadow: 
            0 0 25px -4px #e08700,
            0 0 45px -6px #ff5500,
            inset 0 2px 4px rgba(255,255,255,0.4);
    }

    .crypto-btn:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 
            0 0 40px 12px #e08700,
            0 0 65px 18px #ff5500;
    }

    .crypto-btn::before {
        content: '';
        position: absolute;
        top: -60%;
        left: -150%;
        width: 65%;
        height: 320%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent
        );
        animation: crypto-shimmer 2.6s linear infinite;
        transform: skewX(-25deg);
        z-index: 1;
    }

    .crypto-btn span {
        position: relative;
        z-index: 2;
    }
    
/* Paypal button */
/* PAYPAL BUTTON – clean, professional, subtle cyan accent glow (not flashy) */
    .paypal-btn {
        position: relative;
        overflow: hidden;
        background: #003087;
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0.5px;
        border: 2px solid #1e40af;
        box-shadow: 
            0 0 12px -3px #67e8f9,
            inset 0 2px 4px rgba(255,255,255,0.25);
        transition: all 0.2s ease;
    }

    .paypal-btn:hover {
        background: #002366;
        border-color: #67e8f9;
        box-shadow: 
            0 0 20px 6px rgba(103, 232, 249, 0.4),
            0 4px 12px -2px rgba(15, 23, 42, 0.3);
        transform: translateY(-2px);
    }
    


/* ================================================
   6×4 LANDSCAPE RECIPE CARDS — FINAL POLISH
   6" wide × 4" tall
   Title on top left, photo below with matching bottom margin
   Card numbering moved to top-right corner
   ================================================ */
/* ================================================
   PRINT MEDIA QUERIES — GLOBAL PRINT RESET
   Must come BEFORE the @media print block so body background resets first
   ================================================ */
@media print {
    /* Global print reset — always white background, black text */
    body {
        background: white !important;
        color: black !important;
    }

    body * { visibility: hidden; }
    .print-4x6-container,
    .print-4x6-container *,
    .print-4x6-card,
    .print-4x6-card * { visibility: visible !important; }

    .print-4x6-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4in !important;
        padding: 0.4in !important;
        background: white !important;
        max-width: 8.5in !important;
        margin: 0 auto !important;
    }

    .print-4x6-card {
        width: 6in !important;
        height: 4in !important;
        background: white !important;
        border: 2.5px solid #1f2937 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
        display: flex !important;
        flex-direction: row !important;
        page-break-inside: avoid !important;
        position: relative !important;
    }

    .print-4x6-inner { display: flex !important; width: 100% !important; height: 100% !important; }

    /* LEFT COLUMN — Tighter top margin for balanced look */
    .print-4x6-left-column {
        width: 2.25in !important;
        height: 100% !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0.15in 0.22in 0.22in 0.22in !important;   /* ← top reduced for balanced whitespace */
        justify-content: flex-start !important;
        gap: 0.18in !important;
        box-sizing: border-box !important;
    }

    .print-4x6-title-banner {
        background: linear-gradient(to right, #c2410f, #f59e0b) !important;
        color: white !important;
        padding: 0.18in 0.22in !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    /* FIXED PHOTO AREA — clean white space underneath */
    .print-4x6-photo-side {
        width: 100% !important;
        height: 1.85in !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .print-4x6-photo-side img,
    .print-4x6-placeholder {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
    }

    .print-4x6-placeholder {
        background: linear-gradient(135deg, #ff5500, #e08700) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 3rem !important;
        color: white !important;
    }

    .print-4x6-title {
        font-size: 1.08rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
    }

    .print-4x6-meta {
        font-size: 0.73rem !important;
        color: #fff !important;
        margin-top: 0.08in !important;
    }

    /* RIGHT COLUMN — Ingredients */
    .print-4x6-right-column {
        flex: 1 !important;
        padding: 0.22in 0.28in 0.22in 0.18in !important;
        display: flex !important;
        flex-direction: column !important;
        font-size: 0.78rem !important;
        line-height: 1.32 !important;
    }

    .print-4x6-section { flex: 1 !important; }

    .section-header {
        background: linear-gradient(to right, #c2410f, #f59e0b) !important;
        color: white !important;
        padding: 0.07in 0.5in !important;
        border-radius: 6px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        margin-bottom: 0.15in !important;
        text-align: center !important;
    }

    .print-4x6-ingredients {
        margin: 0 !important;
        padding-left: 1.1em !important;
        flex: 1 !important;
    }
    .print-4x6-ingredients li {
        margin-bottom: 0.18rem !important;
    }

    /* BACK CARD */
    .print-4x6-back-card {
        width: 100% !important;
        height: 4in !important;
        padding: 0.35in !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .print-4x6-instructions-full {
        flex: 1 !important;
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }

    .print-4x6-continued-header {
        background: linear-gradient(to right, #c2410f, #f59e0b) !important;
        color: white !important;
        padding: 0.25in 0.25in !important;
        text-align: center !important;
    }

    /* Card numbering — TOP RIGHT corner (Front / Back badge) */
    .card-numbering {
        position: absolute !important;
        top: 0.22in !important;
        right: 0.22in !important;
        font-size: 0.65rem !important;
        color: #64748b !important;
        font-weight: 600 !important;
        background: rgba(255,255,255,0.95) !important;
        padding: 4px 12px !important;
        border-radius: 9999px !important;
        border: 1px solid #e2e8f0 !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }
}

/* Dark mode step styling (on-screen only) */
#instructions p,
.prose.recipe-instructions p {
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: 1.5rem;
}

#instructions p::before,
.prose.recipe-instructions p::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--primary-cyan);
    font-size: 1.1rem;
    line-height: 1.3;
    width: 2.25rem;
}

/* Auto-hide ::before on paragraphs that don't have Step numbering */
#instructions p:not([data-step])::before,
.prose.recipe-instructions p:not([data-step])::before {
    content: "";
    display: none;
}