/**
 * Brightness Control Styles
 * Located in the navigation sidebar menu
 *
 * @package MadePrompt
 */

/* ==========================================
   BRIGHTNESS CONTROL IN MENU
   ========================================== */

.nav-brightness-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 20px 0 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.nav-brightness-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.nav-brightness-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-brightness-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-brightness-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.nav-brightness-btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.brightness-btn-icon {
    font-size: 1.2rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.nav-brightness-btn:hover .brightness-btn-icon,
.nav-brightness-btn.active .brightness-btn-icon {
    opacity: 1;
}

/* ==========================================
   BRIGHTNESS LEVELS - Background adjustments
   ========================================== */

/* Default / Medium (current design) */
body {
    --bg-brightness: 1;
    --glass-opacity: 0.6;
    --border-opacity: 0.15;
}

/* Dark Mode - Extra dark for night use */
body.brightness-dark {
    --bg-brightness: 0.7;
    --glass-opacity: 0.75;
    --border-opacity: 0.1;
}

body.brightness-dark {
    background: linear-gradient(135deg, #121214 0%, #1a1a1c 50%, #121214 100%);
}

body.brightness-dark .homepage-hero-content,
body.brightness-dark .brand-page-content,
body.brightness-dark .brands-section-box,
body.brightness-dark .xrated-lab-box,
body.brightness-dark .legal-page-content,
body.brightness-dark .xrated-lab-single-article,
body.brightness-dark .article-page-content,
body.brightness-dark .related-brands-container,
body.brightness-dark .brand-made-with-box {
    background: rgba(18, 18, 20, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

body.brightness-dark .brand-card,
body.brightness-dark .related-brand-card,
body.brightness-dark .pg-brand-card,
body.brightness-dark .xrated-lab-article-box {
    background: rgba(18, 18, 20, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

body.brightness-dark .main-navigation {
    background: linear-gradient(180deg, rgb(18, 18, 20) 0%, rgb(12, 12, 14) 100%);
}

/* Light Mode - True black & white */
body.brightness-light {
    --bg-brightness: 1;
    --glass-opacity: 1;
    --border-opacity: 0.12;
    background: #ffffff;
    color: #111111;
    color-scheme: light;
}

/* Reduce heavy shadows/glow in true B/W */
body.brightness-light * {
    text-shadow: none !important;
}

/* Page-level surfaces */
body.brightness-light .homepage-hero-content,
body.brightness-light .brand-page-content,
body.brightness-light .brands-section-box,
body.brightness-light .xrated-lab-box,
body.brightness-light .legal-page-content,
body.brightness-light .xrated-lab-single-article,
body.brightness-light .article-page-content,
body.brightness-light .related-brands-container,
body.brightness-light .brand-made-with-box,
body.brightness-light .prompt-generator-box,
body.brightness-light .pg-hero-content {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Cards */
body.brightness-light .brand-card,
body.brightness-light .related-brand-card,
body.brightness-light .pg-brand-card,
body.brightness-light .xrated-lab-article-box {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Make most text dark in light mode */
body.brightness-light,
body.brightness-light p,
body.brightness-light span,
body.brightness-light li,
body.brightness-light label,
body.brightness-light input,
body.brightness-light textarea,
body.brightness-light h1,
body.brightness-light h2,
body.brightness-light h3,
body.brightness-light h4,
body.brightness-light h5,
body.brightness-light h6 {
    color: #111111;
}

body.brightness-light a {
    color: #111111;
}

/* Navigation: true B/W */
body.brightness-light .main-navigation {
    background: rgba(255, 255, 255, 0.98);
    border-right-color: rgba(0, 0, 0, 0.10);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12);
}

body.brightness-light .nav-section-title,
body.brightness-light .nav-brightness-label {
    color: rgba(0, 0, 0, 0.55);
    border-bottom-color: rgba(0, 0, 0, 0.10);
}

/* Brightness control container needs contrast on white nav */
body.brightness-light .nav-brightness-control {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.10);
}

body.brightness-light .nav-brightness-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.10);
}

body.brightness-light .nav-brightness-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.16);
}

body.brightness-light .nav-brightness-btn.active {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: none;
}

body.brightness-light .brightness-btn-icon {
    opacity: 0.9;
}

body.brightness-light .primary-menu .menu-item a {
    color: #111111;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

body.brightness-light .primary-menu .menu-item a:hover,
body.brightness-light .primary-menu .menu-item.current-menu-item > a,
body.brightness-light .primary-menu .menu-item.current-page-ancestor > a {
    background: rgba(0, 0, 0, 0.08);
    border-right-color: #111111;
    color: #111111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Quiz widget in light mode (sidebar + anywhere else) */
body.brightness-light .nav-quiz-menu-item {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    border-right-color: rgba(0, 0, 0, 0.18) !important;
    color: #111111 !important;
    box-shadow: none !important;
}

body.brightness-light .nav-quiz-menu-item:hover,
body.brightness-light .nav-quiz-menu-item:active {
    background: rgba(0, 0, 0, 0.07) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    border-right-color: rgba(0, 0, 0, 0.24) !important;
    box-shadow: none !important;
}

body.brightness-light .nav-quiz-widget .quiz-widget,
body.brightness-light .quiz-widget {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light .quiz-widget-title,
body.brightness-light .quiz-widget-question,
body.brightness-light .quiz-widget-option,
body.brightness-light .quiz-widget-result-title {
    color: #111111 !important;
}

body.brightness-light .quiz-widget-option {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}

body.brightness-light .quiz-widget-option:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}

body.brightness-light .quiz-widget-progress-dot {
    background: rgba(0, 0, 0, 0.15);
}

body.brightness-light .quiz-widget-progress-dot.active {
    background: #111111;
    box-shadow: none;
}

body.brightness-light .quiz-widget-progress-dot.completed {
    background: #111111;
}

/* Force all “hardcoded white” text inside content to become black in light mode */
body.brightness-light .site-main,
body.brightness-light .site-main * {
    color: #111111 !important;
}

/* Keep text WHITE on intentionally-dark homepage boxes */
body.brightness-light .homepage-hero-btn.homepage-hero-btn-secondary,
body.brightness-light .homepage-hero-btn.homepage-hero-btn-secondary * {
    color: #ffffff !important;
}

body.brightness-light .brands-view-all-btn,
body.brightness-light .brands-view-all-btn * {
    color: #ffffff !important;
}

/* Prompt suggestions:
   - Homepage prompt box is dark -> keep WHITE text
   - Everywhere else in light mode: treat as LIGHT box -> black text
*/
body.brightness-light.home .prompt-suggestions-toggle,
body.brightness-light.home .prompt-suggestions-toggle *,
body.brightness-light.home .prompt-suggestions-title,
body.brightness-light.home .prompt-suggestions-title *,
body.brightness-light.home .prompt-suggestion-tool,
body.brightness-light.home .prompt-suggestion-tool * {
    color: rgba(255, 255, 255, 0.92) !important;
}

html.brightness-light body.home .prompt-suggestions-toggle,
html.brightness-light body.home .prompt-suggestions-toggle *,
html.brightness-light body.home .prompt-suggestions-title,
html.brightness-light body.home .prompt-suggestions-title *,
html.brightness-light body.home .prompt-suggestion-tool,
html.brightness-light body.home .prompt-suggestion-tool * {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.brightness-light:not(.home) .prompt-suggestions,
body.brightness-light.page-template-page-prompt-generator .prompt-suggestions {
    background: rgba(0, 0, 0, 0.035) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.brightness-light body:not(.home) .prompt-suggestions,
html.brightness-light body.page-template-page-prompt-generator .prompt-suggestions {
    background: rgba(0, 0, 0, 0.035) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light:not(.home) .prompt-suggestions-toggle,
body.brightness-light:not(.home) .prompt-suggestions-toggle *,
body.brightness-light:not(.home) .prompt-suggestions-title,
body.brightness-light:not(.home) .prompt-suggestions-title * {
    color: rgba(17, 17, 17, 0.82) !important;
    filter: none !important;
    opacity: 1 !important;
}

html.brightness-light body:not(.home) .prompt-suggestions-toggle,
html.brightness-light body:not(.home) .prompt-suggestions-toggle *,
html.brightness-light body:not(.home) .prompt-suggestions-title,
html.brightness-light body:not(.home) .prompt-suggestions-title * {
    color: rgba(17, 17, 17, 0.82) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Extra-specific: prompt generator context (fix faint toggle text) */
body.brightness-light .prompt-generator-box .prompt-suggestions-toggle,
body.brightness-light .prompt-generator-box .prompt-suggestions-toggle *,
body.brightness-light .prompt-generator-box .prompt-suggestions-title,
body.brightness-light .prompt-generator-box .prompt-suggestions-title * {
    color: #111111 !important;
    opacity: 1 !important;
}

html.brightness-light body .prompt-generator-box .prompt-suggestions-toggle,
html.brightness-light body .prompt-generator-box .prompt-suggestions-toggle *,
html.brightness-light body .prompt-generator-box .prompt-suggestions-title,
html.brightness-light body .prompt-generator-box .prompt-suggestions-title * {
    color: #111111 !important;
    opacity: 1 !important;
}

body.brightness-light:not(.home) .prompt-suggestions-toggle-icon {
    color: rgba(17, 17, 17, 0.55) !important;
}

html.brightness-light body:not(.home) .prompt-suggestions-toggle-icon {
    color: rgba(17, 17, 17, 0.55) !important;
}

body.brightness-light:not(.home) .prompt-suggestions-icon {
    filter: none !important;
    opacity: 0.9;
}

html.brightness-light body:not(.home) .prompt-suggestions-icon {
    filter: none !important;
    opacity: 0.9;
}

body.brightness-light:not(.home) .prompt-suggestion-tool,
body.brightness-light:not(.home) .prompt-suggestion-tool * {
    color: #111111 !important;
    opacity: 1 !important;
}

html.brightness-light body:not(.home) .prompt-suggestion-tool,
html.brightness-light body:not(.home) .prompt-suggestion-tool * {
    color: #111111 !important;
    opacity: 1 !important;
}

body.brightness-light:not(.home) .prompt-suggestion-tool {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.brightness-light body:not(.home) .prompt-suggestion-tool {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep text WHITE on intentionally-dark homepage article + about boxes */
body.brightness-light .xrated-lab-featured-article-card,
body.brightness-light .xrated-lab-featured-article-card * {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.brightness-light .homepage-about-box,
body.brightness-light .homepage-about-box * {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Site-wide: keep text WHITE on intentionally-dark "related / CTA / lab" boxes */
body.brightness-light .brands-page-hero-box,
body.brightness-light .brands-page-hero-box *,
body.brightness-light .brands-about-box,
body.brightness-light .brands-about-box *,
body.brightness-light .brands-related-resources-box,
body.brightness-light .brands-related-resources-box *,
body.brightness-light .brands-related-resource-card,
body.brightness-light .brands-related-resource-card *,
body.brightness-light .xrated-lab-page-hero-box,
body.brightness-light .xrated-lab-page-hero-box *,
body.brightness-light .xrated-about-box,
body.brightness-light .xrated-about-box *,
body.brightness-light .xrated-lab-related-resources-box,
body.brightness-light .xrated-lab-related-resources-box *,
body.brightness-light .xrated-lab-related-resource-card,
body.brightness-light .xrated-lab-related-resource-card *,
body.brightness-light .related-articles-box,
body.brightness-light .related-articles-box *,
body.brightness-light .generate-prompts-cta-box,
body.brightness-light .generate-prompts-cta-box *,
body.brightness-light .pg-related-articles-box,
body.brightness-light .pg-related-articles-box *,
body.brightness-light .xrated-lab-article-card,
body.brightness-light .xrated-lab-article-card *,
body.brightness-light .related-article-card,
body.brightness-light .related-article-card *,
body.brightness-light .pg-related-article-card,
body.brightness-light .pg-related-article-card * {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* X-Rated single article: Related Articles box is LIGHT in light mode -> black text */
body.brightness-light .xrated-lab-related-articles-box,
body.brightness-light .xrated-lab-related-articles-box * {
    color: #111111 !important;
}

body.brightness-light .xrated-lab-related-articles-box {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light .xrated-lab-related-article-card {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light .xrated-lab-related-article-card:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Prompt Generator page: dark boxes -> WHITE text */
body.brightness-light.page-template-page-prompt-generator .pg-history-box,
body.brightness-light.page-template-page-prompt-generator .pg-history-box *,
body.brightness-light.page-template-page-prompt-generator .community-prompts-box,
body.brightness-light.page-template-page-prompt-generator .community-prompts-box *,
body.brightness-light.page-template-page-prompt-generator .pg-brands-box,
body.brightness-light.page-template-page-prompt-generator .pg-brands-box *,
body.brightness-light.page-template-page-prompt-generator .pg-related-articles-box,
body.brightness-light.page-template-page-prompt-generator .pg-related-articles-box * {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Community Prompts: restore intended badge / accent colors in light mode */
body.brightness-light.page-template-page-prompt-generator .cp-badge-type {
    color: #60a5fa !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category {
    color: #c084fc !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category[data-category="straight"],
body.brightness-light.page-template-page-prompt-generator .cp-card[data-category="straight"] .cp-badge-category {
    color: #f87171 !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category[data-category="hentai"],
body.brightness-light.page-template-page-prompt-generator .cp-card[data-category="hentai"] .cp-badge-category {
    color: #f9a8d4 !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category[data-category="gay"],
body.brightness-light.page-template-page-prompt-generator .cp-card[data-category="gay"] .cp-badge-category {
    color: #4ade80 !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category[data-category="lesbian"],
body.brightness-light.page-template-page-prompt-generator .cp-card[data-category="lesbian"] .cp-badge-category {
    color: #c084fc !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-badge-category[data-category="shemale"],
body.brightness-light.page-template-page-prompt-generator .cp-card[data-category="shemale"] .cp-badge-category {
    color: #fb923c !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-card-custom span {
    color: rgba(16, 185, 129, 0.9) !important;
}

body.brightness-light.page-template-page-prompt-generator .cp-copy-btn.copied {
    color: #10b981 !important;
}

/* Prompt generator controls: keep WHITE text on dark buttons */
body.brightness-light .prompt-generator-box .type-btn,
body.brightness-light .prompt-generator-box .prompt-gen-type-btn,
body.brightness-light .prompt-generator-box .category-btn,
body.brightness-light .prompt-generator-box .prompt-gen-category-btn,
body.brightness-light .prompt-generator-box .mode-btn,
body.brightness-light .prompt-generator-box .prompt-gen-mode-btn {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Keep active states dark in light mode (avoid white button + black text) */
body.brightness-light .prompt-generator-box .type-btn.active,
body.brightness-light .prompt-generator-box .prompt-gen-type-btn.active,
body.brightness-light .prompt-generator-box .category-btn.active,
body.brightness-light .prompt-generator-box .prompt-gen-category-btn.active,
body.brightness-light .prompt-generator-box .mode-btn.active,
body.brightness-light .prompt-generator-box .prompt-gen-mode-btn.active {
    background: rgba(17, 17, 17, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    transform: none !important;
    color: #ffffff !important;
}

/* Prompt output box is LIGHT in light mode -> black text */
body.brightness-light .prompt-generator-box .prompt-output-container,
body.brightness-light .prompt-generator-box .prompt-output-container.has-prompt {
    background: rgba(0, 0, 0, 0.035) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light .prompt-generator-box .prompt-placeholder,
body.brightness-light .prompt-generator-box .prompt-gen-placeholder {
    color: rgba(17, 17, 17, 0.65) !important;
}

body.brightness-light .prompt-generator-box .prompt-result,
body.brightness-light .prompt-generator-box .prompt-gen-result {
    color: #111111 !important;
}

/* Custom keywords input is LIGHT in light mode -> black text */
body.brightness-light .prompt-generator-box .custom-prompt-input {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111111 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brightness-light .prompt-generator-box .custom-prompt-input::placeholder {
    color: rgba(17, 17, 17, 0.55) !important;
}

body.brightness-light .prompt-generator-box .custom-prompt-input:focus {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

/* Keep intended inverted buttons readable (override the global black text rule above) */
body.brightness-light .generate-btn,
body.brightness-light .prompt-gen-generate-btn,
body.brightness-light .prompt-copy-btn,
body.brightness-light .brand-card-button,
body.brightness-light .hero-btn,
body.brightness-light .pg-hero-btn {
    color: #ffffff !important;
}

/* Copy button: ensure child text stays white (global .site-main * forces black) */
body.brightness-light .prompt-copy-btn *,
body.brightness-light .prompt-gen-copy-btn * {
    color: #ffffff !important;
}

html.brightness-light body .prompt-copy-btn *,
html.brightness-light body .prompt-gen-copy-btn * {
    color: #ffffff !important;
}

/* Overlay should dim, not wash out */
body.brightness-light .menu-overlay {
    background: rgba(0, 0, 0, 0.28);
}

/* Menu toggle icon must be visible on white background */
body.brightness-light .menu-toggle {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) !important;
}

body.brightness-light .menu-toggle-icon {
    background: rgba(17, 17, 17, 0.8) !important;
    box-shadow:
        9px -5px 0 0 rgba(17, 17, 17, 0.8),
        9px 5px 0 0 rgba(17, 17, 17, 0.8) !important;
}

body.brightness-light .menu-toggle:hover .menu-toggle-icon {
    background: #111111 !important;
    box-shadow:
        9px -5px 0 0 #111111,
        9px 5px 0 0 #111111 !important;
}

/* Stronger focus outlines in light mode (base uses white) */
body.brightness-light a:focus-visible,
body.brightness-light button:focus-visible,
body.brightness-light input:focus-visible,
body.brightness-light select:focus-visible,
body.brightness-light textarea:focus-visible,
body.brightness-light [tabindex]:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.85) !important;
    outline-offset: 2px;
}

/* Primary action buttons: remove pink -> monochrome */
body.brightness-light .generate-btn,
body.brightness-light .prompt-gen-generate-btn,
body.brightness-light .prompt-copy-btn,
body.brightness-light .hero-btn,
body.brightness-light .pg-hero-btn {
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

body.brightness-light .generate-btn:hover,
body.brightness-light .prompt-gen-generate-btn:hover,
body.brightness-light .prompt-copy-btn:hover,
body.brightness-light .hero-btn:hover,
body.brightness-light .pg-hero-btn:hover {
    background: #000000 !important;
}

/* Smooth transitions for all brightness changes */
body,
body .homepage-hero-content,
body .brand-page-content,
body .brands-section-box,
body .xrated-lab-box,
body .legal-page-content,
body .xrated-lab-single-article,
body .article-page-content,
body .related-brands-container,
body .brand-made-with-box,
body .brand-card,
body .related-brand-card,
body .pg-brand-card,
body .xrated-lab-article-box,
body .main-navigation {
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .nav-brightness-control {
        margin: 15px 20px 20px 20px;
        padding: 12px;
    }
    
    .nav-brightness-btn {
        width: 50px;
        height: 50px;
    }
    
    .brightness-btn-icon {
        font-size: 1.4rem;
    }
}