/**
 * 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;
}

/* These hero buttons used to stay dark in light mode, and this rule forced their label white so it
   would read on that dark fill. They are light now, which turned white on white into no text at
   all. Each keeps its own accent instead, and the neutral one takes the page ink.
   The !important stays because it is what this file uses throughout to win over the theme. */
body.brightness-light .homepage-hero-btn.homepage-hero-btn-secondary,
body.brightness-light .homepage-hero-btn.homepage-hero-btn-secondary * {
    color: #15151a !important;
}

body.brightness-light .homepage-hero-btn.hero-btn-i2p,
body.brightness-light .homepage-hero-btn.hero-btn-i2p * {
    color: #0c885a !important;
}

body.brightness-light .homepage-hero-btn.hero-btn-gf,
body.brightness-light .homepage-hero-btn.hero-btn-gf * {
    color: #c2185b !important;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME, THINGS THAT SIT ON A SATURATED FILL
   The blanket rule further up turns every label inside .site-main black. That is
   right for prose on a white page and wrong for anything painted on a colour:
   the editorial badges are white on amber, indigo, red and pink, and the filled
   buttons are white on their accent. Black on those is unreadable, and it went
   unnoticed because nobody reads the site in light mode with a badge in view.
   These take their own colour back, the same way the copy button already does.
   --------------------------------------------------------------------------- */
body.brightness-light .brand-badge,
body.brightness-light .brand-page-badge-below-title,
body.brightness-light .pg-brand-badge,
body.brightness-light .related-brand-badge,
body.brightness-light .gf-stamp,
body.brightness-light .i2p-tool .badge,
body.brightness-light .pc-tool-badge {
    color: #ffffff !important;
}

body.brightness-light .gf-btn-main,
body.brightness-light .gf-btn-main *,
body.brightness-light .gf-cta-solid,
body.brightness-light .gf-cta-brand,
body.brightness-light .brand-prompts-hub-btn.gf.lead,
body.brightness-light .i2p-tool .cta,
body.brightness-light .pc-tool-cta {
    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;
}

/* X-Rated AI Lab page: article preview boxes are LIGHT in light mode -> black text */
body.brightness-light .xrated-lab-article-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-article-box:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10) !important;
}

body.brightness-light .xrated-lab-article-box,
body.brightness-light .xrated-lab-article-box * {
    color: #111111 !important;
}

body.brightness-light .xrated-lab-article-date {
    color: rgba(17, 17, 17, 0.60) !important;
}

body.brightness-light .xrated-lab-article-excerpt,
body.brightness-light .xrated-lab-article-excerpt p {
    color: rgba(17, 17, 17, 0.78) !important;
}

body.brightness-light .xrated-lab-article-read-more {
    color: rgba(17, 17, 17, 0.88) !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;
    }
}

/* ---------------------------------------------------------------------------
   LIGHT THEME, THE BOX BACKGROUND ITSELF
   This file spent 812 lines correcting text colour in the light theme and never
   once touched the background of a box: all 136 of them kept the dark glass and
   came out mid grey over a white page. Flipping the two tokens fixes every one
   of them at once, including any box written next year.

   Scoped to body.logged-in while the owner reviews it. Removing that one class
   from the two selectors below is what makes it live for everyone.
   --------------------------------------------------------------------------- */
body.logged-in.brightness-light {
    --glass-rgb: 246, 246, 249;
    --glass-hover-rgb: 236, 236, 241;
}