/* ===============================
   1. THE STAGE (Background & Centering)
================================ */
:root {
    /* Base Colors */
    --bg: #03050a;
    --glow: #00d4ff;
    
    /* Glass Lensing Elements */
    --glass: rgba(255, 255, 255, 0.015); /* Keep it very transparent */
    --glass-rim: rgba(255, 255, 255, 0.6); /* Bumped up opacity  */
    --glass-border: rgba(255, 255, 255, 0.15);
    
    /* Aurora Colors for Beams */
    --color-1: #00d4ff;
    --color-2: #4a29ff;

    /* Missing Colors for the Generate Button */
    --sp-aurora-purple: #7c4dff;
    --sp-aurora-cyan: #00d4ff;
    --liquid-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
}

body {
    font-family: -apple-system, "SF Pro Display", sans-serif;
    background: #03050a;
    color: white;
    
    /* 1. The Dynamic Height Fix */
    min-height: 100vh;
    min-height: 100dvh; /* 'dvh' specifically fixes mobile Safari address bar issues */
    
    /* 2. Turn the body into a flex container to control the scaler */
    display: flex; 
    flex-direction: column;
    
    margin: 0;
    padding: 0;
    zoom: 1 !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevents horizontal scrollbar glitches */
}

/* Apply the 75% zoom ONLY to app content (id=app-scaler in base.html) */
#app-scaler {
    zoom: 0.75;
    width: 100%;
    
    /* 4. 'flex: 1' tells this wrapper to perfectly fill the body's height */
    flex: 1; 
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    /* The 80px restores your h1 spacing at the top */
    padding: 80px 20px 40px 20px; 
}

/* Ensure the footer strictly pushes to the bottom of the scaler */
.global-footer {
    margin-top: auto; 
    width: 100%;
}

/* Keep the cookie banner safe and normal-sized */
#cc--main {
    zoom: 1 !important;
    position: fixed !important;
    z-index: 999999 !important;
}

/* Prevent Safari auto-zoom on mobile inputs */
@media screen and (max-width: 768px) {
    input[type="text"], 
    textarea, 
    select {
        font-size: 16px !important; /* Forces Safari to stay still */
    }
}

/* The Ambient Gradient Background Layer (Behind everything) */

/* The Ambient Deep Space Layer */
.liquid-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #03050a; /* Pure deep black, no dirty waves */
}

/* The Massive Color Beams */
.blob {
    position: absolute;
    width: 90vw;
    height: 90vw;
    max-width: 1000px;
    filter: blur(140px);
    opacity: 0.4;
    border-radius: 50%;
    will-change: transform;
}

/* Start positions stay diagonal */
.blob-1 {
    top: -25%;
    left: -25%;
    background: radial-gradient(circle, var(--color-1) 0%, transparent 70%);
    animation: appleFlow1 40s linear infinite;
}

.blob-2 {
    bottom: -25%;
    right: -25%;
    background: radial-gradient(circle, var(--color-2) 0%, transparent 70%);
    animation: appleFlow2 40s linear infinite;
}

@keyframes appleFlow1 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30vw, 10vh); }
    50%  { transform: translate(40vw, 40vh); }
    75%  { transform: translate(10vw, 30vh); }
    100% { transform: translate(0, 0); }
}

@keyframes appleFlow2 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-30vw, -10vh); }
    50%  { transform: translate(-40vw, -40vh); }
    75%  { transform: translate(-10vw, -30vh); }
    100% { transform: translate(0, 0); }
}


