@import url('footer_styles.css');
@import url('guarantee_styles.css');
@import url('pricing_update.css');

:root {
    --primary-color: #5E60CE;
    --secondary-color: #6930C3;
    --accent-color: #4EA8DE;
    --danger-color: #e63946;
    --text-dark: #2b2d42;
    --text-light: #f8f9fa;
    --bg-gradient: linear-gradient(135deg, #240b36 0%, #c31432 100%);
    /* Deep Purple to Reddish */
    --bg-gradient: radial-gradient(circle at center, #2E0249 0%, #0F044C 100%);
    /* Deep Space Purple */
    --card-bg: rgba(255, 255, 255, 0.95);
    --font-main: 'Outfit', sans-serif;
    --transition-speed: 0.4s;
    /* New Urgency Colors */
    --alert-bg: #ffe0e0;
    --alert-text: #b71c1c;
}

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

body {
    font-family: var(--font-main);
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dark);
    overflow-x: hidden;
    position: relative;
}

/* New Urgency Bar Fixed */
#urgency-bar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--alert-bg);
    color: var(--alert-text);
    text-align: center;
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: 700;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideDown 0.5s ease-out;
    letter-spacing: 0.5px;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Background Stars Animation */
#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: twinkle infinite alternate;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.moon-shape {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: -15px 15px 0 5px rgba(255, 255, 255, 0.1);
    z-index: -1;
    animation: float 10s ease-in-out infinite;
}

.cloud-shape {
    position: fixed;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50px;
    filter: blur(20px);
    z-index: -1;
    animation: drift 20s linear infinite;
}

@keyframes twinkle {
    from {
        opacity: 0.2;
        transform: scale(0.8);
    }

    to {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* Random positioning for stars would be JS, but let's do some fixed css ones or rely on JS. 
   I'll just add simple ones here or let JS generate them. 
   For now, I'll rely on the pure CSS ones if I defined positions, but I didn't. 
   Let's just make the gradient nice. */

.container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.content-box {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
    color: var(--secondary-color);
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-dark);
}

p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #4a4a4a;
}

.icon-hero {
    margin-bottom: 20px;
}

.icon-hero svg {
    width: 60px;
    height: auto;
    /* Removed heavy glow to keep it simple */
    animation: float 3s ease-in-out infinite;
}

/* Cleanup old class if it exists in css but not used in html anymore */
.hero-image {
    display: none;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(94, 96, 206, 0.4);
    font-family: var(--font-main);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(94, 96, 206, 0.6);
}

.btn-danger {
    background: linear-gradient(90deg, #ff416c, #ff4b2b);
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
    font-family: var(--font-main);
    animation: pulse-red 2s infinite;
}

/* Options Grid */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-btn {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 16px 20px;
    border-radius: 12px;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-dark);
    position: relative;
    overflow: hidden;
    font-family: var(--font-main);
}

.option-btn:hover {
    border-color: var(--primary-color);
    background: #f0f4ff;
    transform: translateX(4px);
}

.option-btn:active {
    transform: scale(0.99);
}

/* Progress Bar */
#progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    background: #4EA8DE;
    width: 0%;
    transition: width 0.4s ease;
}

.question-count {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Warning Theme for Result */
.warning-theme {
    border-top: 6px solid var(--danger-color);
}

.icon-warning {
    font-size: 3rem;
    margin-bottom: 15px;
}

.text-danger {
    color: var(--danger-color);
    font-weight: 800;
}

.result-highlight {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--danger-color);
}

.diagnosis-box {
    background: #fff3f3;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid var(--danger-color);
    margin-bottom: 25px;
    text-align: left;
}

.villain-reveal {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 16px;
}

.cortisol-meter {
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    margin: 15px 0;
    overflow: hidden;
    position: relative;
}

.cortisol-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 99%, #feada6 100%);
    background: linear-gradient(90deg, yellow, orange, red);
    border-radius: 12px;
    transition: width 2s ease-out;
}

.cortisol-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.info-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: left;
}

.info-card ul {
    list-style: none;
    margin: 10px 0;
}

.info-card li {
    margin-bottom: 8px;
}

.danger-box {
    background: #ffebeb;
    color: #a71d2a;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(94, 96, 206, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(94, 96, 206, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(94, 96, 206, 0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(229, 62, 62, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 62, 62, 0);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.shake-animation {
    animation: shake 0.8s cubic-bezier(.36, .07, .19, .97) both;
    animation-delay: 2s;
    /* Wait a bit before shaking */
}

.hidden {
    display: none !important;
}

/* --- Sales Screen & Offer Styles --- */

.sales-container {
    max-width: 600px !important;
    /* Slightly wider for the offer */
    text-align: center;
    /* Spacer for Urgency Bar */
    margin-top: 50px;
}

.offer-header h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.highlight-gradient {
    background: linear-gradient(90deg, #5E60CE, #6930C3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.badge-new {
    background: #FF4081;
    color: white;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.3);
}

.offer-description {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 25px;
}

/* Product Showcase (Video/Ebook Icons) */
.product-showcase {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 30px;
}

.showcase-card {
    background: #fdfdfd;
    border-radius: 15px;
    padding: 15px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(94, 96, 206, 0.15);
    /* Subtle purple border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.icon-circle {
    font-size: 1.5rem;
    background: rgba(94, 96, 206, 0.1);
    /* Light purple tint */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 8px;
}

/* --- Name Input Screen Styles --- */
.name-input {
    width: 100%;
    padding: 18px 20px;
    font-size: 1.2rem;
    border: 2px solid #ddd;
    border-radius: 12px;
    margin: 15px 0 25px 0;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
    background: #fdfdfd;
    color: #333;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
}

