/* ============================================================
   Oletro theme system
   - Light theme is the default (existing styles).
   - [data-theme="dark"] flips every public, user-panel and admin
     surface to the dark palette below.
   - The floating .theme-toggle button is styled at the bottom.
   ============================================================ */

/* ============ GLOBAL HORIZONTAL OVERFLOW GUARD ============
   No page may ever scroll sideways. overflow-x: clip (not hidden) so the
   document is never promoted to a scroll container — elements with their
   own overflow-x: auto (data tables, carousels) keep scrolling normally
   inside their box, while any stray wide child just clips at the viewport. */
html,
body {
  overflow-x: clip;
}

/* ============ GLOBAL TEXT OVERFLOW + ELLIPSIS ============
   Text never spills out of its container:
   · long unbroken words break instead of overflowing (URLs, hashes, …)
   · embedded media can never be wider than its parent
   · tables cap at their container width */
img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
li,
label,
td,
th,
blockquote,
pre,
code,
button {
  overflow-wrap: break-word;
}

table {
  max-width: 100%;
}

/* ============ ACCESSIBILITY: skip link + screen-reader-only text ============
   .skip-link is visually hidden until it receives keyboard focus, so screen
   readers and keyboard users can jump straight past the nav to the content.
   .sr-only keeps text available to assistive tech but invisible on screen. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100000;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: #0b3c5d;
  color: #fff;
  border-radius: 10px;
  font: 700 0.95rem "Poppins", "Segoe UI", sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  outline: 3px solid #ffb45e;
  overflow: visible;
  text-decoration: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Global keyboard focus ring — shown only when navigating with the keyboard
   (mouse clicks don't trigger it), so every focusable control stays visible
   for blind/ keyboard users without a visible outline on mouse click.
   The ring is deep navy-brown rather than orange: #ff9f2e measured only 2.05:1
   against white and failed the 3:1 non-text minimum (WCAG 1.4.11 / 2.4.11).
   Light surfaces get #a8410a (6.1:1 on white); the dark surfaces below flip to
   gold #ffd166 (8.4:1 on navy) so the ring stays visible on both. */
:focus-visible {
  outline: 3px solid #a8410a;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Dark contexts: navy header/nav, hero gradients and dark theme. */
[data-theme="dark"] :focus-visible,
.nav-bar :focus-visible,
.mk-announce :focus-visible,
.seller-hero :focus-visible,
.ab-hero :focus-visible,
.messages-header :focus-visible {
  outline-color: #ffd166;
}

/* ---------- Theme toggle button (fixed, bottom-right) ---------- */
.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(11, 60, 93, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #06426e;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: "Poppins", "Segoe UI", Tahoma, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  /* Grab-hand affordance so users know the toggle is draggable. */
  cursor: grab;
  cursor: -webkit-grab;
  box-shadow: 0 10px 28px rgba(2, 42, 70, 0.24);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  user-select: none;
  touch-action: none;
}

.theme-toggle:hover {
  /* Stay a grab hand on hover — never a plain arrow or pointer. */
  cursor: grab;
  cursor: -webkit-grab;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(2, 42, 70, 0.3);
}

.theme-toggle:active,
.theme-toggle.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1.01);
  opacity: 0.95;
}

/* Children (icons + label) must never replace the grab cursor. */
.theme-toggle * {
  cursor: inherit;
}

/* While a drag is in flight the pointer can outrun the button, so the whole
   page shows the grabbing hand until the drag ends. */