/* Make paragraphs and instructions more legible */
.form-step p, .instruction {
    color: rgba(255, 255, 255, 0.858);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ===============================
   2. THE HEADER (Centered)
================================ */
.header-area {
    width: 100%;
    /* No max-width here so it centers perfectly relative to the body */
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

h1 { 
    font-size: 4rem; 
    font-weight: 800; 
    letter-spacing: -2px; 
    
    /* The Metallic Gradient */
    background: linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%);
    
    /* These three lines work together to clip the color to the text letters */
    background-clip: text; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Standard fallback */
    
    /* Optional: A subtle glow to make the 'Liquid' feel pop */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

h3 { 
        font-size: 1.7rem; 
        letter-spacing: -1px; 
        margin-bottom: 20px;
        margin-left: 10px;
        /* The Metallic Gradient */
        background: linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%);
        /* These three lines work together to clip the color to the text letters */
        background-clip: text; 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent; /* Standard fallback */
        /* Optional: A subtle glow to make the 'Liquid' feel pop */
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));

}


/* ===============================
   3. THE LIQUID MODULES (Forms)
================================ */
.form-step {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    padding: 40px;
    margin: 0 auto 40px auto; /* This margin creates the gap between steps */
    
    /* 1. Base Glass (All steps get this) */
    background: var(--glass);
    isolation: isolate; 
    backface-visibility: hidden;
    border-radius: 40px;
    border: 1px solid var(--glass-border);

    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),  /* Sharp top 'bevel' edge */
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.4),      /* Dark bottom 'occlusion' edge */
        0 40px 80px rgba(0, 0, 0, 0.6);           /* Outer ambient shadow */
    
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smoother Apple-like transition */
    will-change: transform, opacity;

    /* Base Shadow */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* THE SHARED LENSING LAYER (All steps blur the background) */
.form-step::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    transition: backdrop-filter 0.4s ease, background 0.4s ease;
}

/* 2. THE ACTIVE STEP (The "Premium" Effects) */
.form-step.active {
    opacity: 1;
    transform: scale(1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.5), /* Thicker specularity */
        inset 0 0 20px rgba(0, 0, 0, 0.3),          /* Internal depth */
        0 0 60px rgba(0, 212, 255, 0.15),           /* External glow */
        0 40px 80px rgba(0, 0, 0, 0.8);
}

/* This is where we move the Apple Edge and the 'Bump' */
.form-step.active::before {
    /* The Lensing 'Bump' - Only happens when active */
    backdrop-filter: blur(50px) saturate(210%) brightness(110%);
    -webkit-backdrop-filter: blur(50px) saturate(210%) brightness(110%);

    /* The Apple Edge - Only at the top of the ACTIVE form */
    background: linear-gradient(
        135deg,
        var(--glass-rim) 0%,
        rgba(255, 255, 255, 0.05) 15%,
        transparent 40%
    );
        
    /* Inner Depth */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
}

/* 3. THE INACTIVE STEPS (Hide the edges) */
.form-step:not(.active) {
    opacity: 0.3; /* Dim them */
    transform: scale(0.95); /* Shrink them slightly */
    pointer-events: none; /* Can't click them */
    filter: grayscale(0.5); /* Make them look 'disabled' */
    
    /* Remove the rim light and heavy shadow for inactive steps */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}



/* ===============================
   4. BUTTON GRIDS (Horizontal on PC)
================================ */
.vibe_grid, .use_case_grid, .btn-group {
    display: grid;
    /* This makes buttons sit 3-wide on PC instead of stacking like mobile */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    width: 100%;
    margin-top: 25px;
}

.choice-btn {
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    isolation: isolate;
    border-radius: 20px;
}

/* 🔵 BACKGROUND LAYER (this scales) */
.choice-btn .btn-bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;

    background: linear-gradient(145deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.5),
        inset 0 -6px 12px rgba(0,0,0,0.4),
        0 10px 20px rgba(0,0,0,0.3);

    /* transition to a "premium" snap */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease, 
                filter 0.3s ease;
}

/* 🔴 TEXT LAYER (never scales) */
.choice-btn .btn-text {
    position: relative;
    z-index: 2;
    display: block;
    padding: 18px 15px;

    font-size: 16px;
    font-weight: 600;
    color: white;

    /* keep it crisp */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* This creates the "static" reflection on the top-left edge 
   so the button always looks like glass, even when not moving. */
.choice-btn .btn-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.4),
        transparent 60%
    );
    opacity: 0.2;
    pointer-events: none;
    z-index: 1; /* Ensure it stays above the base color */
}