.name-input:focus {
    border-color: #5E60CE;
    box-shadow: 0 0 0 5px rgba(94, 96, 206, 0.15);
    background: #fff;
    transform: scale(1.02);
}


/* --- Sliding Testimonials --- */
.testimonials-slider-container {
    width: 100%;
    margin: 25px 0 35px 0;
    padding: 10px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonials-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    scroll-behavior: smooth;
    /* Smooth scrolling */
}

.testimonials-track::-webkit-scrollbar {
    display: none;
}

/* Static Testimonial Cards (Bottom Section) */
.testimonial-card {
    background: #fdfbff;
    border: 2px solid #e0d4fc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(94, 96, 206, 0.08);
    margin-bottom: 20px;
    text-align: left;
    transition: transform 0.2s;
}

.testimonial-card:hover {
    border-color: #5E60CE;
    transform: translateY(-2px);
}

/* Slider Controls */
.slider-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.slider-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.slider-btn.prev {
    left: -10px;
}

.slider-btn.next {
    right: -10px;
}

.slide-card {
    min-width: 250px;
    background: #fdfbff;
    /* Very light purple tint */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(94, 96, 206, 0.1);
    border: 2px solid #e0d4fc;
    /* Visible purple border */
    scroll-snap-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.slide-card:hover {
    border-color: #5E60CE;
    transform: translateY(-2px);
}

.slide-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.slide-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #eee;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.slide-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.slide-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}

.slide-stars {
    font-size: 0.7rem;
}

.slide-card p {
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

.showcase-card h4 {
    font-size: 0.85rem;
    margin: 5px 0;
    color: #5E60CE;
    /* Primary Purple */
    font-weight: 700;
}

.showcase-card p {
    font-size: 0.75rem;
    color: #483D8B;
    /* Darker purple for readability */
    opacity: 1;
    margin: 0;
}

/* Benefits Section */
.benefits-section {
    text-align: left;
    margin-bottom: 30px;
}

.highlight-box {
    background: linear-gradient(90deg, rgba(94, 96, 206, 0.2), rgba(105, 48, 195, 0.2));
    border-left: 4px solid var(--primary-color);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Social Proof */
.social-proof-section {
    margin-bottom: 30px;
}

.social-proof-section h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    margin-top: 0;
}

.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle glass */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.testimonial-card .stars {
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.testimonial-card p {
    font-size: 0.85rem;
    margin: 5px 0 10px 0;
    font-style: italic;
    opacity: 0.9;
}

.testimonial-card .author {
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
    /* Darker for readability near avatar */
    display: block;
    text-align: left;
    /* Align left with avatar */
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.testimonial-avatar {
    width: 65px;
    height: 65px;
    min-width: 65px;
    /* Prevent squishing */
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
}

.testimonial-name-row {
    font-weight: 700;
    color: #e53e3e;
    /* KEEP PINK/REDDISH TONE? Original was #FF4081 */
    color: #D81B60;
    /* Slightly deeper pink */
    font-size: 0.95rem;
}

/* CTA Box */
.cta-final-box {
    margin-top: 20px;
}

/* Pricing Box */
.pricing-box {
    background: #fdfdfd;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 30px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(94, 96, 206, 0.15);
    position: relative;
    overflow: hidden;
}

.price-header-row {
    margin-bottom: 10px;
}

.old-price {
    font-size: 1rem;
    color: #888;
    text-decoration: none;
}

.price-final {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

.discount-tag {
    background: #FFEB3B;
    color: #333;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 5px;
    transform: rotate(-5deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.scarcity-bar-container {
    width: 100%;
    height: 12px;
    background: #eee;
    border-radius: 6px;
    margin: 20px 0 10px 0;
    overflow: hidden;
    position: relative;
}

.scarcity-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff4b2b, #ff416c);
    border-radius: 6px;
    transition: width 1s ease;
}

.scarcity-text {
    font-size: 0.8rem;
    color: var(--danger-color);
    font-weight: 700;
    margin-top: 5px;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10000;
    min-width: 300px;
    border: 1px solid #eee;
    animation: slideUpToast 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.toast-icon {
    font-size: 1.5rem;
}

.toast-notification p {
    font-size: 0.9rem;
    margin: 0;
    color: #333;
    line-height: 1.3;
}

@keyframes slideUpToast {
    from {
        transform: translate(-50%, 100px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Legal Footer */
.legal-footer {
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

.legal-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.legal-links a:hover {
    color: white;
}

.disclaimer {
    font-size: 0.7rem;
    opacity: 0.5;
    max-width: 600px;
    margin: 15px auto 0 auto;
    line-height: 1.4;
}

/* Multi-select active state */
.option-btn.selected {
    border-color: var(--primary-color);
    background: #e8eaf6;
    /* Light indigo */
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(94, 96, 206, 0.2);
}

/* --- Desktop / Responsive Adjustments --- */
@media (min-width: 768px) {
    .container {
        max-width: 960px;
        /* Wider container for desktop */
    }

    /* Default Content Box (Quiz, Intro, etc.) stays mobile-width and centered */
    .content-box {
        max-width: 480px;
        margin: 0 auto;
    }

    /* Diagnosis and Sales screens get more room */
    .content-box.diagnosis-container,
    .content-box.sales-container {
        max-width: 900px;
        padding: 50px;
    }

    /* Make the pricing card and heavy elements centered and reasonable width */
    .pricing-highlight-box,
    .guarantee-section,
    .bonus-highlight-section {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ensure benefits list grid on desktop if needed, or just nicer spacing */
    .benefits-list li {
        padding: 20px;
    }
}