/* Theme Variables for Light and Dark Modes */

/* Dark Theme (Default) */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    --bg-header: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-panel: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    --bg-dropdown: #161616;
    --bg-hover: rgba(0, 176, 185, 0.15);
    --bg-button: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-heading: #ffffff;

    /* Border Colors */
    --border-primary: rgba(0, 176, 185, 0.2);
    --border-secondary: rgba(0, 176, 185, 0.35);
    --border-input: #6b7280;

    /* Shadow Colors */
    --shadow-primary: rgba(0, 176, 185, 0.2);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --shadow-medium: rgba(0, 0, 0, 0.4);

    /* Autofill Colors */
    --autofill-bg: #1a1a1a;
    --autofill-text: #e0e0e0;

    /* Cookie Banner */
    --cc-bg: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
    --cc-color: #e0e0e0;
    --cc-heading: #ffffff;
    --cc-muted: #9ca3af;
    --cc-desc: #6b7280;
    --cc-border-top: rgba(0, 176, 185, 0.4);
    --cc-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    --cc-panel-border: rgba(255, 255, 255, 0.08);
    --cc-card-bg: rgba(255, 255, 255, 0.04);
    --cc-card-border: rgba(255, 255, 255, 0.08);
    --cc-reject-border: rgba(255, 255, 255, 0.15);
    --cc-reject-color: #9ca3af;
    --cc-toggle-off: rgba(255, 255, 255, 0.15);

    /* Documentation pages (Privacy / Terms) */
    --doc-card-bg: rgba(255,255,255,0.03);
    --doc-card-border: rgba(0,176,185,0.15);
    --doc-table-divider: rgba(255,255,255,0.07);
    --doc-right-card-bg: rgba(255,255,255,0.04);
    --doc-right-card-border: rgba(255,255,255,0.07);

    /* Scroll-to-top button */
    --stt-bg: linear-gradient(135deg, #00b0b9 0%, #008a91 100%);
    --stt-shadow: 0 4px 16px rgba(0, 176, 185, 0.45);
    --stt-shadow-hover: 0 6px 24px rgba(0, 176, 185, 0.65);
    --stt-border: rgba(0, 176, 185, 0.3);

    /* Surface layers (used by markdown doc pages) */
    --surface-primary: #161616;
    --surface-secondary: #1e2330;
}

/* Light Theme */
[data-theme="light"] {
    /* Backgrounds */
    /*--bg-primary: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);*/
    --bg-header: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-panel: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --bg-dropdown: #ffffff;
    --bg-hover: rgba(0, 176, 185, 0.1);
    --bg-button: rgba(0, 0, 0, 0.05);
    --bg-overlay: rgba(255, 255, 255, 0.95);

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b7280;
    --text-heading: #000000;

    /* Border Colors */
    --border-primary: rgba(0, 176, 185, 0.3);
    --border-secondary: rgba(0, 176, 185, 0.5);
    --border-input: #d1d5db;

    /* Shadow Colors */
    --shadow-primary: rgba(0, 176, 185, 0.15);
    --shadow-strong: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.1);

    /* Autofill Colors */
    --autofill-bg: #f5f5f5;
    --autofill-text: #1a1a1a;

    /* Cookie Banner */
    --cc-bg: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    --cc-color: #1a1a1a;
    --cc-heading: #000000;
    --cc-muted: #4a4a4a;
    --cc-desc: #6b7280;
    --cc-border-top: rgba(0, 176, 185, 0.5);
    --cc-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
    --cc-panel-border: rgba(0, 0, 0, 0.08);
    --cc-card-bg: rgba(0, 0, 0, 0.03);
    --cc-card-border: rgba(0, 0, 0, 0.08);
    --cc-reject-border: rgba(0, 0, 0, 0.15);
    --cc-reject-color: #6b7280;
    --cc-toggle-off: rgba(0, 0, 0, 0.15);

    /* Documentation pages (Privacy / Terms) */
    --doc-card-bg: #ffffff;
    --doc-card-border: #d1d5db;
    --doc-table-divider: #d1d5db;
    --doc-right-card-bg: #f3f4f6;
    --doc-right-card-border: #d1d5db;

    /* Scroll-to-top button */
    --stt-bg: linear-gradient(135deg, #00b0b9 0%, #008a91 100%);
    --stt-shadow: 0 4px 16px rgba(0, 176, 185, 0.35);
    --stt-shadow-hover: 0 6px 24px rgba(0, 176, 185, 0.55);
    --stt-border: rgba(0, 176, 185, 0.4);

    /* Surface layers (used by markdown doc pages) */
    --surface-primary: #ffffff;
    --surface-secondary: #f3f4f6;
}

