/* Shop light / dark. Light is the page's own styling; everything below only applies when <html data-theme="dark">.
   Loaded after the page styles. The switch itself is js/theme.js. */

/* ── The switch button (round, in the header) ─────────────────────────────── */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; margin-left: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: #f1f3f5; color: #333; border: 1px solid #d5dae0; cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { background: #e4e8ec; }
.theme-toggle:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
@media (max-width: 768px) { body.has-phone-bar header .theme-toggle { display: none; } }   /* on phones it lives in the More sheet */

/* ── Product pictures are shown whole, never cropped ──────────────────────── */
.product-item img.main-img, body.has-phone-bar .product-item img.main-img {
  width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain !important;
  background: #f3f4f6; border-radius: 8px; display: block; margin: 0 auto .7rem !important;
}
.product-thumbs img { object-fit: contain !important; background: #f3f4f6; }
.product-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.product-thumbs img { margin-right: 0 !important; }
.cart-modal-content img, .cart-item img, #cart-items img, .order-item img { object-fit: contain !important; background: #f3f4f6; }

/* ── Dark ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #0f1722; --d-surface: #172131; --d-surface2: #1e2b3f; --d-border: #2e3d54; --d-text: #e7edf5; --d-muted: #a9b6c9; --d-link: #7db4ff;
}
html[data-theme="dark"] body { background-color: var(--d-bg) !important; color: var(--d-text); }
html[data-theme="dark"] header { background-color: #121b29 !important; box-shadow: 0 2px 6px rgba(0,0,0,.5) !important; border-bottom: 1px solid var(--d-border); }
html[data-theme="dark"] .logo, html[data-theme="dark"] .cart-icon { color: var(--d-text) !important; }
html[data-theme="dark"] nav a { color: #c3cedd !important; }
html[data-theme="dark"] nav a:hover { color: var(--d-link) !important; }
html[data-theme="dark"] .theme-toggle { background: var(--d-surface2); color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .theme-toggle:hover { background: #26354d; }
html[data-theme="dark"] main, html[data-theme="dark"] section { background-color: transparent; color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--d-text); }
html[data-theme="dark"] .hero { background-color: #16345f !important; color: #fff; }
html[data-theme="dark"] footer { background-color: #0a1019 !important; color: var(--d-muted); }
html[data-theme="dark"] a { color: var(--d-link); }
html[data-theme="dark"] header a, html[data-theme="dark"] footer a { color: inherit; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] #product-search-input {
  background-color: var(--d-surface2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important;
}
html[data-theme="dark"] ::placeholder { color: #8795ab; }

/* shop: products, categories, modals */
html[data-theme="dark"] .product-item, html[data-theme="dark"] .category-bar { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.45) !important; }
html[data-theme="dark"] .product-item p, html[data-theme="dark"] .product-item label { color: var(--d-muted) !important; }
html[data-theme="dark"] .product-item .price { color: #4fd1b8 !important; }
html[data-theme="dark"] .product-item img.main-img, html[data-theme="dark"] .product-thumbs img { background: #223149; border-color: var(--d-border); }
html[data-theme="dark"] .product-item h3, html[data-theme="dark"] .product-item strong { color: var(--d-text); }
html[data-theme="dark"] .stars span { color: var(--d-muted) !important; }
html[data-theme="dark"] .stars i.far.fa-star, html[data-theme="dark"] .rating-stars i { color: #55657d; }
html[data-theme="dark"] .rating-stars i.rated, html[data-theme="dark"] .rating-stars i:hover { color: #FFD700; }
html[data-theme="dark"] .category-bar button { background: var(--d-surface2) !important; color: #9cc4ff !important; }
html[data-theme="dark"] .category-bar button.active, html[data-theme="dark"] .category-bar button:hover { background: #2563eb !important; color: #fff !important; }
html[data-theme="dark"] .order-form-modal-content, html[data-theme="dark"] .cart-modal-content, html[data-theme="dark"] .rating-modal-content {
  background: var(--d-surface) !important; color: var(--d-text); border: 1px solid var(--d-border);
}
html[data-theme="dark"] .order-form-modal-content .pay-tiles label.pay-tile { background: var(--d-surface2) !important; border-color: var(--d-border) !important; color: var(--d-text); }
html[data-theme="dark"] .order-form-modal-content .pay-tiles label.pay-tile:has(input:checked) { background: #1b3358 !important; border-color: #5b9bff !important; }
html[data-theme="dark"] .order-form-modal-content .pay-tile-sub { color: var(--d-muted) !important; }
html[data-theme="dark"] .order-form-modal-content .pay-tile-status { color: #f2c14e !important; }
html[data-theme="dark"] .order-form-modal-content .outside-cameroon-message { background: #3a3012 !important; color: #f3d98b !important; }
html[data-theme="dark"] .order-form-modal-content .close-order-form-btn, html[data-theme="dark"] .cart-modal-content .close-modal-btn, html[data-theme="dark"] .rating-modal-content .close-rating-modal-btn { color: var(--d-text) !important; }
html[data-theme="dark"] .order-form-modal-content .submit-order-form-btn:disabled, html[data-theme="dark"] .rating-modal-content .rate-product-btn:disabled { background: #3a475c !important; color: #9aa8bd !important; }
html[data-theme="dark"] .coupon-section, html[data-theme="dark"] .reviews-container, html[data-theme="dark"] .cart-total .grand-total { border-color: var(--d-border) !important; }
html[data-theme="dark"] .cart-modal-content *:not(button):not(a):not(i):not(input):not(select) { border-color: var(--d-border); }
html[data-theme="dark"] .cart-total .discount-line { color: #6fdc8c; }

/* orders and order status */
html[data-theme="dark"] .order-card, html[data-theme="dark"] .status-card, html[data-theme="dark"] .card { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; color: var(--d-text); }
html[data-theme="dark"] .order-header, html[data-theme="dark"] .track-panel { background: var(--d-surface2) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] #loading-message, html[data-theme="dark"] #no-orders-message, html[data-theme="dark"] .status-text, html[data-theme="dark"] .track-note, html[data-theme="dark"] .lead { color: var(--d-muted) !important; }
html[data-theme="dark"] .status-order { background: var(--d-surface2) !important; color: var(--d-text); }
html[data-theme="dark"] .track-error, html[data-theme="dark"] .error { color: #ff8b97 !important; }
html[data-theme="dark"] .spinner { border-color: #33435b !important; border-top-color: #5b9bff !important; }
html[data-theme="dark"] .status-delivered { background-color: #2b3f5e !important; }

/* support */
html[data-theme="dark"] button.secondary { background: var(--d-surface2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .ticket-row { border-color: var(--d-border) !important; }
html[data-theme="dark"] .ticket-row:hover { background: var(--d-surface2) !important; }
html[data-theme="dark"] .ticket-row small, html[data-theme="dark"] .msg small { color: var(--d-muted) !important; }
html[data-theme="dark"] .badge { background: #2b3a50 !important; color: #d4deec !important; }
html[data-theme="dark"] .badge.wait { background: #4a3d12 !important; color: #f6dd8c !important; }
html[data-theme="dark"] .badge.open { background: #17335c !important; color: #a9ccff !important; }
html[data-theme="dark"] .badge.done { background: #163e2c !important; color: #98e3b8 !important; }
html[data-theme="dark"] .msg.customer { background: #17335c !important; }
html[data-theme="dark"] .msg.staff { background: var(--d-surface2) !important; }
html[data-theme="dark"] .notice { background: #3a3012 !important; border-color: #6b5a1d !important; color: #f3d98b; }

/* messages (chat room) */
html[data-theme="dark"] #chat-sidebar { background-color: #121b29 !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] #chat-main { background-color: #0d1520 !important; }
html[data-theme="dark"] .chat-list-item { border-color: var(--d-border) !important; }
html[data-theme="dark"] .chat-list-item.active { background-color: #1b3358 !important; }
html[data-theme="dark"] .chat-list-item:hover { background-color: var(--d-surface2) !important; }
html[data-theme="dark"] .chat-list-item-info p { color: var(--d-muted) !important; }
html[data-theme="dark"] .message.sent { background-color: #1f5a46 !important; color: #fff; }
html[data-theme="dark"] .message.received { background-color: var(--d-surface2) !important; color: var(--d-text); }
html[data-theme="dark"] .message-input-container { background-color: #121b29 !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .chat-list-item img, html[data-theme="dark"] #chat-recipient-avatar { background-color: var(--d-surface2) !important; border-color: var(--d-border) !important; }

/* phone bar and More sheet */
html[data-theme="dark"] #phone-bar { background: rgba(18,27,41,.97); border-top-color: var(--d-border); }
html[data-theme="dark"] .pb-tab { color: #9aa8bd; }
html[data-theme="dark"] .pb-tab[aria-current="page"], html[data-theme="dark"] .pb-tab[aria-expanded="true"] { color: #6ea8ff; }
html[data-theme="dark"] .ps-panel { background: var(--d-surface); }
html[data-theme="dark"] .ps-grip { background: #3a475c; }
html[data-theme="dark"] .ps-title { color: var(--d-text); }
html[data-theme="dark"] .ps-who { color: var(--d-muted); }
html[data-theme="dark"] .ps-item { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .ps-item[aria-current="page"] { color: #8fc0ff; border-color: #3c6db5; }
html[data-theme="dark"] .ps-danger { background: #3b1a21; border-color: #7a2a36; color: #ff9aa6; }
html[data-theme="dark"] body.has-phone-bar .category-bar { background: #121b29 !important; }

/* Status badges always have readable text (the grey and orange ones had none set). */
.order-card .status, .status-card .status { color: #fff; }
.order-card .status.status-processing { color: #000; }
.order-card .status.status-pending_payment { background-color: #b45309; }
html[data-theme="dark"] .cart-remove { color: #ff9aa6 !important; background: #3b1a21 !important; }
html[data-theme="dark"] .cart-decrease, html[data-theme="dark"] .cart-increase { background: var(--d-surface2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; }