/* This is the light that follows your cursor. 
   It's invisible (opacity 0) until you hover. */
.choice-btn .btn-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.25),
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2; /* Glow stays on top */
}

/* Glow trigger: Turns on the dynamic mouse glow (::after) when the mouse enters. */
.choice-btn:hover .btn-bg::after {
    opacity: 1;
}

/* The Selected State: We target .btn-bg INSIDE the active button.*/
.choice-btn.active .btn-bg {
    background: linear-gradient(145deg, #00d4ff, #6a5cff);
    color: white;
    box-shadow:
        0 10px 30px rgba(0,212,255,0.5),
        inset 0 2px 5px rgba(255,255,255,0.4);
}

/* Grows the background and makes it pop.*/
.choice-btn:hover .btn-bg {
    transform: scale(1.06);
    filter: brightness(1.3);
    
    /* Adds a subtle cyan under-glow to match your active state */
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.6),
        inset 0 -6px 12px rgba(0,0,0,0.4),
        0 15px 25px rgba(0, 212, 255, 0.15);
}

/* Shows a glowing ring if someone uses a keyboard 
   to navigate, which is a "must-have" for modern web standards. */
.choice-btn:focus-visible {
    outline: 2px solid var(--glow);
    outline-offset: 2px;
}

/* Organizes the buttons into 3 equal columns 
   and centers them on the page. */
.btn-group {
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
    margin: 25px auto 0;
}

/* BACK BUTTON */
/* Kill the mobile 'Back' button look on PC */
.back-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 30px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3);
}

/* NEXT BUTTON */
/* 1. Elevate the Next Step Button */
.next-btn .btn-bg {
    /* Use your cyan glow as a subtle border/glow even when not hovered */
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.15), rgba(255, 255, 255, 0.05)) !important;
}

.next-btn .btn-text {
    color: var(--glow) !important; /* Make text color the brand color */
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. Responsive Hover (High Quality, Low Intensity) */
.next-btn:hover .btn-bg {
    /* Instead of solid colors, we use 60% opacity so the background still peeks through */
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.6), rgba(74, 41, 255, 0.6)) !important;
    
    /* Soften the glow: more blur (50px), less opacity (0.3) */
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.15),
        inset 0 2px 5px rgba(255, 255, 255, 0.2) !important;
    
    border-color: rgba(140, 136, 136, 0.3) !important;
}

.next-btn:hover .btn-text {
    color: rgb(255, 255, 255) !important;
}


/* ===============================
   Specific button -> Text - input field
================================ */
/* red plus sign for specific theme button */
.red-signal {
    color: #ff3b30; /* Apple-style vibrant red */
    font-weight: 900;
    margin-left: 5px;
    text-shadow: 0 0 8px rgba(255, 59, 48, 0.5);
}

/* Targeted styles for the specific theme input */
#manual_entry {
    width: 100%;
    max-width: 500px; /* Aligns with your btn-group width */
    margin: 25px auto 0 !important;
    text-align: left;
}

#manual_entry p {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
}

#manual_entry input[type="text"] {
    width: 100% !important; /* Stretch to form size */
    padding: 18px 22px !important;
    border-radius: 20px !important; /* Match button radius */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.3) !important; /* The 'Pressed-In' Well look */
    color: white !important;
    font-size: 16px !important;
    
    /* Internal Shadow for depth */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

#manual_entry input[type="text"]:focus {
    outline: none;
    border-color: var(--glow) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 
                0 0 15px rgba(0, 212, 255, 0.15);
}

/* ===============================
   THE EFFORT LEVEL LABELS (PC & Mobile)
================================ */
.effort-label {
    font-size: 16px;      /* Increased from 11px to 15px for readability */
    font-weight: 500;     /* Medium weight stops the 'blur' effect */
    color: #ffffff;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    padding: 0 5px;       /* Prevents text from touching neighbors */

    /* THE SHARPNESS STACK */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0); /* Pushes text to its own high-res layer */
    text-rendering: optimizeLegibility;
    
    /* Extra edge-definition for standard monitors */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);

    will-change: transform, opacity;
}

