/* ══════════════════════════════════════
   Dark Mode — CSS
══════════════════════════════════════ */

/* Dark toggle button */
.appify-dark-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s;
  font-size: 18px;
  line-height: 1;
}
.appify-dark-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.appify-dark-toggle:active { transform: scale(.95); }

/* Show/hide icons */
.appify-dark-icon { transition: opacity .2s, transform .2s; position: absolute; }
.appify-sun  { opacity: 1;  transform: rotate(0); }
.appify-moon { opacity: 0;  transform: rotate(-90deg); }

.appify-dark .appify-dark-toggle { background: #2a2a2a; border-color: #444; }
.appify-dark .appify-sun  { opacity: 0; transform: rotate(90deg); }
.appify-dark .appify-moon { opacity: 1; transform: rotate(0); }

/* ── DARK MODE OVERRIDES ─────────────────────────────── */
html.appify-dark,
html.appify-dark body {
  background-color: var(--appify-dark-bg, #121212) !important;
  color: var(--appify-dark-text, #f0f0f0) !important;
}

.appify-dark h1, .appify-dark h2, .appify-dark h3,
.appify-dark h4, .appify-dark h5, .appify-dark h6 {
  color: var(--appify-dark-text, #f0f0f0) !important;
}

/* Cards / boxes */
.appify-dark .woocommerce ul.products li.product,
.appify-dark .woocommerce-page ul.products li.product {
  background: var(--appify-dark-surface, #1e1e1e) !important;
  border-color: #333 !important;
}

/* Nav */
.appify-dark .appify-bottom-nav {
  background: var(--appify-dark-nav, #1a1a1a) !important;
  border-top-color: #333 !important;
}
.appify-dark .appify-bottom-nav a { color: #ddd !important; }
.appify-dark .appify-bottom-nav a:active { background: #333 !important; }

/* Sheet */
.appify-dark .appify-sheet { background: var(--appify-dark-surface, #1e1e1e) !important; }
.appify-dark .appify-sheet .sheet-handle { background: #444 !important; }

/* Checkout */
.appify-dark .woocommerce-checkout-review-order-table,
.appify-dark .woocommerce-checkout-payment,
.appify-dark .woocommerce-checkout-review-order {
  background: var(--appify-dark-surface, #1e1e1e) !important;
}
.appify-dark .woocommerce-checkout .input-text,
.appify-dark .woocommerce-checkout input[type=text],
.appify-dark .woocommerce-checkout input[type=email],
.appify-dark .woocommerce-checkout input[type=tel] {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #f0f0f0 !important;
}

/* Links */
.appify-dark a { color: var(--appify-dark-accent, #f60404); }

/* Woo single product */
.appify-dark .woocommerce div.product div.images img {
  border-color: #333 !important;
}
.appify-dark .woocommerce div.product p.price,
.appify-dark .woocommerce div.product span.price {
  color: var(--appify-dark-accent, #f60404) !important;
}

/* Progress bar */
.appify-dark .appify-checkout-progress .step { background: #2a2a2a !important; color: #ccc !important; border-color: #444 !important; }

/* Smooth transition on mode switch */
html { transition: background-color .3s ease, color .3s ease; }
*, *::before, *::after { transition: background-color .3s ease, border-color .3s ease; }
/* Don't animate everything - reset for transforms */
.appify-bottom-nav a, .appify-qv-modal, .appify-sheet { transition: revert; }