body.theme-dragging,
body.theme-dragging * {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
  user-select: none !important;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

.theme-toggle .theme-icon-moon {
  display: block;
}

.theme-toggle.dark {
  background: #182338;
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.3);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.theme-toggle.dark .theme-icon-sun {
  display: block;
}

.theme-toggle.dark .theme-icon-moon {
  display: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-ring, #a8410a);
  outline-offset: 2px;
}

/* ---------- Theme toggle: mobile ---------- */
/* Lift the toggle above the fixed bottom navs (user panel 62px, admin
   60–70px) so it is never covered and stays tappable. */
@media (max-width: 1024px) {
  .theme-toggle {
    right: 14px;
    bottom: 78px;
  }
}

/* Phones: shrink to a compact round icon button (label hidden). */
@media (max-width: 480px) {
  .theme-toggle {
    padding: 11px;
  }

  .theme-toggle .theme-label {
    display: none;
  }
}

/* ============================================================
   SMOOTH THEME TRANSITION
   Applies a 300ms ease transition to all color-related properties
   so light ↔ dark mode toggles feel premium instead of jarring.
   Only the transition itself lives here; the actual property changes
   are defined by the [data-theme] selectors below.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background: #0a101d;
  color: #dbe6f3;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #eef4fb;
}

/* ---------- Generic surfaces (public + panels + admin) ---------- */
[data-theme="dark"] .mk-card,
[data-theme="dark"] .mk-cat,
[data-theme="dark"] .mk-search-box,
[data-theme="dark"] .mk-search-results,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .card,
[data-theme="dark"] .card-wrap,
[data-theme="dark"] .product-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .report-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .wl-card,
[data-theme="dark"] .form-container,
[data-theme="dark"] .table-container,
[data-theme="dark"] .layer1,
[data-theme="dark"] .layer2,
[data-theme="dark"] .layer3,
[data-theme="dark"] .layer4,
[data-theme="dark"] .layer-market,
[data-theme="dark"] .layer-group-deals,
[data-theme="dark"] .productReport,
[data-theme="dark"] .productComments .comments,
[data-theme="dark"] .productComments .userContainer,
[data-theme="dark"] .comment,
[data-theme="dark"] .delivery-modal,
[data-theme="dark"] .report-modal-box,
[data-theme="dark"] .msg-modal-box,
[data-theme="dark"] .ab-card,
[data-theme="dark"] .ab-stat,
[data-theme="dark"] .ab-step,
[data-theme="dark"] .ab-cta,
[data-theme="dark"] .user-container,
[data-theme="dark"] .users,
[data-theme="dark"] .list-container,
[data-theme="dark"] .report-cards,
[data-theme="dark"] .r-cards,
[data-theme="dark"] .c-content,
[data-theme="dark"] .s-content,
[data-theme="dark"] .content {
  background: #121a2b;
  border-color: #24314b;
  color: #dbe6f3;
}

[data-theme="dark"] .mk-save-search {
  background: #121a2b;
  border-color: #24314b;
  color: #ff9e4d;
}
[data-theme="dark"] .mk-save-search.saved {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  color: #fff;
}

/* ---------- Page-level wrappers ---------- */
[data-theme="dark"] .main-content,
[data-theme="dark"] .dashboard-container {
  background: #0a101d;
  color: #dbe6f3;
}

/* ---------- Messages page dark surfaces ---------- */
[data-theme="dark"] .messages-container,
[data-theme="dark"] .messages-main,
[data-theme="dark"] .conversations-sidebar,
[data-theme="dark"] .conversations-header,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .chat-header-info,
[data-theme="dark"] .messages-display,
[data-theme="dark"] .message-input-section,
[data-theme="dark"] .message-input-wrapper,
[data-theme="dark"] .loading,
[data-theme="dark"] .no-conversations,
[data-theme="dark"] .no-conversation p {
  background: #0f1726;
  color: #e6edf7;
}

[data-theme="dark"] .messages-header {
  background: linear-gradient(135deg, #071827 0%, #0f2138 45%, #ff7f11 100%);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .conversations-sidebar,
[data-theme="dark"] .conversations-header,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .chat-header-info,
[data-theme="dark"] .message-input-section {
  border-color: #24314b;
}

[data-theme="dark"] .conversation-item {
  background: transparent;
  border-color: #1f2c3d;
  color: #e6edf7;
}

[data-theme="dark"] .conversation-item:hover,
[data-theme="dark"] .conversation-item.active,
[data-theme="dark"] .conversation-item.unread {
  background: #1a2434;
}

[data-theme="dark"] .conv-name,
[data-theme="dark"] .conv-product,
[data-theme="dark"] .conv-preview,
[data-theme="dark"] .chat-header-info h3,
[data-theme="dark"] .chat-header-info p,
[data-theme="dark"] .message-time {
  color: #e6edf7;
}

[data-theme="dark"] .conv-product,
[data-theme="dark"] .conv-preview,
[data-theme="dark"] .chat-header-info p,
[data-theme="dark"] .message-time {
  color: #8ea0b8;
}

[data-theme="dark"] .message.received .message-text {
  background: linear-gradient(135deg, #182338 0%, #1f2d44 100%);
  color: #e6edf7;
  border-color: #2c3b51;
}

[data-theme="dark"] #message-text {
  background: #121a2b;
  color: #e6edf7;
  border-color: #2c3b51;
}

[data-theme="dark"] #message-text::placeholder {
  color: #8ea0b8;
}

[data-theme="dark"] .backdrop {
  background: linear-gradient(160deg, #0a101d 0%, #0d1626 45%, #0f1a2e 100%);
}

/* ---------- Headings & text inside surfaces ---------- */
[data-theme="dark"] .mk-card-title,
[data-theme="dark"] .mk-card-price,
[data-theme="dark"] .mk-card-seller,
[data-theme="dark"] .mk-count,
[data-theme="dark"] .mk-head-sub,
[data-theme="dark"] .mk-scroll-empty,
[data-theme="dark"] .mk-search-empty,
[data-theme="dark"] .mk-card-desc {
  color: #dbe6f3;
}

[data-theme="dark"] .mk-card-desc,
[data-theme="dark"] .mk-card-seller,
[data-theme="dark"] .mk-count,
[data-theme="dark"] .mk-head-sub {
  color: #8ea0b8;
}

[data-theme="dark"] .mk-card-price {
  color: #ffb463;
}

[data-theme="dark"] .mk-section-head h2 {
  color: #eef4fb;
}

/* Category tiles in dark */
[data-theme="dark"] .mk-cat {
  color: #dbe6f3;
}

[data-theme="dark"] .mk-cat .mk-cat-icon {
  background: linear-gradient(135deg, #1b2740, #15203a);
  color: #7fb0e0;
}

[data-theme="dark"] .mk-cat.active {
  background: linear-gradient(180deg, #1a2338, #232a3d);
  border-color: #ff8a2b;
}

[data-theme="dark"] .mk-subcat,
[data-theme="dark"] .mk-region-tab {
  background: #121a2b;
  border-color: #24314b;
  color: #dbe6f3;
}

[data-theme="dark"] .mk-subcat.active,
[data-theme="dark"] .mk-region-tab.active {
  background: #ff8a2b;
  border-color: #ff8a2b;
  color: #1a0d00;
}

[data-theme="dark"] .mk-subcat.active svg {
  color: #fff;
}

/* Browse All filter bar */
[data-theme="dark"] .mk-filter-form,
[data-theme="dark"] .mk-filter-toggle {
  background: #121a2b;
  border-color: #24314b;
  color: #dbe6f3;
}

[data-theme="dark"] .mk-filter-field label {
  color: #8ea0b8;
}

[data-theme="dark"] .mk-filter-btn.ghost {
  border-color: #2a3854;
  color: #dbe6f3;
}

[data-theme="dark"] .mk-filter-btn.ghost:hover {
  border-color: #ff8a2b;
  color: #ffb463;
}

/* Slideshow + hero stay dark; dots/arrows fine. */
[data-theme="dark"] .mk-announce {
  background: linear-gradient(120deg, #031425, #082741 55%, #0d3552);
}

/* ---------- Home landing ---------- */
[data-theme="dark"] .feature-section,
[data-theme="dark"] #Reviews,
[data-theme="dark"] #cta_section,
[data-theme="dark"] .review-container {
  background: #0a101d;
}

[data-theme="dark"] .feature-card {
  background: #121a2b;
}

[data-theme="dark"] .feature-card .feature-title,
[data-theme="dark"] .review-name,
[data-theme="dark"] .cta-head-text {
  color: #eef4fb;
}

[data-theme="dark"] .feature-card .feature-text,
[data-theme="dark"] .review-text,
[data-theme="dark"] .review-role,
[data-theme="dark"] .cta-sub-text,
[data-theme="dark"] .cta-features .feature-card p {
  color: #8ea0b8;
}

[data-theme="dark"] .cta-features .feature-card {
  background: #121a2b;
}

[data-theme="dark"] .cta-banner {
  background: linear-gradient(135deg, #0b1f31, #0d2942);
}

/* ---------- Services + Contact ---------- */
[data-theme="dark"] .services,
[data-theme="dark"] .contact-section {
  background: #0a101d;
}

[data-theme="dark"] .search_bar,
[data-theme="dark"] .filters,
[data-theme="dark"] .filter-forms,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] .contact-form {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-form input,
[data-theme="dark"] .filter-form select,
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: #0d1526;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] .filter-form label,
[data-theme="dark"] .form-field label,
[data-theme="dark"] .contact-info {
  color: #dbe6f3;
}

[data-theme="dark"] .wishlist-btn {
  background: #121a2b;
}

/* ---------- Detail pages (product + service) ---------- */
[data-theme="dark"] .productSummary .productName span,
[data-theme="dark"] .productSummary .productDescription,
[data-theme="dark"] .posted,
[data-theme="dark"] .owner-id .uname,
[data-theme="dark"] .layer3 .detail-sec h1,
[data-theme="dark"] .layer4 .ownersAds h1,
[data-theme="dark"] .productComments .comments h1,
[data-theme="dark"] .commentData .userDet .userName span,
[data-theme="dark"] .commentData span.reviewComment,
[data-theme="dark"] .no-similar,
[data-theme="dark"] .no-ads,
[data-theme="dark"] .no-comments {
  color: #eef4fb;
}

[data-theme="dark"] .productInfo .info {
  background: #182338;
  color: #dbe6f3;
}

[data-theme="dark"] .commentInput .inputField textarea,
[data-theme="dark"] .commentInput .inputField div select,
[data-theme="dark"] .reportContent form textarea,
[data-theme="dark"] .delivery-form input {
  background: #0d1526;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] .commentInput .inputField textarea::placeholder,
[data-theme="dark"] .reportContent form textarea::placeholder {
  color: #6d7f99;
}

[data-theme="dark"] .comment,
[data-theme="dark"] .productComments .comments,
[data-theme="dark"] .productComments .userContainer {
  background: #121a2b;
  border-color: #24314b;
}

/* Reviews upgrade (F9) — dark overrides */
[data-theme="dark"] .review-histogram {
  background: rgba(10, 15, 28, 0.6);
  border-color: #24314b;
}

[data-theme="dark"] .hist-label,
[data-theme="dark"] .hist-count {
  color: #dbe6f3;
}

[data-theme="dark"] .hist-bar {
  background: rgba(219, 230, 243, 0.14);
}

[data-theme="dark"] .photo-pick-btn {
  color: #dbe6f3;
  border-color: #2a3854;
}

[data-theme="dark"] .photo-preview,
[data-theme="dark"] .review-photo {
  border-color: #24314b;
}

[data-theme="dark"] .caution {
  background: rgba(255, 122, 0, 0.06);
  border-color: rgba(255, 122, 0, 0.25);
}

[data-theme="dark"] .caution li span {
  color: #c3cfdd;
}

[data-theme="dark"] .caution-title {
  color: #ffb463;
}

[data-theme="dark"] .delivery-modal {
  background: #121a2b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .delivery-modal-head h3,
[data-theme="dark"] .report-modal-title {
  color: #eef4fb;
}

[data-theme="dark"] .delivery-modal-sub,
[data-theme="dark"] .delivery-modal-foot,
[data-theme="dark"] .report-modal-sub {
  color: #8ea0b8;
}

[data-theme="dark"] .delivery-modal-close {
  background: #182338;
  color: #dbe6f3;
}

[data-theme="dark"] .delivery-copy {
  background: #182338;
  border-color: #2a3854;
  color: #dbe6f3;
}

[data-theme="dark"] .delivery-status.off {
  background: rgba(142, 160, 184, 0.1);
  border-color: rgba(142, 160, 184, 0.3);
  color: #aebccd;
}

[data-theme="dark"] .delivery-yango-note {
  background: rgba(255, 138, 43, 0.08);
  border-color: rgba(255, 138, 43, 0.35);
  color: #ffd9ac;
}

/* ---------- About page ---------- */
[data-theme="dark"] .ab-hero {
  background: linear-gradient(120deg, #031425, #082741 55%, #0d3552);
}

[data-theme="dark"] .ab-head p,
[data-theme="dark"] .ab-card p,
[data-theme="dark"] .ab-step p,
[data-theme="dark"] .ab-stat span,
[data-theme="dark"] .ab-mission-text p,
[data-theme="dark"] .ab-cta p {
  color: #8ea0b8;
}

[data-theme="dark"] .ab-mission-text p {
  color: #c7d4e4;
}

[data-theme="dark"] .ab-head h2,
[data-theme="dark"] .ab-card h3,
[data-theme="dark"] .ab-step h3,
[data-theme="dark"] .ab-cta h2 {
  color: #eef4fb;
}

[data-theme="dark"] .ab-trust {
  background: rgba(255, 138, 43, 0.08);
  border-color: rgba(255, 138, 43, 0.3);
}

[data-theme="dark"] .ab-trust h3 {
  color: #ffd9ac;
}

[data-theme="dark"] .ab-trust p {
  color: #c7b39a;
}

[data-theme="dark"] .ab-btn-ghost {
  border-color: #2a3854;
  color: #dbe6f3;
}

/* ---------- Footer ---------- */
[data-theme="dark"] footer {
  background: #060b14;
}

/* ---------- Forms (global) ---------- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0d1526;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6d7f99;
}

/* ---------- Tables ---------- */
[data-theme="dark"] table,
[data-theme="dark"] .tbl,
[data-theme="dark"] .product-tb,
[data-theme="dark"] .user-tb,
[data-theme="dark"] .l-tb,
[data-theme="dark"] .u-table,
[data-theme="dark"] .p-tb,
[data-theme="dark"] .table-h,
[data-theme="dark"] .table-container table {
  background: #121a2b;
}

[data-theme="dark"] th {
  color: #8ea0b8;
}

[data-theme="dark"] td {
  color: #c7d4e4;
  border-color: #24314b;
}

/* ---------- User panel ---------- */
[data-theme="dark"] .sidebar {
  background: #060b14;
}

[data-theme="dark"] .sidebar .nav-item,
[data-theme="dark"] .sidebar-nav a,
[data-theme="dark"] .nav-link {
  color: #c7d4e4;
}

[data-theme="dark"] .sidebar .nav-item:hover,
[data-theme="dark"] .sidebar-nav a:hover,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: #ffb463;
}

[data-theme="dark"] .header {
  background: #0d1626;
  color: #dbe6f3;
}

[data-theme="dark"] .header-title,
[data-theme="dark"] .product-name,
[data-theme="dark"] .price {
  color: #eef4fb;
}

[data-theme="dark"] .form-group label,
[data-theme="dark"] .form-group legend,
[data-theme="dark"] .card-title,
[data-theme="dark"] .check-row {
  color: #dbe6f3;
}

[data-theme="dark"] .product-image,
[data-theme="dark"] .card-thumbs,
[data-theme="dark"] .card-thumb {
  background: #182338;
}

[data-theme="dark"] .notif-card {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .notif-card-title {
  color: #eef4fb;
}

[data-theme="dark"] .notif-card-text,
[data-theme="dark"] .notif-card-time {
  color: #8ea0b8;
}

[data-theme="dark"] .wl-card {
  background: #121a2b;
  border-color: #24314b;
}

/* ---------- Admin panel ---------- */
[data-theme="dark"] .top-sect {
  background: #0d1626;
  color: #dbe6f3;
}

[data-theme="dark"] .top-sect a,
[data-theme="dark"] .nav-sect {
  color: #c7d4e4;
}

[data-theme="dark"] .foot-nav,
[data-theme="dark"] .nav-foot {
  background: #060b14;
}

[data-theme="dark"] .card {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .h-content,
[data-theme="dark"] .header-r,
[data-theme="dark"] .header-t,
[data-theme="dark"] .report-h,
[data-theme="dark"] .report-t,
[data-theme="dark"] .report-t-h,
[data-theme="dark"] .st-header,
[data-theme="dark"] .st-tit,
[data-theme="dark"] .st-title,
[data-theme="dark"] .c-st,
[data-theme="dark"] .cs-st,
[data-theme="dark"] .m-st,
[data-theme="dark"] .r-st {
  color: #eef4fb;
}

[data-theme="dark"] .product-h span,
[data-theme="dark"] .desc,
[data-theme="dark"] .ban_desc,
[data-theme="dark"] .u-name,
[data-theme="dark"] .user-title,
[data-theme="dark"] .report-u {
  color: #dbe6f3;
}

[data-theme="dark"] .ct-add,
[data-theme="dark"] .ct-custom,
[data-theme="dark"] .custom-ct-w,
[data-theme="dark"] .cs-content,
[data-theme="dark"] .ct-wrap,
[data-theme="dark"] .c-wrap,
[data-theme="dark"] .m-wrap,
[data-theme="dark"] .s-wrap,
[data-theme="dark"] .bl-wrap,
[data-theme="dark"] .an-item,
[data-theme="dark"] .an-list {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .add-inputs input,
[data-theme="dark"] .form-input input,
[data-theme="dark"] .input-cont input,
[data-theme="dark"] .an-add input,
[data-theme="dark"] .ct-add input,
[data-theme="dark"] .ct-add textarea,
[data-theme="dark"] .custom-ct-w input {
  background: #0d1526;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] .add-inputs input::placeholder,
[data-theme="dark"] .ct-add input::placeholder {
  color: #6d7f99;
}

/* ---------- Messaging pages (message / messages) ---------- */
[data-theme="dark"] .messages-container,
[data-theme="dark"] .messaging-panel,
[data-theme="dark"] .info-panels-wrapper,
[data-theme="dark"] .conversations-sidebar,
[data-theme="dark"] .conversations-list,
[data-theme="dark"] .conversations-header,
[data-theme="dark"] .conversation-item,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .messages-display,
[data-theme="dark"] .messages-header,
[data-theme="dark"] .messages-main,
[data-theme="dark"] .messages-dashboard,
[data-theme="dark"] .messages-dashboard-content,
[data-theme="dark"] .message-modal-content,
[data-theme="dark"] .product-info-panel,
[data-theme="dark"] .seller-info-panel,
[data-theme="dark"] .product-details,
[data-theme="dark"] .message-content {
  background: #121a2b;
  border-color: #24314b;
  color: #dbe6f3;
}

[data-theme="dark"] .message-bubble {
  background: #182338;
  color: #e6eef8;
  border-color: #24314b;
}

[data-theme="dark"] .message.user .message-bubble,
[data-theme="dark"] .message.user .message-content {
  background: linear-gradient(135deg, #23405f, #1d2b45);
}

[data-theme="dark"] .conversation-item:hover {
  background: #182338;
}

[data-theme="dark"] .conversation-item.active {
  background: #1d2b45;
  border-color: rgba(255, 138, 43, 0.4);
}

[data-theme="dark"] .conv-name,
[data-theme="dark"] .seller-name,
[data-theme="dark"] .chat-header-info {
  color: #eef4fb;
}

[data-theme="dark"] .conv-preview,
[data-theme="dark"] .conv-time,
[data-theme="dark"] .conv-price,
[data-theme="dark"] .conv-product,
[data-theme="dark"] .message-time,
[data-theme="dark"] .meta-item,
[data-theme="dark"] .seller-meta,
[data-theme="dark"] .msg-meta-row,
[data-theme="dark"] .seller-info-text {
  color: #8ea0b8;
}

[data-theme="dark"] .message-input,
[data-theme="dark"] .message-input-area,
[data-theme="dark"] .message-input-wrapper,
[data-theme="dark"] .message-input-section {
  background: #0d1526;
  border-color: #2a3854;
  color: #e6eef8;
}

[data-theme="dark"] .msg-empty,
[data-theme="dark"] .no-conversations {
  color: #8ea0b8;
}

[data-theme="dark"] .msg-receipt {
  color: #8ea0b8;
  opacity: 1;
}

[data-theme="dark"] .msg-receipt.msg-seen {
  color: #4ade80;
}

[data-theme="dark"] .msg-empty {
  background: #121a2b;
  border-color: #24314b;
  color: #8ea0b8;
}

/* ---------- Seller profile page ---------- */
[data-theme="dark"] .seller-main,
[data-theme="dark"] .seller-grid {
  background: #0a101d;
}

[data-theme="dark"] .seller-card,
[data-theme="dark"] .metric-card {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .seller-card-name,
[data-theme="dark"] .seller-card-price,
[data-theme="dark"] .seller-section-title,
[data-theme="dark"] .metric-value {
  color: #eef4fb;
}

[data-theme="dark"] .seller-card-meta,
[data-theme="dark"] .seller-joined,
[data-theme="dark"] .metric-label,
[data-theme="dark"] .metric-sub,
[data-theme="dark"] .trust-label {
  color: #8ea0b8;
}

[data-theme="dark"] .trust-bar {
  background: #182338;
}

[data-theme="dark"] .seller-hero {
  background: linear-gradient(120deg, #031425, #082741 55%, #0d3552);
}

/* ---------- Misc ---------- */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-icon,
[data-theme="dark"] .chart-empty,
[data-theme="dark"] .loading,
[data-theme="dark"] .spinner {
  color: #8ea0b8;
}

[data-theme="dark"] .alert {
  background: #182338;
  border-color: #2a3854;
  color: #dbe6f3;
}

[data-theme="dark"] ::selection {
  background: rgba(255, 138, 43, 0.45);
  color: #fff;
}

/* ===== Delivery regions + ETA (seller forms + detail modal) ===== */
[data-theme="dark"] .dregion-chip {
  background: #182338;
  border-color: #2a3a57;
  color: #dbe6f2;
}

[data-theme="dark"] .dregion-chip:has(input:checked) {
  background: rgba(255, 127, 17, 0.15);
  border-color: #ff7f11;
  color: #ffb066;
}

[data-theme="dark"] .dregion-tool {
  color: #ff9a3d;
  border-color: rgba(255, 127, 17, 0.45);
}

[data-theme="dark"] .dregion-tool:hover {
  background: rgba(255, 127, 17, 0.15);
}

[data-theme="dark"] .delivery-details {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .delivery-eta-line,
[data-theme="dark"] .delivery-regions-line {
  color: #c3d2e4;
}

[data-theme="dark"] .delivery-eta-line b,
[data-theme="dark"] .delivery-regions-line b {
  color: #eef4fb;
}

[data-theme="dark"] .dchip {
  background: #182338;
  border-color: #2a3a57;
  color: #cfe0f2;
}

[data-theme="dark"] .dchip.all {
  background: rgba(31, 191, 117, 0.14);
  border-color: rgba(31, 191, 117, 0.4);
  color: #4ade80;
}

/* ===== Bright orange glow polish (dark mode) ===== */
[data-theme="dark"] .mk-card {
  background: #101a2c;
  border-color: #283856;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 138, 43, 0.05);
}

/* Featured (boosted) cards keep their amber border in dark mode too. */
[data-theme="dark"] .mk-card.mk-featured {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.18);
}

/* Chips band sits on its own row at the top of the card — keep it dark. */
[data-theme="dark"] .mk-card-chips {
  background: linear-gradient(180deg, #16233a, #0f1a2d);
  border-bottom-color: #24324f;
}

[data-theme="dark"] .mk-card:hover {
  border-color: #ff8a2b;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px rgba(255, 138, 43, 0.55),
    0 0 34px rgba(255, 138, 43, 0.35);
}

[data-theme="dark"] .mk-card-title {
  color: #f0f6fc;
}

[data-theme="dark"] .mk-card-del {
  background: rgba(31, 191, 117, 0.1);
  border-color: rgba(31, 191, 117, 0.35);
  color: #4ade80;
}

[data-theme="dark"] .mk-card-del em {
  color: #6ee7a0;
  background: rgba(31, 191, 117, 0.16);
}

[data-theme="dark"] .mk-search-suggest {
  background: #101a2c;
  border-color: #2a3a58;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 138, 43, 0.12);
}

[data-theme="dark"] .mk-suggest-item:hover,
[data-theme="dark"] .mk-suggest-item.active {
  background: rgba(255, 138, 43, 0.14);
}

[data-theme="dark"] .mk-suggest-main b {
  color: #f0f6fc;
}

[data-theme="dark"] .mk-suggest-item em {
  color: #ff9a3d;
}

[data-theme="dark"] .mk-section-head h2::before {
  box-shadow: 0 0 12px rgba(255, 138, 43, 0.9);
}

[data-theme="dark"] .nav-bar .nav-links.nav-market a,
[data-theme="dark"] .nav-bar .nav-links.current a {
  color: #ffb463;
  text-shadow: 0 0 14px rgba(255, 138, 43, 0.65);
}

[data-theme="dark"] .mk-cat {
  background: #101a2c;
  border-color: #283856;
}

[data-theme="dark"] .mk-cat:hover {
  border-color: #ff8a2b;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 138, 43, 0.22);
}

[data-theme="dark"] .mk-cat.active {
  background: rgba(255, 138, 43, 0.1);
  border-color: #ff8a2b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 138, 43, 0.3);
}

[data-theme="dark"] .mk-subcat.active {
  box-shadow: 0 0 16px rgba(255, 138, 43, 0.45);
}

[data-theme="dark"] .mk-filter-form {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 138, 43, 0.06);
}

[data-theme="dark"] .attr-chip {
  background: #121c30;
  border-color: #2a3a58;
  color: #dbe6f2;
  box-shadow: 0 0 0 1px rgba(255, 138, 43, 0.08);
}

[data-theme="dark"] .del-badge.eta {
  color: #6cb4ff;
  background: rgba(46, 132, 255, 0.14);
  border-color: rgba(46, 132, 255, 0.45);
}

[data-theme="dark"] .delivery-modal {
  background: #121a2b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 138, 43, 0.14);
}

[data-theme="dark"] .delivery-modal-close {
  background: #1d2a40;
  color: #cfe0f2;
}

[data-theme="dark"] .delivery-modal-head h3 {
  color: #f0f6fc;
}

[data-theme="dark"] .delivery-form input {
  background: #101a2c;
  border-color: #2a3a58;
  color: #eaf1f9;
}

[data-theme="dark"] .delivery-form label,
[data-theme="dark"] .delivery-modal-foot {
  color: #9db0c8;
}

/* Dashboard cards / panels glow softly in dark mode */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .metric-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 138, 43, 0.07);
}

/* Services-page live search dropdown (dark) */
[data-theme="dark"] .sv-search-suggest {
  background: #101a2c;
  border-color: #2a3a58;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 138, 43, 0.12);
}

[data-theme="dark"] .sv-suggest-item:hover,
[data-theme="dark"] .sv-suggest-item.active {
  background: rgba(255, 138, 43, 0.14);
}

[data-theme="dark"] .sv-suggest-main b {
  color: #f0f6fc;
}

[data-theme="dark"] .sv-suggest-item em {
  color: #ff9a3d;
}

/* ===== Dark-mode sweep: every remaining light surface ===== */
/* Any section without a dedicated dark rule falls back to transparent so
   the dark body shows through (fixes the gray patches in dark mode). */
[data-theme="dark"] section {
  background: transparent;
}

[data-theme="dark"] .mk-search-box,
[data-theme="dark"] .mk-filter-form,
[data-theme="dark"] .mk-filter-toggle {
  background: #121c30;
  border-color: #2a3a58;
}

[data-theme="dark"] .mk-filter-field select,
[data-theme="dark"] .mk-filter-field input[type="number"] {
  background: #0e1728;
  border-color: #2a3a58;
  color: #eaf1f9;
}

[data-theme="dark"] .mk-subcat,
[data-theme="dark"] .mk-region-tab,
[data-theme="dark"] .mk-filter-btn.ghost {
  background: #121c30;
  border-color: #2a3a58;
  color: #dbe6f2;
}

[data-theme="dark"] .mk-cat-icon {
  background: linear-gradient(135deg, #14243c, #1a2f4d);
  color: #ffb463;
}

[data-theme="dark"] .mk-card-img,
[data-theme="dark"] .mk-suggest-item img,
[data-theme="dark"] .sv-suggest-item img {
  background: #101a2c;
}

[data-theme="dark"] .mk-wish {
  background: #1d2a40;
  color: #8ea0b8;
}

[data-theme="dark"] .mk-wish.active {
  background: #3a1f2b;
  color: #ff5f6d;
}

[data-theme="dark"] .mk-slide-chip {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .mk-emoji {
  background: linear-gradient(135deg, rgba(255, 138, 43, 0.18), rgba(255, 138, 43, 0.32));
  color: #ffb463;
  box-shadow: 0 0 14px rgba(255, 138, 43, 0.25);
}

/* ===== Glowing CTA pulse (dark mode) ===== */
@keyframes oletra-glow {
  0%,
  100% {
    box-shadow: 0 10px 24px rgba(255, 138, 43, 0.4), 0 0 0 0 rgba(255, 138, 43, 0.5);
  }
  50% {
    box-shadow: 0 10px 24px rgba(255, 138, 43, 0.45), 0 0 26px 4px rgba(255, 138, 43, 0.55);
  }
}

[data-theme="dark"] .mk-slide-cta,
[data-theme="dark"] .hero-post-list,
[data-theme="dark"] .hero-sell-list {
  animation: oletra-glow 2.4s ease-in-out infinite;
}

/* ===== Products | Services | Institutions mode switch (dark) ===== */
[data-theme="dark"] .mk-mode-switch {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mk-mode-btn {
  color: #cfe0ef;
}

[data-theme="dark"] .mk-mode-slider {
  background: linear-gradient(135deg, #ff7a00, #ff9d2e);
  box-shadow: 0 0 18px rgba(255, 122, 0, 0.55);
}

[data-theme="dark"] .mk-mode-btn.active {
  color: #fff;
}

/* ===== Institutions mode (dark) ===== */
[data-theme="dark"] .mk-inst-tab {
  background: #121c30;
  border-color: #2a3a58;
  color: #dbe6f2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mk-inst-tab:hover {
  border-color: #ff8a2b;
  box-shadow: 0 8px 20px rgba(255, 138, 43, 0.2);
}

[data-theme="dark"] .mk-inst-tab.active {
  background: linear-gradient(135deg, #ff7a00, #ff9d2e);
  border-color: #ff7a00;
  color: #1a0d00;
  box-shadow: 0 8px 22px rgba(255, 122, 0, 0.4);
}

[data-theme="dark"] .mk-inst-filters select {
  background: #121c30;
  border-color: #2a3a58;
  color: #eaf1f9;
}

[data-theme="dark"] .mk-chip.inst {
  background: rgba(47, 128, 237, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  color: #7cb4f0;
}

[data-theme="dark"] .mk-chip.job {
  background: rgba(31, 191, 117, 0.16);
  border-color: rgba(74, 222, 128, 0.45);
  color: #4ade80;
}

[data-theme="dark"] .inst-rooms {
  color: #4ade80;
  background: rgba(31, 191, 117, 0.14);
  border-color: rgba(74, 222, 128, 0.4);
}

/* ===== Detail-page cohesion restyle (dark) ===== */
[data-theme="dark"] .layer1 .productSummary {
  background: linear-gradient(180deg, rgba(16, 37, 62, 0.92), rgba(10, 26, 46, 0.85));
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .productSummary .productDescription {
  background: rgba(8, 22, 40, 0.6);
  border-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .productSummary .productOwner {
  background: linear-gradient(135deg, rgba(24, 48, 76, 0.9), rgba(14, 34, 58, 0.9));
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .productInformation {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .productInfo .info {
  background: rgba(10, 26, 46, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .comment {
  background: rgba(13, 31, 53, 0.75);
  border-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .commentData .userImage {
  border-color: var(--orange-400);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.2);
}

/* ============================================================
   Admin panel — full dark coverage (every white/gray surface)
   ============================================================ */
/* The page content area behind the sidebar: admin pages paint it
   #f4f4f4, which would show as a big gray patch — make it let the
   dark body show through instead. */
[data-theme="dark"] main {
  background: transparent;
}

/* --- Admin dashboard --- */
[data-theme="dark"] main .cards-sect,
[data-theme="dark"] .listings {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .listings .list-head {
  color: #eef4fb;
}

/* --- Admin shared cards (products / users / reports / security) ---
   These have higher specificity than the generic .card override, so
   they need explicit rules to beat the light page styles. */
[data-theme="dark"] .product-cd .card,
[data-theme="dark"] .product-cd .card:first-child,
[data-theme="dark"] .product-cd .card:last-child,
[data-theme="dark"] .user-cards .card,
[data-theme="dark"] .r-cards .card,
[data-theme="dark"] .r-cards .report-t {
  background: #121a2b;
  border-color: #24314b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 138, 43, 0.06);
}

/* Navy-on-white text inside admin cards */
[data-theme="dark"] .product-cd .card .card-h,
[data-theme="dark"] .product-cd .card .p-tb .table-h,
[data-theme="dark"] .p-detail div:first-child,
[data-theme="dark"] .card .content td::before {
  color: #eef4fb;
}

/* Mobile stacked admin tables */
[data-theme="dark"] .card .content tr {
  background: #182338;
  border-color: #2a3854;
}

/* --- Admin contact page (message modal + panels) --- */
[data-theme="dark"] .report-t {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .msg-modal-title,
[data-theme="dark"] .msg-modal-meta strong,
[data-theme="dark"] .msg-modal-body {
  color: #eef4fb;
}

[data-theme="dark"] .msg-modal-body {
  background: #0d1526;
  border-color: #2a3854;
}

[data-theme="dark"] .msg-modal-sub {
  color: #8ea0b8;
}

[data-theme="dark"] .msg-modal-close {
  color: #dbe6f3;
}

/* --- Admin settings page (rows, toggles, announcement blocks) --- */
[data-theme="dark"] .st-content .r-st,
[data-theme="dark"] .st-content .m-st,
[data-theme="dark"] .st-content .c-st,
[data-theme="dark"] .cs-st,
[data-theme="dark"] .c-st,
[data-theme="dark"] .an-st,
[data-theme="dark"] .an-content .an-add {
  background: #121a2b;
  border-color: #24314b;
}

/* --- Admin edit page --- */
[data-theme="dark"] .form form {
  background: #121a2b;
  border-color: #24314b;
}

/* ============================================================
   User panel — remaining light surfaces
   ============================================================ */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .empty-state {
  background: #121a2b;
  border-color: #24314b;
}

/* ===== Institution detail (dark) ===== */
[data-theme="dark"] .inst-title-row h1,
[data-theme="dark"] .inst-section-head h2,
[data-theme="dark"] .inst-room-top h3,
[data-theme="dark"] .inst-review-head b,
[data-theme="dark"] .inst-modal h3 {
  color: #eef4fb;
}

[data-theme="dark"] .inst-loc,
[data-theme="dark"] .inst-section-sub,
[data-theme="dark"] .inst-review-date,
[data-theme="dark"] .inst-modal-sub,
[data-theme="dark"] .inst-book-note {
  color: #8ea0b8;
}

[data-theme="dark"] .inst-about,
[data-theme="dark"] .inst-room,
[data-theme="dark"] .inst-review,
[data-theme="dark"] .inst-review-form,
[data-theme="dark"] .inst-owner-card,
[data-theme="dark"] .inst-modal,
[data-theme="dark"] .job-card-side,
[data-theme="dark"] .job-owner-card {
  background: #121a2b;
  border-color: #24314b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 138, 43, 0.06);
}

[data-theme="dark"] .inst-about,
[data-theme="dark"] .inst-room-desc,
[data-theme="dark"] .inst-review-body p,
[data-theme="dark"] .inst-review-form textarea,
[data-theme="dark"] .inst-book-field input,
[data-theme="dark"] .inst-book-field select,
[data-theme="dark"] .inst-modal textarea {
  background: #0d1526;
  color: #dbe6f3;
  border-color: #2a3854;
}

[data-theme="dark"] .inst-fact {
  background: #182338;
  border-color: #24314b;
  color: #c7d4e4;
}

[data-theme="dark"] .inst-fact b {
  color: #eef4fb;
}

[data-theme="dark"] .inst-amen-chip {
  background: rgba(255, 138, 43, 0.12);
  border-color: rgba(255, 138, 43, 0.35);
  color: #ffb463;
}

[data-theme="dark"] .inst-amen-none,
[data-theme="dark"] .inst-empty {
  color: #8ea0b8;
  background: rgba(255, 255, 255, 0.03);
  border-color: #24314b;
}

[data-theme="dark"] .inst-type-chip.t-school,
[data-theme="dark"] .inst-rooms,
[data-theme="dark"] .inst-reviews,
[data-theme="dark"] .inst-owner,
[data-theme="dark"] .inst-similar,
[data-theme="dark"] .job-body,
[data-theme="dark"] .job-similar {
  color: #dbe6f3;
}

[data-theme="dark"] .inst-room-meta span {
  background: #182338;
  color: #c7d4e4;
}

[data-theme="dark"] .inst-modal-close {
  background: #182338;
  color: #dbe6f3;
}

[data-theme="dark"] .inst-modal-backdrop {
  background: rgba(2, 8, 18, 0.72);
}

[data-theme="dark"] .inst-review-form select {
  background: #0d1526;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] .inst-book-field span {
  color: #8ea0b8;
}

/* ===== Job detail (dark) ===== */
[data-theme="dark"] .job-section h2 {
  color: #eef4fb;
}

[data-theme="dark"] .job-desc,
[data-theme="dark"] .job-reqs,
[data-theme="dark"] .job-howto {
  color: #c7d4e4;
}

[data-theme="dark"] .job-card-side-head b,
[data-theme="dark"] .job-owner-id b {
  color: #eef4fb;
}

[data-theme="dark"] .job-card-side-head {
  border-bottom-color: #24314b;
}

[data-theme="dark"] .job-contact a {
  background: rgba(255, 138, 43, 0.1);
  border-color: rgba(255, 138, 43, 0.4);
  color: #ffb463;
}

[data-theme="dark"] .job-contact span {
  color: #8ea0b8;
}

/* ============================================================
   Shared overlays used across pages
   ============================================================ */
/* Floating account bar on detail pages (white glass in light) */
[data-theme="dark"] #user-nav-js {
  background: rgba(16, 26, 44, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Notifications dropdown (shared by public + detail pages) */
[data-theme="dark"] .notif-dropdown {
  background: #121a2b;
  border-color: #24314b;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 138, 43, 0.1);
}

[data-theme="dark"] .notif-dropdown-head {
  border-bottom-color: #24314b;
}

[data-theme="dark"] .notif-theme-switch {
  background: rgba(255, 138, 43, 0.14);
  border-color: rgba(255, 138, 43, 0.3);
  color: #ffb463;
}

[data-theme="dark"] .notif-item + .notif-item {
  border-top-color: #24314b;
}

[data-theme="dark"] .notif-item a {
  color: #dbe6f3;
}

[data-theme="dark"] .notif-item a:hover {
  background: rgba(255, 138, 43, 0.1);
}

[data-theme="dark"] .notif-title {
  color: #eef4fb;
}

[data-theme="dark"] .notif-body {
  color: #8ea0b8;
}

[data-theme="dark"] .notif-dropdown {
  color: #dbe6f3;
}

[data-theme="dark"] .notif-dropdown-head {
  color: #eef4fb;
}

[data-theme="dark"] .notif-dropdown-caption {
  color: #8ea0b8;
}

[data-theme="dark"] .notif-section-head {
  color: #9db0c6;
}

[data-theme="dark"] .notif-mark-all {
  color: #ffb463;
}

[data-theme="dark"] .notif-time {
  color: #6f8299;
}

[data-theme="dark"] .notif-empty {
  color: #8ea0b8;
}

[data-theme="dark"] .notif-item.unread {
  background: linear-gradient(90deg, rgba(255, 138, 43, 0.1), rgba(255, 138, 43, 0.03));
}

[data-theme="dark"] .notif-view-all {
  border-top-color: #24314b;
}

/* ===== Detail pages V2 redesign (dark) ===== */
[data-theme="dark"] main .layer1 {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .layer1 .imageContainer {
  background: #0d1626;
}

[data-theme="dark"] .imageContainer .mainImage {
  background: #101a2c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .thumbnails .thumbnail {
  background: #101a2c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .productPrice .watchlist {
  background: #182338;
  border-color: #2a3854;
}

[data-theme="dark"] .productPrice .watchlist:hover {
  background: linear-gradient(135deg, #ff7a00, #ff9d2e);
  border-color: #ff9d2e;
}

[data-theme="dark"] .productPrice .watchlist.wishlisted {
  background: linear-gradient(135deg, #4a2230, #5b2740);
}

[data-theme="dark"] .productPrice .watchlist.wishlisted .wishlist-heart {
  fill: #ff5f7a;
}

[data-theme="dark"] button.deliveryProduct {
  background: #182338;
  border-color: rgba(255, 138, 43, 0.4);
  color: #ffb066;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] button.deliveryProduct:hover {
  background: rgba(255, 138, 43, 0.14);
}

[data-theme="dark"] button.compareProduct {
  background: linear-gradient(135deg, #241d3d, #2c2150);
  border-color: rgba(163, 130, 255, 0.45);
  color: #c9b8ff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] button.compareProduct svg {
  background: rgba(163, 130, 255, 0.18);
  color: #c9b8ff;
}

[data-theme="dark"] button.compareProduct:hover {
  border-color: rgba(163, 130, 255, 0.7);
  background: linear-gradient(135deg, #2b2250, #332766);
  box-shadow: 0 10px 22px rgba(91, 63, 200, 0.4);
}

[data-theme="dark"] button.compareProduct:focus-visible {
  box-shadow: 0 0 0 3px rgba(163, 130, 255, 0.35);
}

[data-theme="dark"] .cmp-mini-tip {
  background: #1a2033;
  border-color: rgba(163, 130, 255, 0.3);
  color: #c2cce0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .cmp-mini-tip::after {
  border-top-color: #1a2033;
}
[data-theme="dark"] .cmp-mini-head {
  color: #c9b8ff;
}
[data-theme="dark"] .cmp-mini-tip-load {
  color: #8a97af;
}
[data-theme="dark"] .cmp-mini-row.cmp-mini-win {
  background: rgba(163, 130, 255, 0.12);
}
[data-theme="dark"] .cmp-mini-mine .cmp-mini-name {
  color: #8a97af;
}
[data-theme="dark"] .cmp-mini-foot {
  color: #7e8ba3;
  border-top-color: rgba(163, 130, 255, 0.16);
}
[data-theme="dark"] .cmp-mini-cta {
  color: #c9b8ff;
}

[data-theme="dark"] .commentMeta {
  color: #8ea0b8;
}

[data-theme="dark"] .owner-rating-text {
  color: #8ea0b8;
}

[data-theme="dark"] .layer3,
[data-theme="dark"] .layer4 {
  border-color: #24314b;
}

[data-theme="dark"] .list {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .list:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 0 2px #ff7a00;
}

[data-theme="dark"] .detail-notfound {
  color: #eef4fb;
}

/* ============================================================
   Admin panel — secondary text must stay readable in dark mode
   ============================================================ */
/* Light-mode grays (#666 / #555) are near-invisible on dark cards. */
[data-theme="dark"] .card-header .subtxt,
[data-theme="dark"] .an-info .an-text {
  color: #aebdd2;
}

/* Black search placeholder on the admin users page */
[data-theme="dark"] .user-tb .header .search input::placeholder {
  color: #6d7f99;
}

/* Stat-card labels/headings that use a hardcoded dark navy in light mode */
[data-theme="dark"] .cards-sect .card .cat,
[data-theme="dark"] .cards-sect .card-header .r-sect {
  color: #eef4fb;
}

/* ============================================================
   Messaging — received bubbles / unread / avatars that stayed gray
   ============================================================ */
[data-theme="dark"] .message.received .message-text {
  background: #1d2b45;
  color: #e6eef8;
  border-color: #24314b;
}

[data-theme="dark"] .conversation-item.unread {
  background: #1b2942;
}

[data-theme="dark"] .conv-avatar {
  background: #24314b;
}

[data-theme="dark"] .conversations-list::-webkit-scrollbar-track,
[data-theme="dark"] .messages-display::-webkit-scrollbar-track {
  background: #0d1526;
}

[data-theme="dark"] .conversations-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .messages-display::-webkit-scrollbar-thumb {
  background: #2a3854;
}

/* ============================================================
   Login / Signup — glass cards + navy text must flip in dark
   ============================================================ */
[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card {
  background: rgba(10, 18, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  color: #dbe6f3;
}

[data-theme="dark"] .login-card .brand-chip,
[data-theme="dark"] .signup-card .brand-chip {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .login-card .brand-chip-text h2,
[data-theme="dark"] .login-card .brand-chip-text p,
[data-theme="dark"] .signup-card .brand-chip-text h2,
[data-theme="dark"] .signup-card .brand-chip-text p,
[data-theme="dark"] .login-card h1,
[data-theme="dark"] .login-card h2,
[data-theme="dark"] .login-card h3,
[data-theme="dark"] .signup-card h1,
[data-theme="dark"] .signup-card h2,
[data-theme="dark"] .signup-card h3,
[data-theme="dark"] .form-group label {
  color: #eef4fb;
}

[data-theme="dark"] .form-group input {
  background: rgba(255, 255, 255, 0.08);
  color: #eef4fb;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .form-group input:focus {
  background: #14203a;
  border-color: #ff8011;
}

[data-theme="dark"] .form-group input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .extra-links a,
[data-theme="dark"] .toggle-password,
[data-theme="dark"] .password-toggle-btn {
  color: #ffb463;
}

/* ============================================================
   Messaging page (message.html) — remaining light surfaces
   ============================================================ */
[data-theme="dark"] .messages-container {
  background: #121a2b;
}

[data-theme="dark"] .seller-info-panel,
[data-theme="dark"] .product-info-panel {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .seller-info-panel h3,
[data-theme="dark"] .product-info-panel h3 {
  color: #eef4fb;
}

[data-theme="dark"] .message-input:focus {
  background: #182338;
}

/* Seller bubbles: the base rule is (0,3,0) — beats the generic
   [data-theme="dark"] .message-bubble (0,2,0) — so override it here
   with the same specificity to keep received bubbles dark. */
[data-theme="dark"] .message.seller .message-bubble {
  background: #182338;
  color: #e6eef8;
  border-color: #2a3854;
}

[data-theme="dark"] .message.seller .message-bubble:hover {
  border-color: #ff8a2b;
}

[data-theme="dark"] .product-header h2,
[data-theme="dark"] .meta-item .label,
[data-theme="dark"] .msg-loading {
  color: #eef4fb;
}

[data-theme="dark"] .meta-item {
  background: #0d1526;
  border-left-color: #ff8a2b;
}

[data-theme="dark"] .meta-item:hover {
  background: #182338;
}

[data-theme="dark"] .message-input::placeholder {
  color: #6d7f99;
}

[data-theme="dark"] .product-image {
  border-color: #2a3854;
  background: #101a2c;
}

[data-theme="dark"] .messages-container::-webkit-scrollbar-track {
  background: #0d1526;
}

[data-theme="dark"] .msg-counter {
  color: #8ea0b8;
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Admin settings — inner containers + heading text in dark
   ============================================================ */
[data-theme="dark"] .an-list .an-item,
[data-theme="dark"] .s-wrap,
[data-theme="dark"] .c-info .cwrap-c {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .st-title .title,
[data-theme="dark"] .st-tit,
[data-theme="dark"] .an-sect,
[data-theme="dark"] .add-title,
[data-theme="dark"] .an-title,
[data-theme="dark"] .ct-sect,
[data-theme="dark"] .cs-sect,
[data-theme="dark"] .c-info .cwrap-c label,
[data-theme="dark"] .s-wrap .swrap label {
  color: #eef4fb;
}

/* ============================================================
   Admin users — page titles + card headers visible in dark
   ============================================================ */
[data-theme="dark"] .user-header .user-title .title,
[data-theme="dark"] .card .header,
[data-theme="dark"] .tb-title {
  color: #eef4fb;
}

[data-theme="dark"] .card .header input {
  border-color: #2a3854;
  color: #eef4fb;
}

/* ============================================================
   Detail pages — similar/owner cards in dark
   ============================================================ */
[data-theme="dark"] .list,
[data-theme="dark"] .list .product-data {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .list .image-p {
  background: #1b2942;
}

[data-theme="dark"] .list .chip-cnt {
  background: linear-gradient(180deg, #16233a, #0f1a2d);
  border-bottom-color: #24324f;
  color: #bcd6f0;
}

/* Dark theme: base chips flip to navy pills with light blue text/border so
   the white-light-theme treatment doesn't glare on dark cards. */
[data-theme="dark"] .mk-chip,
[data-theme="dark"] .chip-cnt .chip,
[data-theme="dark"] .list .chip-cnt .chip,
[data-theme="dark"] .list .chip {
  background: rgba(23, 42, 71, 0.92);
  color: #a9c9ea;
  border-color: #3b5a86;
}

[data-theme="dark"] .chip-cnt .chip:hover {
  background: #1d3050;
  border-color: #6d96cf;
  color: #cfe4f7;
}

[data-theme="dark"] .mk-chip.deal {
  background: linear-gradient(135deg, #e5484d, #d62440);
  border-color: #ff8fa3;
  color: #fff;
}

[data-theme="dark"] .mk-chip.feat {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-color: #fbbf24;
  color: #1c1917;
}

[data-theme="dark"] .list .product-h {
  color: #eef4fb;
}

[data-theme="dark"] .list .product-d,
[data-theme="dark"] .list .view-btn {
  color: #8ea0b8;
}

/* --- Inline SVG icon helpers (shared) --- */
.btn-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -3px;
  margin-right: 6px;
}
.btn-ic svg {
  display: block;
}
.card-title-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-title-ic svg {
  display: block;
}
.card-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mng-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
}
.mng-lock svg {
  display: block;
}

/* ---------- User panel: manage pages (institutions / jobs / bookings / payments) ---------- */
[data-theme="dark"] .mng-card,
[data-theme="dark"] .mng-item,
[data-theme="dark"] .mng-stat {
  background: #121a2b;
  border-color: rgba(219, 230, 243, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .mng-card:hover {
  border-color: #ff7a00;
  box-shadow: 0 18px 36px rgba(255, 122, 0, 0.18);
}

[data-theme="dark"] .mng-bar h1,
[data-theme="dark"] .mng-card-title,
[data-theme="dark"] .mng-item-title,
[data-theme="dark"] .mng-stat b,
[data-theme="dark"] .mng-account-body b,
[data-theme="dark"] .mng-room-row b {
  color: #eef4fb;
}

[data-theme="dark"] .mng-card-desc,
[data-theme="dark"] .mng-card-meta,
[data-theme="dark"] .mng-item-sub,
[data-theme="dark"] .mng-room-row,
[data-theme="dark"] .mng-stat-label,
[data-theme="dark"] .mng-account-body span {
  color: #9fb2c7;
}

[data-theme="dark"] .mng-btn.ghost {
  background: #182236;
  color: #dbe6f3;
  border-color: rgba(219, 230, 243, 0.2);
}

[data-theme="dark"] .mng-tab {
  background: #121a2b;
  color: #9fb2c7;
  border-color: rgba(219, 230, 243, 0.16);
}

[data-theme="dark"] .mng-tab.active {
  background: linear-gradient(135deg, #ff7a00, #ff9d2e);
  border-color: #ff7a00;
  color: #1a0d00;
}

[data-theme="dark"] .mng-empty {
  background: rgba(219, 230, 243, 0.04);
  border-color: rgba(219, 230, 243, 0.16);
  color: #9fb2c7;
}

[data-theme="dark"] .mng-rooms {
  border-top-color: rgba(219, 230, 243, 0.14);
}

[data-theme="dark"] .mng-account {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.14), rgba(255, 157, 46, 0.06));
  border-color: rgba(255, 122, 0, 0.35);
}

[data-theme="dark"] .type-banner {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.16), rgba(255, 157, 46, 0.08));
  color: #f3c49a;
}

[data-theme="dark"] .type-banner b {
  color: #ffb56b;
}

[data-theme="dark"] .mng-card-img {
  background: #0d1626;
}

/* ---------- Auth feedback box (login / signup / reset) ----------
   utils/css/message.css hard-codes a light aliceblue background + green
   border. In dark mode the box must go dark too, with a tinted border
   that still reads as success/error at a glance.

   Scoped to the auth toast id (#message) — the old bare `.message`
   selector matched every chat bubble row too (messages.html / message.html
   use .message.user/.seller/.sent/.received) and painted each one with a
   square green border + dark background + heavy shadow. Chat rows never
   carry the #message id, so they can never pick these styles up again. */
[data-theme="dark"] #message.message {
  background: #121a2b;
  color: #dbe6f3;
  border: 1px solid #1fbf75;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] #message.message.error,
[data-theme="dark"] #message.message.danger {
  border-color: #e5484d;
}

[data-theme="dark"] #message.message.warning {
  border-color: #ff8a2b;
}

[data-theme="dark"] #message.message.info {
  border-color: #2575fc;
}

/* ---------- Product / service detail CTAs ----------
   Contact Seller is the secondary outline option; Buy Securely is the
   primary navy button. Match both to the dark palette. */
[data-theme="dark"] .buyButton button {
  background: #101a2c;
  border-color: #3b5a86;
  color: #a9c9ea;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .buyButton button:hover {
  background: #16233a;
  border-color: #4f76ad;
  color: #d5e8fa;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] button.escrowProduct {
  background: linear-gradient(135deg, #144a72, #0e6b9c);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] button.escrowProduct:hover {
  background: linear-gradient(135deg, #1a5a86, #0f7fb8);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
}

/* Detail-page strips (Recently Viewed / Saved For Later) — dark mode for the
   section separators + mk-cards (theme.css already handles the mk-card
   internals). */
[data-theme="dark"] .detail-sec[data-sec="recently-viewed-detail"] {
  border-bottom-color: rgba(255, 138, 43, 0.5);
}

[data-theme="dark"] .detail-sec[data-sec="wishlist-detail"] {
  border-bottom-color: rgba(37, 117, 252, 0.6);
}

[data-theme="dark"] .detail-sec[data-sec="recently-viewed-detail"] h1,
[data-theme="dark"] .detail-sec[data-sec="wishlist-detail"] h1 {
  color: #cfe3f7;
}

[data-theme="dark"] .js-recent-detail .mk-card,
[data-theme="dark"] .js-wishlist-detail .mk-card {
  background: #101a2c;
  border-color: #283856;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .js-recent-detail .mk-card:hover,
[data-theme="dark"] .js-wishlist-detail .mk-card:hover {
  border-color: #ff8a2b;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(255, 138, 43, 0.55);
}

[data-theme="dark"] .js-recent-detail .mk-card.mk-featured,
[data-theme="dark"] .js-wishlist-detail .mk-card.mk-featured {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.18);
}


[data-theme="dark"] .js-recent-detail .mk-card-title,
[data-theme="dark"] .js-wishlist-detail .mk-card-title {
  color: #f0f6fc;
}

[data-theme="dark"] .js-recent-detail .mk-chip,
[data-theme="dark"] .js-wishlist-detail .mk-chip {
  background: rgba(23, 42, 71, 0.92);
  color: #a9c9ea;
  border-color: #3b5a86;
}

[data-theme="dark"] .js-recent-detail .mk-card-price,
[data-theme="dark"] .js-wishlist-detail .mk-card-price {
  color: #ff9d2e;
}

[data-theme="dark"] .js-recent-detail::-webkit-scrollbar-thumb,
[data-theme="dark"] .js-wishlist-detail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ff8a2b, #2575fc);
}

/* Detail-page section containers follow the dark theme — the .list and
   mk-card interiors already do; these fix the outer boxes staying white. */
[data-theme="dark"] .layer3 {
  background: #0f1726;
}

[data-theme="dark"] .detail-sec {
  background: #121a2b;
  border-color: #24314b;
}

[data-theme="dark"] .detail-sec h1 {
  border-bottom-color: #24314b;
}

[data-theme="dark"] .review-gate-note {
  background: rgba(23, 42, 71, 0.5);
  border-color: #3b5a86;
  color: #a9c9ea;
}

[data-theme="dark"] .review-gate-note a {
  color: #6d96cf;
}

/* ============================================================
   REDUCED MOTION (WCAG 2.3.3 Animation from Interactions)
   This is the global sheet, so it is the right place for a
   site-wide safety net: only 15 of the 83 stylesheets ship their
   own prefers-reduced-motion block, and the infinitely-looping
   glow pulse below was not covered by any of them.

   Motion that purely decorates is disabled outright; anything
   that conveys state (e.g. .delivery-status.off) keeps its colour
   cue, so no information is lost.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* NOTE: this block used to reset animation/transition on *every* element.
     That was wrong, and it broke the site for anyone whose OS reports
     reduced motion (Windows "Animation effects" off sets MinAnimate=0 and
     makes Chrome match the query on every page). A blanket reset also fails
     WCAG 2.2 in spirit: a spinner, skeleton or progress bar is not
     decoration, it is the only signal that the system is working. Killing it
     removes information.

     So this block now targets only motion that is genuinely vestibular:
     autonomous drift, parallax, pulsing glow and smooth scrolling.
     User-initiated feedback (hover colour, button press, spinner rotation)
     is intentionally left running. */

  /* Smooth scrolling is the classic vestibular trigger. */
  html {
    scroll-behavior: auto !important;
  }

  /* Keep transitions perceptible but brief: a hover still needs to read as a
     state change, it just should not glide. */
  *,
  *::before,
  *::after {
    transition-duration: 120ms !important;
  }

  /* Explicitly neutralise the decorative loops that would otherwise
     still paint a static first frame in a distracting place. */
  [data-theme="dark"] .mk-slide-cta,
  [data-theme="dark"] .hero-post-list,
  [data-theme="dark"] .hero-sell-list,
  .mk-slide-cta,
  .hero-post-list,
  .hero-sell-list {
    animation: none !important;
    box-shadow: 0 10px 24px rgba(255, 138, 43, 0.4);
  }

  /* Hover lift / glow are decorative feedback; flatten them. */
  .mk-card:hover,
  .mk-cat:hover,
  [data-theme="dark"] .mk-card:hover,
  [data-theme="dark"] .mk-cat:hover {
    transform: none !important;
  }

  .theme-toggle,
  .theme-toggle:hover,
  .theme-toggle:active,
  .theme-toggle.dragging {
    transform: none !important;
  }

/* The smooth theme cross-fade is also motion; snap instead. */
  :root,
  :root[data-theme="dark"] {
    transition: none !important;
  }
}