/* Make the text inside the parenthesis slightly smaller and cleaner */
.effort-label br + text, 
.effort-label {
    line-height: 1.3;
}

/* Hover effect to show they are clickable */
.effort-label:hover {
    opacity: 1;
    color: var(--glow);
}


/* ===============================
   7. THE PREMIUM SLIDER
================================ */
/* Update these specific parts in your Premium Slider section */

input[type=range] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    /* This ensures the thumb doesn't overflow the container */
    margin: 0; 
    padding: 0;
}

/* THE TRACK */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Add this to prevent the "jump out of border" look */
    cursor: pointer;
}

/* THE THUMB */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #ffffff;
    
    /* THE FIX: This centers the thumb vertically on the 8px track */
    margin-top: -9px; 
    
    border: 2px solid var(--glow);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
    
    /* Smooth out the "snap" movement */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* FIREFOX SUPPORT (Just in case) */
input[type=range]::-moz-range-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background: #fff;
    border: 2px solid var(--glow);
    border-radius: 50%;
}

/* ===============================
   8. THE GENERATE BUTTON (Glow Effect)
================================ */
#generate-btn {
    width: 100%;
    max-width: 380px;
    padding: 22px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    
    /* 1. Iridescent Flow Gradient */
    background: linear-gradient(135deg, var(--sp-aurora-purple), #ff2d55, var(--sp-aurora-cyan));
    background-size: 200% 200%;
    animation: iridescentFlow 5s infinite linear;
    
    border-radius: 30px;
    /* 2. Higher contrast border for the 'Glass Bump' */
    border: 1px solid rgba(255, 255, 255, 0.5); 
    cursor: pointer;
    
    /* 3. The Specular Highlight (The 'Bump') */
    box-shadow: 
        /* Top white 'Rim' light */
        inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
        /* Bottom 'Depth' shadow inside the button */
        inset 0 -2px 10px rgba(0, 0, 0, 0.3),
        /* Outer ambient glow */
        0 15px 40px rgba(124, 77, 255, 0.4);
        
    transition: all 0.5s var(--liquid-ease);
}

#generate-btn:hover {
    transform: translateY(-4px) scale(1.03);
    /* Make the rim light even brighter on hover */
    box-shadow: 
        inset 0 1.8px 0 rgba(255, 255, 255, 0.9),
        0 20px 50px rgba(0, 212, 255, 0.6);
    filter: brightness(1.15);
}

#generate-btn:active {
    transform: scale(0.96);
}


@keyframes iridescentFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* ===============================
   9. STEP 3 ALIGNMENT
================================ */
#step-3-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* ===============================
   10. Glass Breathing Animation
================================ */
@keyframes glassBreath {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.01);
    }
}

/* ===============================
   X. PREMIUM COUNTER GRID (Page 1 - Step 2) (m,f,n)
================================ */
/* Kill any instruction text stretching */
.instruction {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    text-align: center;
}

/* Arrange counters horizontally on PC, stack on mobile */
.counter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

/* The 'Pressed-In' Well look */
.counter-well {
    background: rgba(0, 0, 0, 0.2); /* Darker indented background */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); /* Ambient Occlusion */
    transition: all 0.3s ease;
}

.counter-well .label {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    color: var(--glow); /* Accent Color hint */
    margin-bottom: 15px;
}

/* Container for +/- and the big number */
.counter-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* THE BIG NUMBER */
.counter-value {
    font-size: 2.5rem; /* Larger text for immediate impact */
    font-weight: 800;
    color: #fff;
    min-width: 40px; /* Prevents shifting */
    text-align: center;
    line-height: 1;
}

