/* ============================================
   DARK MODE STYLES
   ============================================ */

.dark-mode {
    /* Dark Mode Color Variables */
    --gray-50: #1a1a1a;
    --gray-100: #2a2a2a;
    --gray-200: #3a3a3a;
    --gray-300: #4a4a4a;
    --gray-400: #6a6a6a;
    --gray-500: #8a8a8a;
    --gray-600: #aaaaaa;
    --gray-700: #c0c0c0;
    --gray-800: #e0e0e0;
    --gray-900: #f5f5f5;

    /* Background colors */
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #242424;

    /* Text colors */
    --text-primary: #f5f5f5;
    --text-secondary: #c0c0c0;
    --text-muted: #8a8a8a;
}

/* ============================================
   GLOBAL DARK MODE STYLES
   ============================================ */

html.dark-mode,
body.dark-mode {
    background-color: var(--bg-primary);
}

.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navbar */
.dark-mode .navbar {
    background: rgba(15, 15, 15, 0.98);
    border-bottom-color: var(--gray-300);
}

.dark-mode .nav-link {
    color: var(--text-secondary);
}

.dark-mode .nav-link:hover {
    color: var(--primary);
}

.dark-mode .brand-text {
    color: var(--primary);
}

/* Buttons */
.dark-mode .btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.dark-mode .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.dark-mode .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--gray-400);
}

.dark-mode .btn-secondary:hover {
    background: var(--gray-300);
    border-color: var(--gray-500);
}

/* Color Theme Dropdown */
.dark-mode .color-dropdown {
    background: var(--bg-secondary);
    border: 1px solid var(--gray-300);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

.dark-mode .theme-toggle-wrapper {
    border-bottom-color: var(--gray-300);
}

.dark-mode .navbar .color-theme-btn,
.dark-mode .color-menu-wrapper .color-theme-btn {
    background: var(--bg-tertiary) !important;
    border: 2px solid var(--gray-400) !important;
    color: var(--text-primary) !important;
}

.dark-mode .navbar .color-theme-btn:hover,
.dark-mode .color-menu-wrapper:hover .color-theme-btn {
    background-color: var(--gray-300) !important;
    border-color: var(--gray-500) !important;
    color: var(--text-primary) !important;
}

/* Hero Section */
.dark-mode .hero {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    margin-bottom: 0;
}

.dark-mode .hero-title {
    color: var(--text-primary);
}

.dark-mode .hero-subtitle {
    color: var(--text-secondary);
}

.dark-mode .hero-accent {
    color: var(--primary);
}

/* Carousel */
.dark-mode .carousel-nav {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.dark-mode .carousel-nav:hover {
    background: var(--primary);
    color: white;
}

.dark-mode .carousel-nav:disabled {
    background: var(--bg-tertiary);
    border-color: var(--gray-400);
    color: var(--gray-400);
}

/* Collage Images - use drop-shadow to follow PNG shape */
.dark-mode .collage-img {
    filter: none;
}

.dark-mode .collage-img:hover {
    filter: none;
}

/* Forms & Inputs (if needed in future) */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode textarea,
.dark-mode select {
    background: var(--bg-tertiary);
    border-color: var(--gray-400);
    color: var(--text-primary);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

/* Scrollbar (optional but nice touch) */
.dark-mode::-webkit-scrollbar {
    width: 12px;
}

.dark-mode::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 6px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Selection */
.dark-mode ::selection {
    background: var(--primary);
    color: white;
}

.dark-mode ::-moz-selection {
    background: var(--primary);
    color: white;
}

/* Recent Stories Section */
.dark-mode .recent-stories {
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-secondary));
}

.dark-mode .section-subtitle {
    color: var(--text-secondary);
}

.dark-mode .story-card-inner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode .story-card:hover .story-card-inner {
    box-shadow:
        0 10px 20px color-mix(in srgb, var(--primary) 30%, transparent),
        0 0 25px color-mix(in srgb, var(--primary) 22%, transparent),
        0 0 50px color-mix(in srgb, var(--primary) 15%, transparent);
}

.dark-mode .story-card::before {
    background: radial-gradient(circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.2) 0%,
            transparent 100%);
}

