/* NEW AGE NETWORK Toolkit Styles */
#new-age-toolkit-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #110D1F;
    color: #F0E7F5;
}

#new-age-toolkit-wrapper .hero-bg {
    background-color: #2a0a4a;
}

#new-age-toolkit-wrapper .btn-primary {
    background: linear-gradient(to right, #a855f7, #ec4899) !important;
    color: white !important;
    font-weight: bold !important;
    padding: 1rem 2rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4) !important;
    font-size: 1.125rem !important;
    border: 2px solid #d8b4fe !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
}

#new-age-toolkit-wrapper .btn-primary:hover {
    background: linear-gradient(to right, #9333ea, #db2777) !important;
    transform: scale(1.1) !important;
}

#new-age-toolkit-wrapper .btn-secondary {
    background: linear-gradient(to right, #a855f7, #ec4899) !important;
    color: white !important;
    font-weight: bold !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4) !important;
    border: 2px solid #d8b4fe !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#new-age-toolkit-wrapper .btn-secondary:hover {
    background: linear-gradient(to right, #9333ea, #db2777) !important;
    transform: scale(1.05) !important;
}

#new-age-toolkit-wrapper .btn-cta-google {
    display: block !important;
    text-align: center !important;
    background: linear-gradient(to right, #ec4899, #fb923c) !important;
    color: white !important;
    font-weight: bold !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

#new-age-toolkit-wrapper .btn-cta-google:hover {
    background: linear-gradient(to right, #db2777, #ea580c) !important;
    transform: scale(1.05) !important;
}

#new-age-toolkit-wrapper .text-gold {
    color: #FFD700;
}

#new-age-toolkit-wrapper .card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: all 0.3s ease;
}

#new-age-toolkit-wrapper .card:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
    transform: translateY(-2px);
}

#new-age-toolkit-wrapper .card-1 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

#new-age-toolkit-wrapper .card-2 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

#new-age-toolkit-wrapper .card-3 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

#new-age-toolkit-wrapper .card-4 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

#new-age-toolkit-wrapper .card-5 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

#new-age-toolkit-wrapper .card-6 {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

#new-age-toolkit-wrapper .card-7 {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

#new-age-toolkit-wrapper .card-8 {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(236, 72, 153, 0.2);
}

#new-age-toolkit-wrapper .card-9 {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(20, 184, 166, 0.2);
}

#new-age-toolkit-wrapper .card-10 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

#new-age-toolkit-wrapper .card-11 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#new-age-toolkit-wrapper .fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

#new-age-toolkit-wrapper .loading-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #D6BCFA;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

#new-age-toolkit-wrapper .loading-spinner-small {
    width: 28px;
    height: 28px;
    border: 4px solid #FFF;
    border-bottom-color: #D6BCFA;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE STYLES - 100% Mobile Optimized
   ============================================ */

/* Mobile First - Base Styles */
#new-age-toolkit-wrapper {
    width: 100%;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent horizontal scroll globally */
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Hero Banner Image - 100% width, no padding/margin */
#new-age-toolkit-wrapper .hero-banner-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hero Container - Removed, no longer needed */
#new-age-toolkit-wrapper .hero-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hero Container - Responsive Padding (no longer used, but kept for compatibility) */
@media (max-width: 768px) {
    #new-age-toolkit-wrapper .hero-container {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Typography - Responsive Text Sizes */
#new-age-toolkit-wrapper h1 {
    font-size: clamp(1.875rem, 5vw, 3.75rem); /* 30px - 60px */
    line-height: 1.2;
}

#new-age-toolkit-wrapper h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem); /* 24px - 36px */
    line-height: 1.3;
}

#new-age-toolkit-wrapper h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem); /* 20px - 24px */
    line-height: 1.4;
}

#new-age-toolkit-wrapper p {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem); /* 14px - 18px */
    line-height: 1.6;
}

/* Buttons - Responsive */
#new-age-toolkit-wrapper .btn-primary,
#new-age-toolkit-wrapper .btn-secondary {
    width: 100%;
    max-width: 100%;
    padding: 0.875rem 1.5rem !important;
    font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .btn-primary,
    #new-age-toolkit-wrapper .btn-secondary {
        width: auto;
        display: inline-block;
        padding: 1rem 2rem !important;
    }
}

/* Cards - Responsive Padding */
#new-age-toolkit-wrapper .card {
    width: 100%;
    max-width: 100%;
    padding: 1rem !important;
    margin: 0 auto;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .card {
        padding: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    #new-age-toolkit-wrapper .card {
        padding: 2rem !important;
    }
}

