/* Clean White Background Styles */
body {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* Preserve padding-top from apple-nav.css for fixed header */
    position: relative;
    /* Clean white background */
    background: #ffffff;
    color: #000000;
}

/* Ensure all content appears above the WebGL background */
.main-header,
.dashboard-container,
.manage-subscription-container,
.checkout-container,
.landing-container,
.how-it-works-container,
.login-container,
.register-container {
    position: relative;
    z-index: 1;
}

/* Base layout adjustments for glassmorphism */
.dashboard-container,
.manage-subscription-container,
.checkout-container {
    margin: 20px;
    padding: 20px;
}

/* Ensure main content areas have proper spacing */
.main-content-area {
    position: relative;
    z-index: 1;
}

/* Simulator pages should have solid background */
body.simulator-page {
    background: #ffffff;
}

body.simulator-page canvas[style*="z-index: -1"] {
    display: none !important;
}

/* Override glassmorphism white text for simulator pages */
body.simulator-page,
body.simulator-page .navbar-brand,
body.simulator-page .navbar-brand:hover,
body.simulator-page .navbar-brand:focus,
body.simulator-page .nav-link,
body.simulator-page .nav-link:hover,
body.simulator-page .nav-link:focus,
body.simulator-page .navbar-nav .nav-link,
body.simulator-page .navbar-nav .nav-link:hover,
body.simulator-page .navbar-nav .nav-link:focus,
body.simulator-page .navbar-text,
body.simulator-page .mobile-nav-link,
body.simulator-page .mobile-nav-link:hover,
body.simulator-page .mobile-nav-link:focus,
body.simulator-page .notification-btn,
body.simulator-page .notification-btn:hover,
body.simulator-page .notification-btn:focus,
body.simulator-page .logout-btn,
body.simulator-page .logout-btn:hover,
body.simulator-page .logout-btn:focus {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Override CSS variables for simulator pages */
body.simulator-page {
    --nav-text: #333333 !important;
    --nav-text-hover: #007AFF !important;
    --nav-logout: #333333 !important;
}

/* Make all general text dark on simulator pages */
body.simulator-page,
body.simulator-page p,
body.simulator-page h1,
body.simulator-page h2,
body.simulator-page h3,
body.simulator-page h4,
body.simulator-page h5,
body.simulator-page h6,
body.simulator-page span,
body.simulator-page div,
body.simulator-page label,
body.simulator-page strong,
body.simulator-page em,
body.simulator-page small,
body.simulator-page .text-muted {
    color: #333333 !important;
}

/* Card content should have dark text */
body.simulator-page .card-body,
body.simulator-page .card-header,
body.simulator-page .card-title,
body.simulator-page .card-text {
    color: #333333 !important;
}

/* Form elements should have dark text */
body.simulator-page .form-control,
body.simulator-page .form-select,
body.simulator-page .form-label,
body.simulator-page .form-text {
    color: #333333 !important;
}

/* Button text adjustments for simulator pages */
body.simulator-page .btn-outline-light {
    color: #333333 !important;
    border-color: #333333 !important;
}

body.simulator-page .btn-outline-light:hover {
    color: #ffffff !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* Make logo and icons black on non-simulator pages (white background) */
body:not(.simulator-page) .logo-image,
body:not(.simulator-page) .brand-icon.logo-image,
body:not(.simulator-page) .footer-icon.logo-image,
body:not(.simulator-page) .notification-btn i,
body:not(.simulator-page) .notification-btn svg,
body:not(.simulator-page) .subscription-btn svg,
body:not(.simulator-page) .subscription-btn .nav-icon,
body:not(.simulator-page) .nav-link i.fa-shopping-cart,
body:not(.simulator-page) .nav-link i.fa-shopping-bag {
    filter: brightness(0) !important;
}

/* Make logo and icons black on simulator pages */
body.simulator-page .logo-image,
body.simulator-page .brand-icon.logo-image,
body.simulator-page .footer-icon.logo-image {
    filter: brightness(0) !important;
}

body.simulator-page .notification-btn i,
body.simulator-page .notification-btn svg,
body.simulator-page .subscription-btn svg,
body.simulator-page .subscription-btn .nav-icon,
body.simulator-page .nav-link i.fa-shopping-cart,
body.simulator-page .nav-link i.fa-shopping-bag {
    filter: brightness(0) !important;
}

/* Make commentary box solid on simulator pages */
body.simulator-page .fixed-commentary-box {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Remove glassmorphism hover effects for commentary box on simulator pages */
body.simulator-page .commentary-extension:hover ~ .fixed-commentary-box {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: #cccccc !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Make commentary container extend edge to edge but keep relative positioning for pills */
body.simulator-page .commentary-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

/* Make commentary box wrapper full width */
body.simulator-page .commentary-box-with-extension {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make commentary box extend to edges completely */
body.simulator-page .fixed-commentary-box {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 20px !important;
    max-width: none !important;
}

/* Hide previous buttons on simulator pages, but keep next button visible for Apple keyboard style */
body.simulator-page .pill-prev-btn,
body.simulator-page #pill-prev-btn {
    display: none !important;
}

/* Keep next button always visible for Apple keyboard-style narrator */
body.simulator-page .pill-next-btn,
body.simulator-page #pill-next-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide footer on simulator pages */
body.simulator-page .main-footer {
    display: none !important;
}