/* Why Different Section */
.dark-mode .why-different {
    background: var(--bg-primary);
}

.dark-mode .feature-title {
    color: var(--text-primary);
}

.dark-mode .feature-description {
    color: var(--text-secondary);
}

/* Collage Images - drop-shadow follows PNG shape */
.dark-mode .collage-img-inner {
    box-shadow: none;
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--primary) 40%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--primary) 25%, transparent)) drop-shadow(0 15px 25px color-mix(in srgb, var(--primary) 30%, transparent));
}

.dark-mode .collage-img-inner:hover {
    box-shadow: none;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 50%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--primary) 35%, transparent)) drop-shadow(0 20px 35px color-mix(in srgb, var(--primary) 40%, transparent)) brightness(1.03);
}

/* Testimonials Section */
.dark-mode .testimonials {
    background: var(--bg-primary);
}

.dark-mode .testimonial-card {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
}

.dark-mode .testimonial-card:hover {
    border-color: var(--gray-600);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .testimonial-name {
    color: var(--text-primary);
}

.dark-mode .testimonial-role {
    color: var(--text-secondary);
}

.dark-mode .testimonial-text {
    color: var(--text-secondary);
}

/* FAQ Section */
.dark-mode .faq-section {
    background: var(--bg-primary);
}

.dark-mode .faq-item {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
}

.dark-mode .faq-item:hover {
    border-color: var(--gray-600);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 20%, transparent);
}

.dark-mode .faq-question:hover {
    background: var(--bg-tertiary);
}

.dark-mode .faq-question-text {
    color: var(--text-primary);
}

.dark-mode .faq-answer p {
    color: var(--text-secondary);
}

.dark-mode .faq-toggle-btn {
    background: var(--bg-secondary);
    color: var(--primary);
    border-color: var(--primary);
}

.dark-mode .faq-toggle-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* Footer Section */
.dark-mode .footer {
    background: var(--bg-secondary);
    border-top-color: var(--gray-700);
}

.dark-mode .footer-description {
    color: var(--text-secondary);
}

.dark-mode .footer-social-link {
    background: var(--bg-tertiary);
    border-color: var(--gray-600);
    color: var(--text-secondary);
}

.dark-mode .footer-social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.dark-mode .footer-heading {
    color: var(--text-primary);
}

.dark-mode .footer-links a {
    color: var(--text-secondary);
}

.dark-mode .footer-links a:hover {
    color: var(--primary);
}

.dark-mode .footer-bottom {
    border-top-color: var(--gray-700);
}

.dark-mode .footer-copyright {
    color: var(--text-tertiary);
}

/* Hamburger Menu & Mobile Menu Dark Mode */
.dark-mode .hamburger-line {
    background-color: var(--text-primary);
}

.dark-mode .mobile-menu {
    background: var(--bg-secondary);
    border-right-color: var(--gray-700);
}

.dark-mode .mobile-menu-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .mobile-menu-title {
    color: var(--text-tertiary);
}

.dark-mode .mobile-menu-close {
    background: var(--bg-tertiary);
    border-color: var(--gray-700);
    color: var(--text-primary);
}

.dark-mode .mobile-menu-close:hover {
    background: var(--gray-700);
}

.dark-mode .nav-link-mobile {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--gray-700);
}

.dark-mode .nav-link-mobile:hover {
    background: var(--gray-700);
    color: var(--primary);
}

.dark-mode .user-avatar-guest {
    background: var(--primary);
    color: var(--white);
    border: none;
}

.dark-mode .mobile-menu-divider {
    border-top-color: var(--gray-700);
}

/* Auth Page Dark Mode - Sliding Panels */
.dark-mode .auth-container {
    background: var(--bg-secondary);
}