/* The Liquid Glass +/- Buttons */
.ctrl-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%; /* Circle */
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Navigation button tweak so it looks like an 'Action' */
.action-btn {
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===============================
   📱 THE MASTER MOBILE UI 
================================ */
@media (max-width: 768px) {
    /* 1. Global Spacing & Typography */
    body {
        padding: 20px 15px 40px 15px; 
    }

    h1 { 
        font-size: 2.4rem; 
        letter-spacing: -1px; 
        margin-bottom: 30px;
    }

    h3 { 
        font-size: 1.8rem; 
        letter-spacing: -1px; 
        margin-bottom: 10px;
        margin-left: 15px;
    }
    

    /* Slightly bigger text for instructions (Addresses your request) */
    .form-step p, .instruction {
        font-size: 1.2rem; 
        margin-bottom: 20px;
    }

    .form-step { 
        padding: 30px 20px; /* Better padding for thumbs */
        border-radius: 35px; 
        /* Slightly stronger glass on mobile to separate from the dark background */
        background: rgba(255, 255, 255, 0.04); 
    }

    /* 2. THE TILE GRID (Steps 1 & 2) - Side-by-Side Cards */
    .vibe_grid, .use_case_grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 columns */
        gap: 12px;
    }

    /* Keep the Gender/Single buttons stacked since there are 3 of them */
    .btn-group {
        grid-template-columns: 1fr !important; 
        gap: 15px;
    }

    .choice-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 90px; /* Gives them that high-end 'App Card' feel */
        padding: 15px;
        font-size: 1.3rem; /* Bolder text */
        border-radius: 22px;
    }

    /* 3. THE COUNTERS (Group Selector) - Vertical Stack */
    .counter-grid {
        display: flex !important;
        flex-direction: column !important; /* Forces them one above another */
        gap: 15px; /* Consistent spacing between cards */
        width: 100%;
    }

    /* Ensures the Neutral button stays the same size as M and F */
    .counter-well:nth-child(3) {
        grid-column: auto; 
    }

    /* Premium "Well" design for the counter cards */
    .counter-well {
        flex-direction: column !important; 
        align-items: center;
        justify-content: center;
        padding: 25px 20px !important;
        min-height: 140px; /* Uniform height for all three */
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 25px;
    }

    /* High-contrast labels for the counters */
    .counter-well .label {
        font-size: 1rem;
        margin-bottom: 12px !important;
        letter-spacing: 2px;
        opacity: 0.8;
    }

    /* Centers the +/- buttons and the number horizontally */
    .counter-controls {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px; /* Plenty of room for thumbs */
    }

    /* Large, bold numbers for immediate feedback */
    .counter-value {
        font-size: 2.8rem; 
        font-weight: 800;
        min-width: 60px; /* Keeps the buttons from jumping when numbers change */
        text-align: center;
    }

    /* Plus/Minus buttons sized for human thumbs (48px target) */
    .ctrl-btn {
        width: 48px; 
        height: 48px;
        font-size: 1.8rem;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 4. STEP 3 FIXES (Slider, Input, Generate) */
    #step-3-buttons {
        gap: 30px; /* Gives the slider, input, and final button room to breathe */
    }

    /* Make the manual text entry field chunkier for mobile typing */
    #manual_entry input[type="text"] {
        padding: 20px 24px !important;
        font-size: 1.1rem !important;
        border-radius: 24px !important;
        text-align: center; /* Centers the text on mobile for better visual balance */
    }

    /* The Premium Slider on Mobile */
    .effort-label {
        font-size: 16px; /* Ensures labels fit neatly on small screens */
    }

    input[type=range]::-webkit-slider-thumb {
        width: 30px; /* Larger hit area for thumbs */
        height: 30px;
        margin-top: -12px; /* Re-center the larger thumb */
    }

    /* Make the final Call to Action massive and inviting */
    #generate-btn {
        max-width: 100%;
        padding: 24px;
        font-size: 1.25rem;
        border-radius: 25px;
        margin-top: 10px;
    }

    /* 5. NAVIGATION (Back / Next) */
    .next-btn {
        margin-top: 30px !important;
        padding: 20px !important;
        width: 80% !important; /* Makes it slightly narrower than the form */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Evolve the Back Button into a proper mobile target */
    .back-btn {
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 18px;
        font-size: 1rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.05) !important; /* Gives it physical mass on mobile */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px;
        color: rgba(255, 255, 255, 0.6) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 1; 
        text-align: center;
    }
    
    .back-btn:active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
}

