/*
 * Light Theme – مؤسسة عبدالله مزاح الجميلي للمقاولات
 *
 * The base design is dark-first and many rules carry literal dark rgba()
 * values, so this sheet does two things:
 *   1. Redefines the design tokens for the light palette.
 *   2. Overrides the specific rules that hard-code a dark surface.
 *
 * Accent/background/text colors themselves come from the admin palette,
 * injected as --aj-* custom properties before this file's rules apply.
 */

/* html[...] beats the bare :root in style.css regardless of load order. */
html[data-aj-theme="light"] {
  --aj-bg-card: rgba(255, 255, 255, 0.92);
  --aj-bg-card-hover: #ffffff;
  --aj-primary: #eef3f9;
  --aj-primary-light: #dee7f2;
  --aj-cyan-dark: #026b88;
  --aj-gold-light: #8a6510;
  --aj-text-dim: #7a8899;
  --aj-border: rgba(13, 27, 42, 0.12);
  --aj-border-focus: rgba(2, 132, 168, 0.45);
  --aj-glass-shadow: 0 6px 24px rgba(13, 27, 42, 0.08);
  --aj-surface-soft: #ffffff;
  --aj-surface-tint: rgba(13, 27, 42, 0.035);

  color-scheme: light;
}

/* ---------- Page ground ---------- */
[data-aj-theme="light"] body {
  color: var(--aj-text-main);
  background-color: var(--aj-bg-dark);
  background-image:
    radial-gradient(circle at 15% 15%, rgba(var(--aj-cyan-rgb), 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 65%, rgba(var(--aj-gold-rgb), 0.05) 0%, transparent 45%),
    linear-gradient(rgba(13, 27, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 42, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}

/* ---------- Header & top bar ---------- */
[data-aj-theme="light"] .aj-topbar {
  background: #0d1b2a;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: none;
}

[data-aj-theme="light"] .aj-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--aj-border);
  box-shadow: 0 1px 12px rgba(13, 27, 42, 0.05);
}

[data-aj-theme="light"] .aj-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 20px rgba(13, 27, 42, 0.1);
}

[data-aj-theme="light"] .aj-nav-link {
  color: #33475e;
}

[data-aj-theme="light"] .aj-nav-link:hover,
[data-aj-theme="light"] .aj-nav-link.active {
  color: var(--aj-cyan);
}

[data-aj-theme="light"] .aj-logo-symbol {
  background: linear-gradient(135deg, rgba(var(--aj-cyan-rgb), 0.14), rgba(var(--aj-gold-rgb), 0.14));
  box-shadow: 0 2px 10px rgba(var(--aj-cyan-rgb), 0.18);
}

[data-aj-theme="light"] .aj-cart-trigger {
  background: var(--aj-surface-tint);
  border-color: var(--aj-border);
  color: var(--aj-text-main);
}

/* ---------- Surfaces, cards, sections ---------- */
[data-aj-theme="light"] .aj-card,
[data-aj-theme="light"] .aj-configurator-card,
[data-aj-theme="light"] .aj-portfolio-card,
[data-aj-theme="light"] .aj-product-card,
[data-aj-theme="light"] .aj-trust-banner {
  background: var(--aj-surface-soft);
  border-color: var(--aj-border);
  box-shadow: var(--aj-glass-shadow);
}

[data-aj-theme="light"] .aj-configurator-card,
[data-aj-theme="light"] .aj-config-summary {
  background: var(--aj-surface-soft);
}

[data-aj-theme="light"] .aj-section[style*="background"] {
  background: rgba(13, 27, 42, 0.025) !important;
}