/* Container Padding - Responsive */
#new-age-toolkit-wrapper .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #new-age-toolkit-wrapper .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Section Padding - Responsive */
#new-age-toolkit-wrapper section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

@media (min-width: 768px) {
    #new-age-toolkit-wrapper section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (min-width: 1024px) {
    #new-age-toolkit-wrapper section {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* Images - Responsive */
#new-age-toolkit-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Hero Image - Already handled by .hero-banner-image */
#new-age-toolkit-wrapper .hero-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
}

/* Profile Images - Responsive */
#new-age-toolkit-wrapper .card img[src*="MELANIE_PHOTO_URL"],
#new-age-toolkit-wrapper .card img[src*="NADINE_PHOTO_URL"] {
    width: clamp(80px, 20vw, 128px);
    height: clamp(80px, 20vw, 128px);
}

/* Form Elements - Responsive */
#new-age-toolkit-wrapper input[type="text"],
#new-age-toolkit-wrapper input[type="email"],
#new-age-toolkit-wrapper textarea,
#new-age-toolkit-wrapper select {
    width: 100%;
    max-width: 100%;
    padding: 0.875rem;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    box-sizing: border-box;
}

/* Tool Buttons - Responsive */
#new-age-toolkit-wrapper .btn-secondary.whitespace-nowrap {
    white-space: normal !important;
    width: 100%;
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .btn-secondary.whitespace-nowrap {
        white-space: nowrap !important;
        width: auto;
        margin-top: 0;
    }
}

/* Input + Button Layout - Responsive */
#new-age-toolkit-wrapper .flex.flex-col.sm\:flex-row {
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .flex.flex-col.sm\:flex-row {
        flex-direction: row;
        gap: 1rem;
    }
    
    #new-age-toolkit-wrapper .flex.flex-col.sm\:flex-row input {
        flex: 1;
    }
    
    #new-age-toolkit-wrapper .flex.flex-col.sm\:flex-row button {
        flex-shrink: 0;
    }
}

/* Grid Layouts - Responsive */
#new-age-toolkit-wrapper .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    #new-age-toolkit-wrapper .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    #new-age-toolkit-wrapper .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Speaker Cards - Responsive */
#new-age-toolkit-wrapper .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #new-age-toolkit-wrapper .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* Tool Cards - Responsive Spacing */
#new-age-toolkit-wrapper .space-y-4 > * + * {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    #new-age-toolkit-wrapper .space-y-4 > * + * {
        margin-top: 1.5rem;
    }
}

/* Max Width Containers - Responsive */
#new-age-toolkit-wrapper .max-w-4xl,
#new-age-toolkit-wrapper .max-w-5xl,
#new-age-toolkit-wrapper .max-w-3xl,
#new-age-toolkit-wrapper .max-w-2xl {
    width: 100%;
    max-width: 100%;
    padding-left: 0rem;
    padding-right: 0rem;
}

@media (min-width: 640px) {
    #new-age-toolkit-wrapper .max-w-2xl {
        max-width: 42rem;
    }
    
    #new-age-toolkit-wrapper .max-w-3xl {
        max-width: 48rem;
    }
    
    #new-age-toolkit-wrapper .max-w-4xl {
        max-width: 56rem;
    }
    
    #new-age-toolkit-wrapper .max-w-5xl {
        max-width: 64rem;
    }
}

/* Text Alignment - Responsive */
#new-age-toolkit-wrapper .text-center {
    text-align: center;
}

#new-age-toolkit-wrapper .text-left {
    text-align: left;
}

/* Mobile Specific Adjustments */
@media (max-width: 639px) {
    /* Reduce padding on very small screens */
    #new-age-toolkit-wrapper .px-4,
    #new-age-toolkit-wrapper .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Stack all flex items */
    #new-age-toolkit-wrapper .flex {
        flex-direction: column;
    }
    
    /* Full width buttons on mobile */
    #new-age-toolkit-wrapper button,
    #new-age-toolkit-wrapper .btn-primary,
    #new-age-toolkit-wrapper .btn-secondary,
    #new-age-toolkit-wrapper .btn-cta-google {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Smaller emoji/icon sizes */
    #new-age-toolkit-wrapper .text-4xl {
        font-size: 2rem !important;
    }
}