/* ===============================
   OPTIONS PAGE: THE CAROUSEL
================================ */
.options-container {
    max-width: 100%; /* Take full width for the carousel */
    padding-top: 20px;
}

.ideas-carousel-wrapper {
    width: 100vw; /* Stretch across the screen */
    margin-left: calc(-50vw + 50%); /* Pull it out of the container bounds */
    overflow: hidden;
}

.ideas-grid {
    display: flex;
    gap: 10px; /* Space between cards */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* The magic snap */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    padding: 20px 0;
    align-items: center; /* Center them vertically so shrinking looks right */
}

.ideas-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* Invisible spacers so the first/last cards can snap to the center */
.carousel-spacer {
    flex: 0 0 calc(50vw - (min(85vw, 400px) / 2) - 15px); 
}



/* ===============================
   OPTIONS PAGE: VOLUMETRIC CARDS
================================ */

.idea-card {
    /* Card Width Logic:
       On mobile: takes up 80% of the screen.
       On PC: caps out at 400px wide.
    */
    flex: 0 0 clamp(280px, 80vw, 400px); 
    scroll-snap-align: center;
    position: relative;
    
    /* The Volumetric Glass Base */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px;
    
    /* Smooth transitions for the JS scaling effect */
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), 
                opacity 0.2s ease, 
                filter 0.2s ease;
    
    /* Initially set to the 'shrunk' state (JS will fix the center one) */
    transform: scale(0.85);
    opacity: 0.6;
    filter: brightness(0.7);
}

/* The state when the card is in the center (Triggered by JS) */
.idea-card.is-active-card {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1.1);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3), /* Sharp top edge */
        0 30px 60px rgba(0, 0, 0, 0.8),          /* Heavy drop shadow */
        0 0 40px rgba(0, 212, 255, 0.1);         /* Soft ambient glow */
}

/* The Image Area */
.image-container {
    width: 100%;
    aspect-ratio: 9/16; /* Perfect mobile portrait */
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #111; /* Placeholder while loading */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.idea-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the whole image fits without cropping */
}

/* Text Formatting */
.card-content h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: -0.5px;
}

.idea-hook {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limits to 3 lines */
    line-clamp: 3;                /* Standard version of -webkit-line-clamp */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The 'Manifest' Button */
.select-btn {
    width: 100%;
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.8), rgba(0, 212, 255, 0.8));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}


.select-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.3),
                inset 0 2px 5px rgba(255, 255, 255, 0.5);
    filter: brightness(1.15);
}

.select-btn:active {
    transform: scale(0.95);
}

