/* Public Storefront Theme System - CSS Custom Properties */

/* ===== DEFAULT THEME (Dark) ===== */
.theme-default {
    --bg-body: #1a1a1a;
    --bg-card: #2a2a2a;
    --bg-header: #000;
    --bg-footer: #000;
    --bg-input: #333;
    --bg-hover: #333;
    --bg-nav-mobile: #1a1a1a;
    --bg-dropdown: #2a2a2a;
    --bg-dropdown-hover: #3a3a3a;
    --bg-submenu: #252525;
    --bg-product-img: #1a1a1a;
    --bg-subcategory: #3a3a3a;
    --border-primary: #3a3a3a;
    --border-secondary: #444;
    --border-nav: #333;
    --text-primary: #e0e0e0;
    --text-heading: #fff;
    --text-secondary: #888;
    --text-muted: #aaa;
    --text-label: #ccc;
    --text-placeholder: #777;
    --accent: #3498db;
    --accent-btn: #3498db;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #2980b9;
    --accent-light: #5dade2;
    --accent-lighter: #85c1e9;
    --price: #3498db;
    --success-bg: #1e4620;
    --success-text: #7dcea0;
    --success-border: #27ae60;
    --error-bg: #4a1c1c;
    --error-text: #f1948a;
    --error-border: #e74c3c;
    --info-bg: #17303f;
    --info-text: #a9cde4;
    --info-border: #3498db;
    --success-strong: #2ecc71;
    --warning-text: #f5b041;
    --danger-text: #e74c3c;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ===== MIDNIGHT THEME (Deep Blue) ===== */
.theme-midnight {
    --bg-body: #0d1b2a;
    --bg-card: #1b2838;
    --bg-header: #091520;
    --bg-footer: #091520;
    --bg-input: #253545;
    --bg-hover: #253545;
    --bg-nav-mobile: #0d1b2a;
    --bg-dropdown: #1b2838;
    --bg-dropdown-hover: #253545;
    --bg-submenu: #152535;
    --bg-product-img: #0d1b2a;
    --bg-subcategory: #253545;
    --border-primary: #2c3e50;
    --border-secondary: #34495e;
    --border-nav: #1a2a3a;
    --text-primary: #d0d8e0;
    --text-heading: #ecf0f1;
    --text-secondary: #7f8c9b;
    --text-muted: #95a5a6;
    --text-label: #b0bec5;
    --text-placeholder: #607080;
    --accent: #5dade2;
    --accent-btn: #5dade2;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #3498db;
    --accent-light: #7ec8e3;
    --accent-lighter: #a3d9f0;
    --price: #5dade2;
    --success-bg: #1a3a2a;
    --success-text: #7dcea0;
    --success-border: #2ecc71;
    --error-bg: #3a1c2a;
    --error-text: #f1948a;
    --error-border: #e74c3c;
    --info-bg: #17304a;
    --info-text: #a9cde4;
    --info-border: #5dade2;
    --success-strong: #2ecc71;
    --warning-text: #f5b041;
    --danger-text: #e74c3c;
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* ===== EMERALD THEME (Green) ===== */
.theme-emerald {
    --bg-body: #1a1f1a;
    --bg-card: #242e24;
    --bg-header: #0a120a;
    --bg-footer: #0a120a;
    --bg-input: #2e3a2e;
    --bg-hover: #2e3a2e;
    --bg-nav-mobile: #1a1f1a;
    --bg-dropdown: #242e24;
    --bg-dropdown-hover: #2e3a2e;
    --bg-submenu: #1e281e;
    --bg-product-img: #1a1f1a;
    --bg-subcategory: #2e3a2e;
    --border-primary: #3a4a3a;
    --border-secondary: #445544;
    --border-nav: #1a2a1a;
    --text-primary: #d0e0d0;
    --text-heading: #e8f5e8;
    --text-secondary: #7a9a7a;
    --text-muted: #8aaa8a;
    --text-label: #b0ccb0;
    --text-placeholder: #607060;
    --accent: #27ae60;
    --accent-btn: #27ae60;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #219a52;
    --accent-light: #52c08a;
    --accent-lighter: #7dd4a8;
    --price: #27ae60;
    --success-bg: #1e4620;
    --success-text: #7dcea0;
    --success-border: #27ae60;
    --error-bg: #3a1c1c;
    --error-text: #f1948a;
    --error-border: #e74c3c;
    --info-bg: #17303f;
    --info-text: #a9cde4;
    --info-border: #3498db;
    --success-strong: #2ecc71;
    --warning-text: #f5b041;
    --danger-text: #e74c3c;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ===== RUBY THEME (Red) ===== */
.theme-ruby {
    --bg-body: #1a1415;
    --bg-card: #2a2022;
    --bg-header: #100a0b;
    --bg-footer: #100a0b;
    --bg-input: #3a2a2c;
    --bg-hover: #3a2a2c;
    --bg-nav-mobile: #1a1415;
    --bg-dropdown: #2a2022;
    --bg-dropdown-hover: #3a2a2c;
    --bg-submenu: #241a1c;
    --bg-product-img: #1a1415;
    --bg-subcategory: #3a2a2c;
    --border-primary: #4a3335;
    --border-secondary: #5a3a3d;
    --border-nav: #2a1518;
    --text-primary: #e0d0d2;
    --text-heading: #f5e8ea;
    --text-secondary: #9a7a7e;
    --text-muted: #aa8a8e;
    --text-label: #ccb0b4;
    --text-placeholder: #705055;
    --accent: #e74c3c;
    --accent-btn: #e74c3c;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #c0392b;
    --accent-light: #ec7063;
    --accent-lighter: #f1948a;
    --price: #e74c3c;
    --success-bg: #1e4620;
    --success-text: #7dcea0;
    --success-border: #27ae60;
    --error-bg: #4a1c1c;
    --error-text: #f1948a;
    --error-border: #e74c3c;
    --info-bg: #17303f;
    --info-text: #a9cde4;
    --info-border: #3498db;
    --success-strong: #2ecc71;
    --warning-text: #f5b041;
    --danger-text: #e74c3c;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ===== AMBER THEME (Gold/Orange) ===== */
.theme-amber {
    --bg-body: #1a1814;
    --bg-card: #2a2620;
    --bg-header: #100e0a;
    --bg-footer: #100e0a;
    --bg-input: #3a342a;
    --bg-hover: #3a342a;
    --bg-nav-mobile: #1a1814;
    --bg-dropdown: #2a2620;
    --bg-dropdown-hover: #3a342a;
    --bg-submenu: #24201a;
    --bg-product-img: #1a1814;
    --bg-subcategory: #3a342a;
    --border-primary: #4a4235;
    --border-secondary: #5a4a3a;
    --border-nav: #2a2215;
    --text-primary: #e0dcd0;
    --text-heading: #f5f0e8;
    --text-secondary: #9a9280;
    --text-muted: #aaa290;
    --text-label: #ccbcb0;
    --text-placeholder: #706850;
    --accent: #f39c12;
    --accent-btn: #f39c12;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #d68910;
    --accent-light: #f5b041;
    --accent-lighter: #f8c471;
    --price: #f39c12;
    --success-bg: #2a3a1e;
    --success-text: #7dcea0;
    --success-border: #27ae60;
    --error-bg: #3a2a1c;
    --error-text: #f1948a;
    --error-border: #e74c3c;
    --info-bg: #1e3040;
    --info-text: #a9cde4;
    --info-border: #3498db;
    --success-strong: #2ecc71;
    --warning-text: #f5b041;
    --danger-text: #e74c3c;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ===== LIGHT THEME ===== */
.theme-light {
    /* Blues and greys here are darker than the dark themes' equivalents
       on purpose. Those are light-on-dark by design; reused unchanged on
       white they failed contrast badly - #5dade2 measured 2.5:1 and
       #85c1e9 1.9:1 against this theme's card background, where normal
       text needs 4.5:1. Values below are the same hue family, chosen to
       pass. Check contrast before "restoring" any of them. */
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-footer: #1a1a2e;
    --bg-input: #f0f2f5;
    --bg-hover: #e8eaed;
    --bg-nav-mobile: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-dropdown-hover: #f0f2f5;
    --bg-submenu: #f8f8f8;
    --bg-product-img: #f8f8f8;
    --bg-subcategory: #e8eaed;
    --border-primary: #ddd;
    --border-secondary: #ccc;
    --border-nav: #eee;
    --text-primary: #333;
    --text-heading: #1a1a1a;
    --text-secondary: #666;
    --text-muted: #6b6b6b;
    --text-label: #555;
    --text-placeholder: #aaa;
    --accent: #2471a3;
    --accent-btn: #3498db;
    --success-btn: #27ae60;
    --danger-btn: #e74c3c;
    --accent-hover: #1f618d;
    --accent-light: #2b7ab0;
    --accent-lighter: #2574a6;
    --price: #1f618d;
    --success-bg: #d4edda;
    --success-text: #155724;
    --success-border: #c3e6cb;
    --error-bg: #f8d7da;
    --error-text: #721c24;
    --error-border: #f5c6cb;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;
    --info-border: #bee5eb;
    --success-strong: #1e7e34;
    --warning-text: #8a6d1f;
    --danger-text: #c0392b;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    color-scheme: light;
}

/* ===== APPLY VARIABLES TO PUBLIC ELEMENTS ===== */

/* Body */
body[class*="theme-"] {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Header */
body[class*="theme-"] header {
    background: var(--bg-header);
    box-shadow: 0 2px 5px var(--shadow);
}

/* Footer */
body[class*="theme-"] footer {
    background: var(--bg-footer);
}

/* Navigation */
body[class*="theme-"] nav > a:hover,
body[class*="theme-"] nav > .dropdown:hover > .dropdown-toggle {
    background: var(--bg-hover);
}

body[class*="theme-"] .dropdown-menu {
    background: var(--bg-dropdown);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

body[class*="theme-"] .dropdown-menu a {
    color: var(--text-primary);
}

body[class*="theme-"] .dropdown-menu a:hover {
    background: var(--bg-dropdown-hover);
}

body[class*="theme-"] .dropdown-menu .view-all {
    border-top-color: var(--border-secondary);
    color: var(--accent-light);
}

body[class*="theme-"] .submenu {
    background: var(--bg-dropdown);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

/* Product Cards */
body[class*="theme-"] .product-card {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .product-card img {
    background: var(--bg-product-img);
}

body[class*="theme-"] .product-card h3 {
    color: var(--text-heading);
}

body[class*="theme-"] .product-card .price {
    color: var(--price);
}

body[class*="theme-"] .product-card .category {
    color: var(--text-secondary);
}

body[class*="theme-"] .variant-count {
    color: var(--accent-light);
}

/* Category Cards */
body[class*="theme-"] .category-card {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
    color: var(--text-primary);
}

body[class*="theme-"] .category-card-wrapper {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .subcategories {
    border-top-color: var(--border-primary);
}

body[class*="theme-"] .subcategory-link {
    background: var(--bg-subcategory);
    color: var(--text-primary);
}

body[class*="theme-"] .subcategory-link:hover {
    background: var(--accent-btn);
    color: #fff;
}

/* Product Detail */
body[class*="theme-"] .product-detail {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .product-detail h1 {
    color: var(--text-heading);
}

body[class*="theme-"] .product-detail .price {
    color: var(--price);
}

body[class*="theme-"] .product-detail .description {
    color: var(--text-muted);
}

body[class*="theme-"] .quantity-input input {
    border-color: var(--border-secondary);
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Forms */
body[class*="theme-"] .form-container {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .form-container h2 {
    color: var(--text-heading);
}

body[class*="theme-"] .form-group label {
    color: var(--text-label);
}

/* Mirrors style.css's own :not() exclusions rather than enumerating
   input types. Without them a themed store gives radio buttons and
   checkboxes a filled background and border, which is exactly why the
   base stylesheet excluded them. */
body[class*="theme-"] .form-group input:not([type="radio"]):not([type="checkbox"]),
body[class*="theme-"] .form-group textarea,
body[class*="theme-"] .form-group select {
    background: var(--bg-input);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

body[class*="theme-"] .form-group input::placeholder,
body[class*="theme-"] .form-group textarea::placeholder {
    color: var(--text-placeholder);
}

body[class*="theme-"] .form-group input:focus,
body[class*="theme-"] .form-group textarea:focus,
body[class*="theme-"] .form-group select:focus {
    border-color: var(--accent);
}

/* Buttons - accent override, force white text on colored buttons */
body[class*="theme-"] .btn-primary {
    background: var(--accent-btn);
    color: #fff;
}

body[class*="theme-"] .btn-primary:hover {
    background: var(--accent-btn); filter: brightness(0.88);
    color: #fff;
}

body[class*="theme-"] .btn-success {
    background: var(--accent-btn);
    color: #fff;
}

body[class*="theme-"] .btn-success:hover {
    background: var(--accent-hover);
    color: #fff;
}

body[class*="theme-"] .btn-danger {
    color: #fff;
}

body[class*="theme-"] .btn-danger:hover {
    color: #fff;
}

/* Messages */
body[class*="theme-"] .message.success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

body[class*="theme-"] .message.error {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: var(--error-border);
}

/* Added after .info shipped on the storefront (password reset, and the
   neutral confirmations) with only a hardcoded blue in style.css -
   .success and .error were themed here and .info silently was not, so
   on the light theme it stayed a dark navy panel. */
body[class*="theme-"] .message.info {
    background: var(--info-bg);
    color: var(--info-text);
    border-color: var(--info-border);
}

/* "Last purchased" notice - added to product pages Sep 2026 and themed
   only here; style.css carried a fixed grey that vanished into the light
   theme's background. */
body[class*="theme-"] .last-purchased {
    color: var(--text-secondary);
}

body[class*="theme-"] .last-purchased a {
    color: var(--accent);
}

/* Cart */
body[class*="theme-"] .cart-table {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .cart-table th {
    background: var(--bg-input);
    color: var(--text-heading);
}

body[class*="theme-"] .cart-table th,
body[class*="theme-"] .cart-table td {
    border-bottom-color: var(--border-primary);
    color: var(--text-primary);
}

body[class*="theme-"] .cart-total {
    background: var(--bg-card);
}

body[class*="theme-"] .cart-total h3 {
    color: var(--text-heading);
}

/* Orders */
body[class*="theme-"] .order-card {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .order-card .order-header {
    border-bottom-color: var(--border-primary);
}

/* Page Titles */
body[class*="theme-"] .page-title h1 {
    color: var(--text-heading);
}

/* Links.
   :not(.btn) because a button that happens to be an <a> is not a link.
   `a:hover` outranks `.btn-primary`'s own colour on specificity, so
   without this the label of every link-button changed colour on hover
   while <button> elements right beside it did not - Edit greying while
   Logout and Delete stayed put. */
body[class*="theme-"] a:not(.btn) {
    color: var(--accent-light);
}

body[class*="theme-"] a:not(.btn):hover {
    color: var(--accent-lighter);
}

/* Welcome Section (index.php) */
body[class*="theme-"] .welcome-section {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-body) 100%);
    border-color: var(--border-primary);
}

body[class*="theme-"] .welcome-section h1 {
    color: var(--text-heading);
}

body[class*="theme-"] .welcome-section p {
    color: var(--text-muted);
}

/* Review Cards (index.php) */
body[class*="theme-"] .review-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

body[class*="theme-"] .reviewer-name {
    color: var(--text-heading);
}

body[class*="theme-"] .review-product {
    color: var(--accent);
}

body[class*="theme-"] .review-text {
    color: var(--text-label);
}

body[class*="theme-"] .review-date {
    color: var(--text-secondary);
}

/* About Section (about.php) */
body[class*="theme-"] .about-section {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .about-content h2,
body[class*="theme-"] .about-content h3,
body[class*="theme-"] .about-content h4 {
    color: var(--text-heading);
}

body[class*="theme-"] .about-content p {
    color: var(--text-label);
}

body[class*="theme-"] .about-content ul,
body[class*="theme-"] .about-content ol {
    color: var(--text-label);
}

body[class*="theme-"] .about-content a {
    color: var(--accent);
}

/* Terms Section (terms.php) */
body[class*="theme-"] .terms-section {
    background: var(--bg-card);
    box-shadow: 0 2px 10px var(--shadow);
}

body[class*="theme-"] .terms-section h1,
body[class*="theme-"] .terms-section h3 {
    color: var(--text-heading);
}

body[class*="theme-"] .terms-section p,
body[class*="theme-"] .terms-section ul,
body[class*="theme-"] .terms-section li {
    color: var(--text-label);
}

body[class*="theme-"] .terms-section a {
    color: var(--accent);
}

body[class*="theme-"] .about-content a.btn {
    color: #fff;
}

/* Order Detail (order-detail.php) */
body[class*="theme-"] .od-card {
    background: var(--bg-card);
}

body[class*="theme-"] .od-card h3 {
    color: var(--text-heading);
    border-bottom-color: var(--border-secondary);
}

body[class*="theme-"] .od-card p {
    color: var(--text-label);
}

body[class*="theme-"] .od-items th {
    color: var(--text-secondary);
    border-bottom-color: var(--border-secondary);
}

body[class*="theme-"] .od-items td {
    border-bottom-color: var(--border-primary);
    color: var(--text-label);
}

body[class*="theme-"] .od-note {
    background: var(--bg-input);
}

body[class*="theme-"] .od-note small {
    color: var(--text-secondary);
}

/* Notifications (notifications.php) */
body[class*="theme-"] .notif-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

body[class*="theme-"] .notif-message {
    color: var(--text-primary);
}

body[class*="theme-"] .notif-date {
    color: var(--text-secondary);
}

body[class*="theme-"] .notif-unread-dot {
    background: var(--accent-btn);
}

/* Product Detail page - inline review cards & variant selectors */
body[class*="theme-"] .variant-btn {
    background: var(--bg-card);
    color: var(--text-label);
    border-color: var(--border-secondary);
}

body[class*="theme-"] .variant-btn:hover,
body[class*="theme-"] .variant-btn.active {
    border-color: var(--accent);
    background: var(--bg-input);
}

/* Product Detail - Variant Filter Buttons */
body[class*="theme-"] .variant-filter-btn {
    border-color: var(--border-secondary);
    background: var(--bg-card);
    color: var(--text-label);
}

body[class*="theme-"] .variant-filter-btn:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

body[class*="theme-"] .variant-filter-btn.active {
    border-color: var(--accent);
    background: var(--bg-input);
    color: var(--accent-light);
}

/* Product Detail - Gallery & Variants */
body[class*="theme-"] .product-gallery {
    background: var(--bg-body);
}

body[class*="theme-"] .gallery-thumbnails {
    background: var(--bg-card);
}

body[class*="theme-"] .variant-row {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

body[class*="theme-"] .variant-row:hover {
    background: var(--bg-hover);
}

body[class*="theme-"] .variant-row.selected {
    border-color: var(--accent);
    background: var(--bg-input);
}

body[class*="theme-"] .variant-row .vr-attrs {
    color: var(--text-primary);
}

body[class*="theme-"] .variant-row .vr-meta {
    color: var(--text-secondary);
}

body[class*="theme-"] .variant-row .vr-meta .vr-price {
    color: var(--price);
}

body[class*="theme-"] .variant-row .vr-meta .vr-shipping {
    color: var(--accent-light);
}

/* Product detail reviews section */
body[class*="theme-"] .product-review-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

/* Profile Reviews (profile.php) */
body[class*="theme-"] .my-review-card {
    background: var(--bg-input);
    border-color: var(--border-secondary);
}

body[class*="theme-"] .my-review-product strong {
    color: var(--text-heading);
}

body[class*="theme-"] .my-review-text {
    color: var(--text-label);
}

body[class*="theme-"] .my-review-date {
    color: var(--text-secondary);
}

/* ===== LIGHT THEME EXTRAS ===== */

/* Header text needs to be dark on light bg */
.theme-light header {
    color: #333;
    border-bottom: 1px solid #ddd;
}

.theme-light .logo a {
    color: #1a1a1a;
}

.theme-light nav > a,
.theme-light nav > .dropdown > .dropdown-toggle {
    color: #333;
}

.theme-light .hamburger span {
    background: #333;
}

/* Footer stays dark */
.theme-light footer {
    color: #fff;
}

/* Mobile nav stays readable */
@media (max-width: 768px) {
    body[class*="theme-"] nav {
        background: var(--bg-nav-mobile);
    }

    body[class*="theme-"] nav > a,
    body[class*="theme-"] nav > .dropdown > .dropdown-toggle {
        border-bottom-color: var(--border-nav);
    }

    body[class*="theme-"] .dropdown-menu a {
        border-bottom-color: var(--border-nav);
    }

    body[class*="theme-"] .dropdown-menu a:hover {
        background: var(--bg-hover);
    }

    body[class*="theme-"] .submenu {
        background: var(--bg-submenu);
    }

    body[class*="theme-"] .cart-table tr,
    body[class*="theme-"] .responsive-table tbody tr {
        background: var(--bg-card);
        border-color: var(--border-primary);
    }

    body[class*="theme-"] .cart-table td,
    body[class*="theme-"] .responsive-table tbody td {
        border-bottom-color: var(--border-primary);
    }

    body[class*="theme-"] .cart-table td::before,
    body[class*="theme-"] .responsive-table tbody td::before {
        color: var(--text-secondary);
    }

    .theme-light nav > a,
    .theme-light nav > .dropdown > .dropdown-toggle {
        color: #333;
    }
}