/* Apply theme variables to body and common elements */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.header-gradient {
    background: var(--bg-header) !important;
    box-shadow: 0 4px 20px var(--shadow-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* Search inputs */
#searchInput, #mobileSearchInput {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
    box-shadow: none !important;
}

#searchInput:focus, #mobileSearchInput:focus {
    box-shadow: none !important;
}

#searchInput:-webkit-autofill, #mobileSearchInput:-webkit-autofill,
#searchInput:-webkit-autofill:focus, #mobileSearchInput:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--autofill-bg) inset !important;
    -webkit-text-fill-color: var(--autofill-text) !important;
    caret-color: var(--autofill-text);
}

/* Dropdown backgrounds */
#searchDropdown, #mobileSearchDropdown {
    background: var(--bg-dropdown) !important;
    border: 1px solid var(--border-secondary) !important;
    box-shadow: 0 20px 40px var(--shadow-strong) !important;
}

/* Logo text */
.logo-text {
    color: var(--text-heading) !important;
}

/* Contact form inputs */
.contact-form-input {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}

/* Global form input styling - applies to all inputs and textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}

/* ── Global Custom Select ──────────────────────────────────────────── */
select,
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--bg-dropdown) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300b0b9' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    color: var(--text-primary) !important;
    border: 1.5px solid var(--border-input) !important;
    border-radius: 8px !important;
    padding: 8px 36px 8px 12px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    line-height: 1.5 !important;
}

select:hover,
.form-select:hover {
    border-color: var(--border-secondary) !important;
}

select:focus,
.form-select:focus {
    outline: none !important;
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 176, 185, 0.15) !important;
}

select option,
.form-select option {
    background-color: var(--bg-dropdown) !important;
    color: var(--text-primary) !important;
    padding: 10px 12px !important;
}

select option:checked,
.form-select option:checked {
    background-color: rgba(0, 176, 185, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Override for inputs with inline borders */
input[style*="border"][type="text"],
input[style*="border"][type="email"],
input[style*="border"][type="password"],
input[style*="border"][type="number"],
textarea[style*="border"] {
    border-color: var(--border-input) !important;
}

/* Admin inputs */
.admin-input {
    border-color: var(--border-input) !important;
}

/* Action icons and buttons */
.action-icon {
    background: var(--bg-button) !important;
    color: var(--text-primary) !important;
}

.action-icon:hover {
    background: var(--bg-hover) !important;
}

/* Sort buttons */
.sort-btn {
    background: var(--bg-button) !important;
    color: var(--text-primary) !important;
}

.sort-btn:hover {
    background: var(--bg-hover) !important;
}

/* Panels */
.contact-panel, .delivery-panel {
    background: var(--bg-panel) !important;
}

/* Top bar */
.top-bar {
    background: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.top-bar a {
    color: var(--text-secondary) !important;
}

.top-bar a:hover {
    color: var(--brand-teal) !important;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    background: var(--bg-overlay) !important;
}

/* Theme Toggle Button Styles */
.theme-toggle {
    background: var(--bg-button);
    border: 2px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--brand-teal);
    transform: translateY(-2px);
}

.theme-toggle i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(20deg);
}

/* Global product image background - white background for all themes */
.product-image {
    background: rgb(255, 255, 255) !important;
}

/* Smooth transition for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Suppress ALL transitions during initial page load to prevent theme flash */
.no-transition *,
.no-transition *::before,
.no-transition *::after {
    transition: none !important;
}

/* ── Custom theme-aware select dropdowns ─────────────────────────────
   .theme-select-btn  — the visible trigger button
   .theme-select-list — the floating options panel
   .select-opt        — each option button inside the list             */
.theme-select-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    cursor: pointer;
}