/* ===============================
   DESKTOP OVERRIDES (The Apple Grid)
================================ */
@media (min-width: 800px) {
    /* 1. Let the container stretch so we can scroll smoothly */
    .ideas-carousel-wrapper {
        max-width: 100%;
        margin: 0;
        overflow: visible; /* allow shadows to escape */
        padding: 20px 0 40px; /* Breathing room top and bottom */
    }

    /* 2. Nowrap forces a single line */
    .ideas-grid {
        display: flex;
        flex-wrap: nowrap; 
        justify-content: center; /* center the whole row */
        gap: 30px;
        padding: 40px 5vw; /* gives space for shadow to exist and margin on the sides of the screen */
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: visible; /* 🔥 allows shadows above/below */
        scroll-snap-type: x mandatory;
    }

    /* 3. Hide scrollbars for that clean Apple look */
    .ideas-grid::-webkit-scrollbar {
        display: none;
    }
    .ideas-grid {
        scrollbar-width: none;
    }

    /* 4. The Apple Card Shape (Tall, Poster-like) */
    .idea-card {
        flex: 0 0 380px; /* Big, fixed width */
        aspect-ratio: 9 / 16; /* ✅ SAME as mobile */
        padding: 0;      /* Remove mobile padding for full-bleed images */
        overflow: hidden; /* Keep the corners rounded */
        
        /* Force them to be fully visible on PC, ignoring JS scaling */
        transform: scale(1) !important;
        opacity: 1 !important;
        filter: brightness(1) !important;
        
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
    }

    /* Classy hover lift */
    .idea-card:hover {
        transform: translateY(-8px)  !important;
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.6), 
            0 0 30px rgba(0, 213, 255, 0.204); 
    }

    /* 5. Full-Bleed Image Container */
    .image-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0; 
        border: none;
    }

    .idea-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 6. Typography & Gradient Overlay (Apple usually left-aligns) */
    .card-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Pushes text/button to the bottom */
        padding: 120px 40px 30px;
        
        /* SMOOTHER GRADIENT (less aggressive, more premium) at the bottom so the white text always pops */
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.95) 0%,
            rgba(0,0,0,0.75) 35%,
            rgba(0,0,0,0.3) 65%,
            transparent 100%
        ); 
    }

    .card-content h2 {
    font-weight: 800;
    margin-bottom: 6px;

    /* CLEAN WRAPPING */
    word-break: break-word;
    line-height: 1.15;
}

    .idea-hook {
        text-align: center;
        font-size: 1.1rem;
        margin-bottom: 25px;
    }

    /* 7. Spacers so you can scroll to the very end comfortably */
    .carousel-spacer {
        display: block; 
        flex: 0 0 2vw; 
    }
}

/* ===============================
   PREMIUM LOADER (Responsive & Scaled for Monitor)
================================ */
#loading-container {
    position: fixed; 
    /* The Fix: 'inset: -5px' kills the "line on top" by over-extending slightly */
    inset: -5px; 
    
    /* Darker, more opaque background to hide the UI behind it better */
    background: rgba(3, 5, 10, 0.92); 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    display: none; /* Controlled by JS */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Stay above everything */
}

.cute-loader {
    font-size: clamp(4rem, 10vw, 6rem);
    /* A slow, gentle 3-second floating loop */
    animation: float 3s ease-in-out infinite; 
    filter: drop-shadow(0 10px 15px rgba(0, 212, 255, 0.4));
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); } /* Bobs up slightly */
}


#loading-text {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 500; /* Softer, less aggressive weight */
    letter-spacing: 2px; /* Relaxed spacing */
    transition: opacity 0.3s ease-in-out; /* This makes the JS .opacity change look like a fade */
    opacity: 1;
    
    /* Softer gradient */
    background: linear-gradient(to right, #aee2ff, #b39ddb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Slower, softer pulse */
    animation: softPulse 3s infinite ease-in-out;
    text-transform: none; /* Removing uppercase makes it feel friendlier */
}

@keyframes softPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* ===============================
   BOUTIQUE LAYOUT V2 (ULTRA-WIDE)
================================ */

/* 1. MAKE IT WIDER */
.boutique-container {
    max-width: 100%; /* Changed from 1400px so the carousel can bleed off the edges */
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Prevents horizontal scroll on the whole page */
}

/* --- Keep the header centered like the old layout --- */
.boutique-header-centered {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 10px;
}
.boutique-header-centered header {
    text-align: center; /* Keeps it aligned with the left edge of the 1400px box */
}


/* --- THE SWIPEABLE WRAPPER --- */
.characters-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible; /* Allows drop shadows to render outside the box */
    scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    gap: 30px; /* Space between the character cards */
    
    /* The Centering Math Trick
       This calculates half the viewport minus half the card width.
       It forces the first card to start exactly in the center, 
       and allows the last card to end exactly in the center.
    */
    padding: 40px calc(50vw - clamp(150px, 42.5vw, 650px)) 80px;
    
    /* Hide scrollbars for a clean look */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    perspective: 1000px;
    align-items: center; /* Ensures cards stay vertically centered if they grow/shrink */
}