[data-aj-theme="light"] .aj-hero-visual,
[data-aj-theme="light"] .aj-blueprint-card,
[data-aj-theme="light"] .aj-portfolio-media {
  background: linear-gradient(135deg, #eef3f9, #ffffff);
}

/* ---------- Configurator controls ---------- */
[data-aj-theme="light"] .aj-property-btn,
[data-aj-theme="light"] .aj-package-card,
[data-aj-theme="light"] .aj-addon-item,
[data-aj-theme="light"] .aj-area-control,
[data-aj-theme="light"] .aj-summary-total-box,
[data-aj-theme="light"] .aj-config-notes {
  background: var(--aj-surface-tint);
  border-color: var(--aj-border);
  color: var(--aj-text-main);
}

[data-aj-theme="light"] .aj-property-btn.active,
[data-aj-theme="light"] .aj-package-card.active,
[data-aj-theme="light"] .aj-addon-item.active {
  background: rgba(var(--aj-cyan-rgb), 0.09);
  border-color: var(--aj-cyan);
}

[data-aj-theme="light"] .aj-config-notes,
[data-aj-theme="light"] .aj-config-notes::placeholder {
  color: var(--aj-text-main);
}

[data-aj-theme="light"] .aj-config-notes::placeholder {
  color: var(--aj-text-dim);
}

[data-aj-theme="light"] .aj-range-slider {
  background: rgba(13, 27, 42, 0.12);
}

/* ---------- Typography helpers ---------- */
[data-aj-theme="light"] .aj-hero-desc,
[data-aj-theme="light"] .aj-section-subtitle,
[data-aj-theme="light"] .aj-step-desc,
[data-aj-theme="light"] .aj-product-excerpt,
[data-aj-theme="light"] .aj-package-desc,
[data-aj-theme="light"] .aj-summary-label,
[data-aj-theme="light"] .aj-stat-label {
  color: var(--aj-text-muted);
}

/* Inline #94a3b8 / #cbd5e1 text set in templates. */
[data-aj-theme="light"] [style*="#94a3b8"],
[data-aj-theme="light"] [style*="#cbd5e1"] {
  color: var(--aj-text-muted) !important;
}

[data-aj-theme="light"] .aj-badge {
  background: rgba(var(--aj-cyan-rgb), 0.09);
  border-color: rgba(var(--aj-cyan-rgb), 0.3);
  color: var(--aj-cyan);
}

[data-aj-theme="light"] .aj-badge-gold {
  background: rgba(var(--aj-gold-rgb), 0.1);
  border-color: rgba(var(--aj-gold-rgb), 0.35);
  color: var(--aj-gold);
}

[data-aj-theme="light"] .aj-btn-outline {
  color: var(--aj-text-main);
  border-color: var(--aj-border);
  background: transparent;
}

[data-aj-theme="light"] .aj-btn-outline:hover {
  border-color: var(--aj-cyan);
  color: var(--aj-cyan);
}

/* ---------- Footer ---------- */
[data-aj-theme="light"] .aj-footer {
  background: #0d1b2a;
  color: #dbe5f0;
  border-top: none;
}

[data-aj-theme="light"] .aj-footer .aj-brand-title,
[data-aj-theme="light"] .aj-footer h4 {
  color: #ffffff;
}

[data-aj-theme="light"] .aj-footer p,
[data-aj-theme="light"] .aj-footer .aj-footer-links a,
[data-aj-theme="light"] .aj-footer-bottom {
  color: #9fb3c8 !important;
}

[data-aj-theme="light"] .aj-footer .aj-footer-links a:hover {
  color: var(--aj-cyan);
}

[data-aj-theme="light"] .aj-footer .aj-btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- WooCommerce: cart, checkout, account ---------- */
/*
 * The dark sheet paints form controls with a hard-coded dark background and
 * !important, which in light mode left dark text on a dark field. These rules
 * repaint every input surface on the classic AND block checkout.
 */
[data-aj-theme="light"] .woocommerce table,
[data-aj-theme="light"] .woocommerce .cart_totals,
[data-aj-theme="light"] .woocommerce-checkout #order_review,
[data-aj-theme="light"] #payment,
[data-aj-theme="light"] .woocommerce-info,
[data-aj-theme="light"] .woocommerce-message {
  background: var(--aj-surface-soft) !important;
  color: var(--aj-text-main) !important;
  border-color: var(--aj-border) !important;
}

/* Classic checkout / cart / login / coupon fields */
[data-aj-theme="light"] .woocommerce form .form-row input.input-text,
[data-aj-theme="light"] .woocommerce form .form-row textarea,
[data-aj-theme="light"] .woocommerce form .form-row select,
[data-aj-theme="light"] .woocommerce input.input-text,
[data-aj-theme="light"] .woocommerce textarea,
[data-aj-theme="light"] .woocommerce select,
[data-aj-theme="light"] .woocommerce .select2-selection,
[data-aj-theme="light"] .woocommerce .select2-selection__rendered,
[data-aj-theme="light"] .woocommerce .quantity input.qty,
[data-aj-theme="light"] .woocommerce-page input[type="text"],
[data-aj-theme="light"] .woocommerce-page input[type="email"],
[data-aj-theme="light"] .woocommerce-page input[type="tel"],
[data-aj-theme="light"] .woocommerce-page input[type="password"],
[data-aj-theme="light"] .woocommerce-page input[type="number"],
[data-aj-theme="light"] .woocommerce-page input[type="search"],
[data-aj-theme="light"] .woocommerce-page textarea,
[data-aj-theme="light"] .woocommerce-page select {
  background: #ffffff !important;
  color: var(--aj-text-main) !important;
  border: 1px solid var(--aj-border) !important;
  -webkit-text-fill-color: var(--aj-text-main);
}

/* Block (Gutenberg) checkout fields */
[data-aj-theme="light"] .wc-block-components-text-input input,
[data-aj-theme="light"] .wc-block-components-combobox input,
[data-aj-theme="light"] .wc-block-components-textarea textarea,
[data-aj-theme="light"] .wc-block-components-select select,
[data-aj-theme="light"] .wc-block-components-address-form input,
[data-aj-theme="light"] .wc-block-components-form input {
  background: #ffffff !important;
  color: var(--aj-text-main) !important;
  border: 1px solid var(--aj-border) !important;
  -webkit-text-fill-color: var(--aj-text-main);
}

[data-aj-theme="light"] .wc-block-components-checkout-step,
[data-aj-theme="light"] .wc-block-components-totals-wrapper,
[data-aj-theme="light"] .wc-block-checkout__sidebar,
[data-aj-theme="light"] .wc-block-components-order-summary {
  background: var(--aj-surface-soft) !important;
  border-color: var(--aj-border) !important;
  color: var(--aj-text-main) !important;
}

/* Labels, floating labels and placeholders must stay readable too. */
[data-aj-theme="light"] .woocommerce form .form-row label,
[data-aj-theme="light"] .woocommerce label,
[data-aj-theme="light"] .wc-block-components-text-input label,
[data-aj-theme="light"] .wc-block-components-checkout-step__description,
[data-aj-theme="light"] #payment ul.payment_methods li,
[data-aj-theme="light"] .woocommerce table th,
[data-aj-theme="light"] .woocommerce table td {
  color: var(--aj-text-main) !important;
}

[data-aj-theme="light"] .woocommerce input::placeholder,
[data-aj-theme="light"] .woocommerce textarea::placeholder,
[data-aj-theme="light"] .wc-block-components-text-input input::placeholder {
  color: var(--aj-text-dim) !important;
  -webkit-text-fill-color: var(--aj-text-dim);
}

/* Browser autofill repaints the field dark in some engines. */
[data-aj-theme="light"] .woocommerce input:-webkit-autofill,
[data-aj-theme="light"] .woocommerce-page input:-webkit-autofill,
[data-aj-theme="light"] .wc-block-components-text-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--aj-text-main);
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