.dark-mode .auth-wrapper {
    background: var(--bg-tertiary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .auth-form-panel {
    background: var(--bg-tertiary);
}

.dark-mode .auth-panel-title {
    color: var(--text-primary);
}

.dark-mode .auth-panel-subtitle {
    color: var(--text-secondary);
}

.dark-mode .social-btn {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
    color: var(--text-primary);
}

.dark-mode .social-btn:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.dark-mode .auth-panel-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
    border: 1px solid var(--gray-700) !important;
    box-shadow: none;
    background-clip: padding-box;
}

.dark-mode .auth-panel-input:-webkit-autofill,
.dark-mode .auth-panel-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    border: 1px solid var(--gray-700) !important;
}

.dark-mode .auth-panel-input:focus {
    background: var(--bg-secondary);
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.dark-mode .auth-panel-input::placeholder,
.dark-mode .auth-panel-input::-webkit-input-placeholder,
.dark-mode .auth-panel-input::-moz-placeholder,
.dark-mode .auth-panel-input:-ms-input-placeholder {
    color: #a3a3a3 !important;
    /* lighter to signal empty state */
    opacity: 1;
}

.dark-mode .auth-forgot {
    color: var(--text-secondary);
}

.dark-mode .auth-forgot:hover {
    color: var(--primary);
}

/* Story page form fields */
.dark-mode .story-page .textarea-wrapper textarea {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
    color: var(--text-primary);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    caret-color: var(--text-primary);
}

.dark-mode .story-page .textarea-wrapper textarea::placeholder,
.dark-mode .story-page .textarea-wrapper textarea::-webkit-input-placeholder,
.dark-mode .story-page .textarea-wrapper textarea::-moz-placeholder,
.dark-mode .story-page .textarea-wrapper textarea:-ms-input-placeholder {
    color: #a3a3a3 !important;
    opacity: 1;
}

.dark-mode .story-page .textarea-wrapper textarea:focus,
.dark-mode .story-page .textarea-wrapper textarea:hover {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent),
        0 14px 30px color-mix(in srgb, var(--primary) 18%, rgba(0, 0, 0, 0.6));
}

/* Payments page */
.dark-mode .payments-page {
    background: var(--bg-primary);
}

.dark-mode .formats-title {
    color: var(--text-primary);
}

.dark-mode .format-card {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 14%, rgba(0, 0, 0, 0.4));
}

.dark-mode .format-card.featured {
    border-color: var(--primary);
}

.dark-mode .format-name,
.dark-mode .format-price {
    color: var(--text-primary);
}

.dark-mode .format-size,
.dark-mode .format-features li {
    color: var(--text-secondary);
}

.dark-mode .payment-card {
    background: var(--bg-secondary);
    border-color: var(--gray-700);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.dark-mode .payment-title {
    color: var(--text-primary);
}

.dark-mode .payment-subtitle {
    color: var(--text-secondary);
}

.dark-mode .payment-summary {
    border-color: var(--gray-700);
}

.dark-mode .payment-divider {
    background: var(--gray-700);
}

.dark-mode .mp-logo {
    filter: brightness(1.1) contrast(1.1);
}

.dark-mode .card-chip {
    background: var(--white);
    border-color: var(--white);
}

.dark-mode .card-strip {
    filter: none;
    opacity: 1;
}

.dark-mode .summary-label {
    color: var(--text-secondary);
}

.dark-mode .summary-value {
    color: var(--text-primary);
}

.dark-mode .payment-summary {
    background: var(--bg-secondary);
}

.dark-mode .light-only {
    display: none;
}

.dark-mode .dark-only {
    display: block;
}

.dark-mode .payment-input {
    background: var(--bg-primary);
    border-color: var(--gray-700);
    color: var(--text-primary);
    border-radius: 8px;
}

.dark-mode .payment-field label {
    color: var(--text-primary);
}

.dark-mode .payment-input::placeholder {
    color: #a3a3a3;
}

.dark-mode .payment-input:focus,
.dark-mode .payment-input:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.dark-mode .card-pill {
    background: var(--bg-primary);
    border-color: var(--gray-700);
    color: var(--text-secondary);
}

.dark-mode .format-btn.ghost {
    background: transparent;
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--gray-600));
}

.dark-mode .format-btn.ghost:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}