.characters-carousel::-webkit-scrollbar {
    display: none;
}

/* --- THE Character Items CARD ITSELF --- */
.character-boutique-card {
    /* Set to 85vw on mobile so 15vw is left over for the gap and the next card */
    flex: 0 0 clamp(300px, 85vw, 1300px); 
    scroll-snap-align: center;
    will-change: transform, opacity, filter; /* Preps the browser for JS animation */
    
    /* Your original beautiful styling: */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    padding: 50px; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);

    /* 1. Ensure the card scales from its center */
    transform-origin: center center;

    /* 2. Remove any CSS transitions on transform/opacity 
       If this exists, it will make the JS animation look laggy or broken */
    transition: none !important; 

    /* 3. Forces the browser to use the GPU for smoother scaling */
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.boutique-split {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    
}

.boutique-left {
    flex: 0 0 32%; /* Slightly smaller portrait to favor the items */
    position: sticky;
    top: 60px;
}

.boutique-right {
    flex: 1;
}

/* 2. THE 3-ITEM AMAZON GRID */
.product-row-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 25px;
}

.item-meta { margin-bottom: 20px; }

.amazon-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* FORCES 3 COLUMNS */
    gap: 15px;
}

.amazon-mini-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}

.amazon-mini-card:hover { background: rgba(0,0,0,0.5); }

.amazon-img-wrapper {
    background: white;
    border-radius: 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-bottom: 12px;
}

.amazon-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.amazon-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Ensures the price and button never touch */
    width: 100%;
}

.amazon-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--glow);
}

.amazon-buy-btn {
    background: #ff9900;
    color: black;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem; 
    padding: 8px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap; /* Forces "SHOP ON AMAZON" to stay on one line */
    flex-shrink: 0;      /* Prevents the button from being squished */
}

/* 3. ATTRACTIVE MANUAL LINKS (Tier 3) */
.manual-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.manual-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.manual-subtitle {
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.manual-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.manual-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: var(--glow);
}

.search-icon {
    font-size: 1.5rem;
    background: rgba(255,255,255,0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.manual-item-name {
    display: block;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.manual-cta {
    font-size: 0.8rem;
    color: var(--glow);
    font-weight: 500;
}

/* MOBILE FIXES */
@media (max-width: 1000px) {

    .boutique-split { flex-direction: column; }
    .boutique-left { position: static; width: 100%; }
    .character-boutique-card { 
        /* Shrunk from 85vw to 80vw to leave 20vw of empty space */
        flex: 0 0 80vw; 
        padding: 20px; 
    }

    .characters-carousel {
        /* Gap pulls the next card closer.
           10vw padding perfectly centers the 80vw card (10 + 80 + 10 = 100).
           This guarantees the next card will peek into the screen. 
        */
        gap: 15px; 
        padding: 20px 10vw 60px; 
        animation: hint-swipe 1.5s ease-in-out 1;
    }

    /* Subtle hint: Horizontal bounce animation on load */
@keyframes hint-swipe {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
}

    /* This forces the box to stretch to the full form width */
    .amazon-grid-3 { 
        grid-template-columns: 1fr; 
        width: 100%; 
        gap: 12px;
    }

    /* Shrink the price font for mobile so it fits the button row */
    .amazon-price {
        font-size: 0.95rem;
    }
}
/* TABLETS */
@media (min-width: 600px) and (max-width: 1000px) {
    /* Keeps items side-by-side but ensures they fill the container */
    .amazon-grid-3 { 
        grid-template-columns: repeat(3, 1fr); 
        width: 100%;
    } 

    /* Keep price slightly larger on tablets than on phones */
    .amazon-price {
        font-size: 1rem;
    }
}