[data-aj-theme="light"] #payment div.payment_box {
  background: rgba(var(--aj-cyan-rgb), 0.06) !important;
  border-color: rgba(var(--aj-cyan-rgb), 0.25) !important;
  color: var(--aj-text-muted) !important;
}

/* ---------- Theme toggle button ---------- */
.aj-theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--aj-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aj-text-main);
  cursor: pointer;
  transition: var(--aj-transition);
  flex: 0 0 auto;
  padding: 0;
}

.aj-theme-toggle:hover {
  border-color: var(--aj-cyan);
  color: var(--aj-cyan);
}

[data-aj-theme="light"] .aj-theme-toggle {
  background: var(--aj-surface-tint);
}

/* Show the sun in dark mode, the moon in light mode. */
.aj-theme-toggle .aj-icon-sun { display: block; }
.aj-theme-toggle .aj-icon-moon { display: none; }
[data-aj-theme="light"] .aj-theme-toggle .aj-icon-sun { display: none; }
[data-aj-theme="light"] .aj-theme-toggle .aj-icon-moon { display: block; }

/* ---------- Mobile nav toggle (shared by both themes) ---------- */
.aj-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--aj-border);
  color: var(--aj-text-main);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}

[data-aj-theme="light"] .aj-menu-toggle {
  background: var(--aj-surface-tint);
}

@media (max-width: 991px) {
  .aj-menu-toggle {
    display: inline-flex;
  }
  .aj-nav-menu.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--aj-bg-surface);
    border-block: 1px solid var(--aj-border);
    padding: 16px 24px;
    box-shadow: var(--aj-glass-shadow);
    z-index: 999;
  }
  .aj-header {
    position: sticky;
  }
  .aj-navbar {
    position: relative;
  }
  [data-aj-theme="light"] .aj-nav-menu.active {
    background: #ffffff;
  }
}

/* Footer keeps its dark ground in light mode, so its body copy stays light. */
[data-aj-theme="light"] .aj-footer-about,
[data-aj-theme="light"] .aj-footer-contact-note {
  color: #9fb3c8;
}