.theme-select-list {
    background: var(--bg-dropdown);
    border: 1px solid rgba(0, 176, 185, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.theme-select-list .select-opt {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-size: .875rem;
    color: var(--text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
    transition: background 0.15s;
}

.theme-select-list .select-opt:hover {
    background: var(--bg-hover);
}

.theme-select-list .select-opt[data-val=""] {
    color: var(--text-muted);
}

/* ===== LIGHT THEME HIGH-SPECIFICITY OVERRIDES =====
   Selector [data-theme="light"] .X has higher specificity than .X, so these
   rules win over the hardcoded dark values in the inline <style> block. */

[data-theme="light"] .action-icon {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #2d2d2d !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .action-icon i {
    color: #2d2d2d !important;
}

[data-theme="light"] .action-icon:hover {
    background: var(--brand-teal) !important;
    color: white !important;
    border-color: var(--brand-teal) !important;
}

[data-theme="light"] .action-icon:hover i {
    color: white !important;
}

[data-theme="light"] .dropdown-content {
    background: #ffffff !important;
    border-color: rgba(0, 176, 185, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .dropdown-content a {
    color: #2d2d2d !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .sidebar-item {
    color: #2d2d2d !important;
}

[data-theme="light"] .sort-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #2d2d2d !important;
}

[data-theme="light"] .top-bar {
    background: linear-gradient(90deg, #e8e8e8 0%, #f0f0f0 100%) !important;
}

[data-theme="light"] .contact-panel,
[data-theme="light"] .delivery-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .contact-form-input {
    border-color: #d1d5db !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .contact-form-input::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}

/* Global input overrides for light theme */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: #d1d5db !important;
    color: #1a1a1a !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] select,
[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300b0b9' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    border-color: #d1d5db !important;
    color: #1a1a1a !important;
}

[data-theme="light"] select:hover,
[data-theme="light"] .form-select:hover {
    border-color: rgba(0, 176, 185, 0.5) !important;
}

[data-theme="light"] select option,
[data-theme="light"] .form-select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

[data-theme="light"] select option:checked,
[data-theme="light"] .form-select option:checked {
    background-color: rgba(0, 176, 185, 0.12) !important;
    color: #1a1a1a !important;
}

/* Admin inputs in light theme */
[data-theme="light"] .admin-input {
    border-color: #d1d5db !important;
    background: rgba(0, 0, 0, 0.04) !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .admin-input:focus {
    border-color: var(--brand-teal) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .mobile-menu {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .mobile-accordion {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mobile-accordion-header {
    color: #1a1a1a !important;
}

[data-theme="light"] .mobile-accordion-header:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .mobile-accordion-content a {
    color: #4a4a4a !important;
}

[data-theme="light"] .mobile-menu-button {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mobile-search-bar {
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: rgba(0, 176, 185, 0.15) !important;
}

[data-theme="light"] .mobile-quick-bar a {
    color: #2d2d2d !important;
}

[data-theme="light"] .mobile-quick-bar .divider {
    color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .timeline-icon {
    border-color: #f0f0f0 !important;
}

/* Footer */
[data-theme="light"] footer {
    background: linear-gradient(135deg, #efefef 0%, #e4e4e4 100%) !important;
    border-top-color: rgba(0, 176, 185, 0.3) !important;
}

[data-theme="light"] footer .text-white { color: #111111 !important; }
[data-theme="light"] footer .text-gray-400 { color: #555555 !important; }
[data-theme="light"] footer .text-gray-500 { color: #666666 !important; }
[data-theme="light"] footer .border-gray-800 { border-color: rgba(0, 0, 0, 0.12) !important; }

/* Social icon circles */
[data-theme="light"] footer .mt-6.gap-3 > a {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #444444 !important;
}

/* Mobile menu close button & search */
[data-theme="light"] .mobile-menu button.bg-gray-800 {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #333333 !important;
}

[data-theme="light"] .mobile-menu input[type="text"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 176, 185, 0.3) !important;
    color: #111111 !important;
}

/* ── Global Tailwind text colour overrides ───────────────────────────── */
[data-theme="light"] .text-white:not([style*="linear-gradient"])    { color: #111111 !important; }
[data-theme="light"] .text-gray-100 { color: #1a1a1a !important; }
[data-theme="light"] .text-gray-200 { color: #2d2d2d !important; }
[data-theme="light"] .text-gray-300 { color: #444444 !important; }
[data-theme="light"] .text-gray-400 { color: #555555 !important; }
[data-theme="light"] .text-gray-500 { color: #666666 !important; }

/* ── Search suggest dropdown ─────────────────────────────────────────── */
[data-theme="light"] #searchDropdown,
[data-theme="light"] #mobileSearchDropdown {
    background: #ffffff !important;
    border-color: rgba(0, 176, 185, 0.35) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Base (dark) styles for CSS-class-driven suggest items */
.suggest-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.suggest-price {
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.suggest-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.suggest-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Light overrides */
[data-theme="light"] .suggest-name  { color: #111111 !important; }
[data-theme="light"] .suggest-price { color: #222222 !important; }

[data-theme="light"] .suggest-item {
    border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .suggest-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Reusable admin glass-effect elements ───────────────────────────── */
[data-theme="light"] .glass-panel {
    background: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .glass-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #555555 !important;
    border-color: #d1d5db !important;
}

[data-theme="light"] .glass-input {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 176, 185, 0.4) !important;
    color: #111111 !important;
}

[data-theme="light"] .glass-input::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}

/* ── Ghost buttons / secondary action buttons ────────────────────────
   Covers .ghost-btn class AND any <a>/<button> with #9ca3af inline color
   (the universal dark-theme ghost button pattern used across all views). */
[data-theme="light"] .ghost-btn,
[data-theme="light"] a[style*="#9ca3af"],
[data-theme="light"] button[style*="#9ca3af"] {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #555555 !important;
    border-color: #d1d5db !important;
}

/* Active pagination / teal-highlighted buttons must not be overridden */
[data-theme="light"] a[style*="var(--brand-teal)"],
[data-theme="light"] button[style*="var(--brand-teal)"] {
    color: var(--brand-teal) !important;
    border-color: rgba(0, 176, 185, 0.4) !important;
}

/* Teal-background CTA buttons (e.g. "Czytaj więcej") keep white text in light theme */
[data-theme="light"] a[style*="background: var(--brand-teal)"],
[data-theme="light"] button[style*="background: var(--brand-teal)"] {
    color: #ffffff !important;
}

/* Blog carousel arrow buttons: --bg-primary is unset in light theme so provide explicit bg */
[data-theme="light"] #featuredCarousel button {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #d1d5db !important;
}

/* Gradient primary buttons keep their gradient + white text in light theme */
[data-theme="light"] button[style*="linear-gradient"],
[data-theme="light"] a[style*="linear-gradient"] {
    background: linear-gradient(135deg, var(--brand-teal) 0%, #008a91 100%) !important;
    color: #ffffff !important;
}

/* Tailwind-class-based gradient/teal backgrounds also keep white text */
[data-theme="light"] .text-white.bg-gradient-to-r,
[data-theme="light"] .text-white.bg-gradient-to-br,
[data-theme="light"] .text-white.bg-gradient-to-b,
[data-theme="light"] .text-white.bg-brand-teal,
[data-theme="light"] .text-white.bg-teal-500 { color: #ffffff !important; }

/* ── Custom select/dropdown buttons ─────────────────────────────────── */
[data-theme="light"] .theme-select-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1.5px solid #d1d5db !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .theme-select-list {
    background: #ffffff !important;
    border-color: rgba(0, 176, 185, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .theme-select-list .mfg-opt,
[data-theme="light"] .theme-select-list .cat-opt,
[data-theme="light"] .theme-select-list .select-opt,
[data-theme="light"] .theme-select-list .qe-mfg-opt,
[data-theme="light"] .theme-select-list .qe-cat-opt {
    color: #2d2d2d !important;
}

[data-theme="light"] .theme-select-list .mfg-opt:hover,
[data-theme="light"] .theme-select-list .cat-opt:hover,
[data-theme="light"] .theme-select-list .select-opt:hover,
[data-theme="light"] .theme-select-list .qe-mfg-opt:hover,
[data-theme="light"] .theme-select-list .qe-cat-opt:hover {
    background: rgba(0, 176, 185, 0.08) !important;
}

/* ── Ensure all form inputs have a visible border (override inline
   border shorthand which border-color alone may not fully replace) ─── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea {
    border: 1px solid #d1d5db !important;
}

/* ── Modals ──────────────────────────────────────────────────────────── */
[data-theme="light"] .theme-modal {
    background: #ffffff !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .theme-modal .text-white {
    color: #111827 !important;
}

[data-theme="light"] .theme-modal .text-gray-200,
[data-theme="light"] .theme-modal .text-gray-300 {
    color: #374151 !important;
}

[data-theme="light"] .theme-modal .text-gray-400,
[data-theme="light"] .theme-modal .text-gray-500 {
    color: #6b7280 !important;
}

/* Header / footer dividers and left-panel separator (with leading zero) */
[data-theme="light"] .theme-modal div[style*="rgba(255,255,255,0.07)"],
[data-theme="light"] .theme-modal div[style*="rgba(255,255,255,0.06)"] {
    border-color: #e5e7eb !important;
}

/* Qty stepper wrapper (shorthand without leading zero: .06 / .15) */
[data-theme="light"] .theme-modal div[style*="rgba(255,255,255,.06)"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: #d1d5db !important;
}

/* Close button with transparent-white inline background */
[data-theme="light"] .theme-modal button[style*="rgba(255,255,255,0.07)"],
[data-theme="light"] .theme-modal button.bg-gray-800 {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
}

/* Inputs and textareas inside modals */
[data-theme="light"] .theme-modal input:not([type="hidden"]):not([type="checkbox"]),
[data-theme="light"] .theme-modal textarea {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #111827 !important;
}

/* Dropdown lists inside modals */
[data-theme="light"] .theme-modal [style*="#0b1220"] {
    background: #ffffff !important;
    border-color: rgba(0, 176, 185, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown option text */
[data-theme="light"] .theme-modal .select-opt,
[data-theme="light"] .theme-modal .mfg-opt,
[data-theme="light"] .theme-modal .cat-opt {
    color: #2d2d2d !important;
}

/* ── Global Auto-Custom Select (cs-*) ────────────────────────────────
   cs-wrap          — position:relative block wrapper
   cs-btn           — visible trigger button
   cs-label         — selected-value text inside trigger
   cs-placeholder   — muted style when nothing / blank option selected
   cs-arrow         — teal chevron icon
   cs-list          — floating options panel
   cs-list-open     — modifier: panel visible
   cs-opt           — individual option button
   cs-placeholder-opt — muted style for blank/hint option
   cs-hidden        — applied to the original <select> (display:none)
   data-no-cs       — opt-out attribute: skip auto-init for that select
   ─────────────────────────────────────────────────────────────────── */

.cs-hidden {
    display: none !important;
}

.cs-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.cs-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    background: var(--bg-dropdown);
    color: var(--text-primary);
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    gap: 8px;
}

.cs-btn:hover {
    border-color: var(--border-secondary);
}

.cs-btn.cs-open {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(0, 176, 185, 0.15);
}

.cs-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.cs-label.cs-placeholder {
    color: var(--text-muted);
}

.cs-arrow {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--brand-teal);
    transition: transform 0.2s;
    pointer-events: none;
}

.cs-btn.cs-open .cs-arrow {
    transform: rotate(180deg);
}

.cs-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bg-dropdown);
    border: 1px solid rgba(0, 176, 185, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    overflow-y: auto;
    max-height: 240px;
}

.cs-list.cs-list-open {
    display: block;
}

.cs-opt {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.cs-opt:hover {
    background: rgba(0, 176, 185, 0.12);
}

.cs-placeholder-opt {
    color: var(--text-muted) !important;
}

/* Light theme overrides */
[data-theme="light"] .cs-btn {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1a1a1a;
}

[data-theme="light"] .cs-btn:hover {
    border-color: rgba(0, 176, 185, 0.5);
}

[data-theme="light"] .cs-btn.cs-open {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(0, 176, 185, 0.12);
}

[data-theme="light"] .cs-label {
    color: #1a1a1a;
}

[data-theme="light"] .cs-label.cs-placeholder {
    color: #9ca3af;
}

[data-theme="light"] .cs-list {
    background: #ffffff;
    border-color: rgba(0, 176, 185, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .cs-opt {
    color: #2d2d2d;
}

[data-theme="light"] .cs-opt:hover {
    background: rgba(0, 176, 185, 0.08);
}

[data-theme="light"] .cs-placeholder-opt {
    color: #9ca3af !important;
}
    color: #111827 !important;
}

/* Inline muted labels */
[data-theme="light"] .theme-modal [style*="#9ca3af"] {
    color: #6b7280 !important;
}

/* Import modal header text (#e0e0e0) */
[data-theme="light"] .theme-modal [style*="#e0e0e0"] {
    color: #111827 !important;
}

/* Cancel-style buttons (Tailwind border-gray-700) */
[data-theme="light"] .theme-modal .border-gray-700 {
    border-color: #d1d5db !important;
    color: #374151 !important;
}

[data-theme="light"] .theme-modal .hover\:bg-gray-800:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* Keep white text on teal/gradient action buttons */
[data-theme="light"] .theme-modal button[style*="linear-gradient"] {
    color: #ffffff !important;
}

/* ── Cancel / secondary buttons (.btn-cancel) — global ───────────────
   Use on <a>/<button> elements alongside spacing/layout utility classes.
   Replaces the dark-Tailwind pattern: border-gray-700 hover:bg-gray-800 text-gray-300 */
.btn-cancel {
    border-color: rgba(255, 255, 255, 0.2);
    color: #9ca3af;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #d1d5db;
}

[data-theme="light"] .btn-cancel {
    border-color: #d1d5db !important;
    color: #555555 !important;
    background: transparent !important;
}

[data-theme="light"] .btn-cancel:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a1a !important;
}

/* ── Native <select> option dropdown background ───────────────────────
   Applies the theme's dropdown colour to browser-native option lists.  */
select option {
    background-color: var(--bg-dropdown);
    color: var(--text-primary);
}

/* ── Cookie Consent Banner ────────────────────────────────────────────
   Uses --cc-* variables defined per theme above.                       */
#cookie-banner {
    background: var(--cc-bg) !important;
    color: var(--cc-color);
    border-top: 2px solid var(--cc-border-top);
    box-shadow: var(--cc-shadow);
}

#cookie-banner .cc-heading { color: var(--cc-heading); }
#cookie-banner .cc-muted   { color: var(--cc-muted); }

#cookie-banner #cc-panel {
    border-top: 1px solid var(--cc-panel-border);
}

#cookie-banner .cc-card {
    background: var(--cc-card-bg);
    border: 1px solid var(--cc-card-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

#cookie-banner .cc-card-title { color: var(--cc-heading); }
#cookie-banner .cc-card-desc  { color: var(--cc-desc); }

#cookie-banner #cc-reject {
    border-color: var(--cc-reject-border) !important;
    color: var(--cc-reject-color) !important;
}