/* Tablet Adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    #new-age-toolkit-wrapper .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Desktop Adjustments */
@media (min-width: 1024px) {
    #new-age-toolkit-wrapper .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Large Desktop */
@media (min-width: 1280px) {
    #new-age-toolkit-wrapper .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Prevent horizontal scroll - Enhanced */
#new-age-toolkit-wrapper * {
    box-sizing: border-box;
    max-width: 100%;
}

#new-age-toolkit-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Additional prevention for all elements */
#new-age-toolkit-wrapper img,
#new-age-toolkit-wrapper video,
#new-age-toolkit-wrapper iframe,
#new-age-toolkit-wrapper embed,
#new-age-toolkit-wrapper object {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent any element from causing horizontal scroll */
#new-age-toolkit-wrapper header,
#new-age-toolkit-wrapper section,
#new-age-toolkit-wrapper div,
#new-age-toolkit-wrapper article {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Ensure all loader spinners are hidden by default */
#new-age-toolkit-wrapper .g-btn-loader,
#new-age-toolkit-wrapper .loading-spinner,
#new-age-toolkit-wrapper .loading-spinner-small {
    display: none;
}

#new-age-toolkit-wrapper .g-btn-loader.hidden,
#new-age-toolkit-wrapper .loading-spinner.hidden,
#new-age-toolkit-wrapper .loading-spinner-small.hidden {
    display: none !important;
}

#new-age-toolkit-wrapper .g-btn-loader:not(.hidden),
#new-age-toolkit-wrapper .loading-spinner:not(.hidden),
#new-age-toolkit-wrapper .loading-spinner-small:not(.hidden) {
    display: inline-block;
}

/* Ensure generated text is white with dark background */
#new-age-toolkit-wrapper #ai-result-text,
#new-age-toolkit-wrapper [id^="g-result-text-"] {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Force dark backgrounds in all generated content, especially blockquotes */
#new-age-toolkit-wrapper #ai-result-text blockquote,
#new-age-toolkit-wrapper [id^="g-result-text-"] blockquote,
#new-age-toolkit-wrapper #ai-result-text div,
#new-age-toolkit-wrapper [id^="g-result-text-"] div {
    background-color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

/* Override any white backgrounds in quote containers */
#new-age-toolkit-wrapper #ai-result-text blockquote p,
#new-age-toolkit-wrapper [id^="g-result-text-"] blockquote p,
#new-age-toolkit-wrapper #ai-result-text blockquote footer,
#new-age-toolkit-wrapper [id^="g-result-text-"] blockquote footer {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Override bg-white classes in result containers */
#new-age-toolkit-wrapper #ai-result-text.bg-white\/10,
#new-age-toolkit-wrapper [id^="g-result-text-"].bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

#new-age-toolkit-wrapper #ai-result-text *,
#new-age-toolkit-wrapper [id^="g-result-text-"] * {
    color: #ffffff !important;
}

#new-age-toolkit-wrapper #ai-result-text p,
#new-age-toolkit-wrapper [id^="g-result-text-"] p {
    color: #ffffff !important;
}

#new-age-toolkit-wrapper #ai-result-text h3,
#new-age-toolkit-wrapper [id^="g-result-text-"] h3 {
    color: #ffffff !important;
}

/* Override any white/light backgrounds in generated content */
#new-age-toolkit-wrapper #ai-result-text [style*="background"],
#new-age-toolkit-wrapper [id^="g-result-text-"] [style*="background"] {
    background-color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Ensure any nested elements with white backgrounds get dark background */
#new-age-toolkit-wrapper #ai-result-text div,
#new-age-toolkit-wrapper [id^="g-result-text-"] div {
    background-color: transparent !important;
}

/* Override any inline styles or classes that might set white backgrounds */
#new-age-toolkit-wrapper #ai-result-text[class*="bg-white"],
#new-age-toolkit-wrapper [id^="g-result-text-"][class*="bg-white"] {
    background-color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Ensure prose invert is applied for dark background */
#new-age-toolkit-wrapper #ai-result-text.prose,
#new-age-toolkit-wrapper [id^="g-result-text-"].prose {
    --tw-prose-body: #ffffff;
    --tw-prose-headings: #ffffff;
    --tw-prose-lead: #ffffff;
    --tw-prose-links: #d8b4fe;
    --tw-prose-bold: #ffffff;
    --tw-prose-counters: #ffffff;
    --tw-prose-bullets: #ffffff;
    --tw-prose-hr: #ffffff;
    --tw-prose-quotes: #ffffff;
    --tw-prose-quote-borders: #d8b4fe;
    --tw-prose-captions: #ffffff;
    --tw-prose-code: #ffffff;
    --tw-prose-pre-code: #ffffff;
    --tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
    --tw-prose-th-borders: #ffffff;
    --tw-prose-td-borders: #ffffff;
}