/**
 * ClalMobile Theme Layer
 * ======================
 * Applies Luxury Dark Theme to existing HTML elements
 * Works as an adapter layer - no markup changes needed
 * 
 * Load Order: AFTER all existing CSS, AFTER tokens.css
 */

/* =====================================================
 * GLOBAL RESET & BASE
 * ===================================================== */

html {
  background: var(--clm-bg-deep) !important;
  color-scheme: dark;
}

body {
  background: var(--clm-bg-base) !important;
  color: var(--clm-text-primary) !important;
  font-family: var(--clm-font-ar) !important;
  line-height: var(--clm-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL Support */
[dir="rtl"] body,
body[dir="rtl"],
html[lang="ar"] body,
html[lang="he"] body {
  font-family: var(--clm-font-ar) !important;
}

html[lang="he"] body {
  font-family: var(--clm-font-he) !important;
}

/* =====================================================
 * TYPOGRAPHY
 * ===================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--clm-text-primary);
  font-weight: var(--clm-font-bold);
  line-height: var(--clm-leading-tight);
}

p, span, label, li {
  color: var(--clm-text-secondary);
}

a {
  color: var(--clm-accent-light);
  text-decoration: none;
  transition: color var(--clm-transition-fast);
}

a:hover {
  color: var(--clm-text-primary);
}

small, .text-muted, .text-secondary {
  color: var(--clm-text-muted) !important;
}

/* =====================================================
 * HEADER
 * ===================================================== */

header,
.header,
.site-header,
.page-header,
.admin-header,
[class*="header"] {
  background: var(--clm-bg-surface) !important;
  border-bottom: 1px solid var(--clm-border-default) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Brand Header with Gradient */
header.brand-header,
.brand-header,
.header-gradient {
  background: var(--clm-gradient-primary) !important;
  border-bottom: none !important;
}

/* Logo Section */
.logo-section,
.brand-logo,
header img[alt*="logo" i],
header img[alt*="Logo" i],
.header img {
  height: auto;
  max-height: 48px;
}

/* =====================================================
 * BUTTONS - SOLID STYLE (Default)
 * ===================================================== */

button,
.btn,
a.btn,
[type="button"],
[type="submit"],
input[type="submit"],
input[type="button"] {
  background: var(--clm-gradient-primary) !important;
  color: var(--clm-text-primary) !important;
  border: none !important;
  border-radius: var(--clm-radius-button) !important;
  padding: var(--clm-space-md) var(--clm-space-xl) !important;
  font-family: inherit !important;
  font-weight: var(--clm-font-semibold) !important;
  font-size: var(--clm-text-base) !important;
  cursor: pointer;
  transition: all var(--clm-transition-base) !important;
  box-shadow: var(--clm-shadow-md) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--clm-space-sm);
  min-height: 44px; /* Touch target */
}

button:hover,
.btn:hover,
a.btn:hover,
[type="button"]:hover,
[type="submit"]:hover {
  background: var(--clm-gradient-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--clm-shadow-glow) !important;
}

button:active,
.btn:active {
  transform: translateY(0);
}

button:disabled,
.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Secondary/Outline Buttons */
.btn-secondary,
.btn-outline,
.btn-ghost,
button.secondary,
button[class*="outline"],
button[class*="secondary"] {
  background: transparent !important;
  border: 2px solid var(--clm-border-accent) !important;
  color: var(--clm-accent-light) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover {
  background: var(--clm-gradient-subtle) !important;
  border-color: var(--clm-accent) !important;
  box-shadow: var(--clm-shadow-glow) !important;
}

/* Small Buttons */
.btn-sm,
button.small,
.btn.small {
  padding: var(--clm-space-sm) var(--clm-space-lg) !important;
  font-size: var(--clm-text-sm) !important;
  min-height: 36px;
}

/* Large Buttons */
.btn-lg,
button.large,
.btn.large {
  padding: var(--clm-space-lg) var(--clm-space-2xl) !important;
  font-size: var(--clm-text-lg) !important;
  min-height: 52px;
}

/* CTA Buttons - Extra Prominent */
.btn-cta,
.cta-button,
.add-to-cart,
.buy-now,
.checkout-btn,
.submit-order,
[class*="add-cart"],
[class*="buy-now"],
[class*="checkout"] button,
button[class*="primary"] {
  background: var(--clm-gradient-primary) !important;
  font-size: var(--clm-text-lg) !important;
  padding: var(--clm-space-lg) var(--clm-space-2xl) !important;
  box-shadow: var(--clm-shadow-glow) !important;
  min-height: 52px;
}

.btn-cta:hover,
.cta-button:hover,
.add-to-cart:hover,
.buy-now:hover {
  box-shadow: var(--clm-shadow-glow-strong) !important;
}

/* =====================================================
 * FORM INPUTS
 * ===================================================== */

input,
select,
textarea,
.form-input,
.form-control,
[type="text"],
[type="email"],
[type="tel"],
[type="number"],
[type="password"],
[type="search"] {
  background: var(--clm-bg-elevated) !important;
  color: var(--clm-text-primary) !important;
  border: 1px solid var(--clm-border-default) !important;
  border-radius: var(--clm-radius-input) !important;
  padding: var(--clm-space-md) var(--clm-space-lg) !important;
  font-family: inherit !important;
  font-size: var(--clm-text-base) !important;
  transition: all var(--clm-transition-fast) !important;
  min-height: 48px;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-control:focus {
  outline: none !important;
  border-color: var(--clm-accent) !important;
  box-shadow: 0 0 0 3px var(--clm-accent-glow) !important;
  background: var(--clm-bg-card) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--clm-text-subtle) !important;
  opacity: 1;
}

/* Select Dropdown */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 36px !important;
}

[dir="ltr"] select {
  background-position: right 12px center;
  padding-left: var(--clm-space-lg) !important;
  padding-right: 36px !important;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  accent-color: var(--clm-accent);
  cursor: pointer;
}

/* =====================================================
 * CARDS
 * ===================================================== */

.card,
.product-card,
.review-card,
.settings-card,
[class*="-card"],
article,
.box {
  background: var(--clm-bg-card) !important;
  border: 1px solid var(--clm-border-subtle) !important;
  border-radius: var(--clm-radius-card) !important;
  box-shadow: var(--clm-shadow-md) !important;
  overflow: hidden;
  transition: all var(--clm-transition-base) !important;
}

.card:hover,
.product-card:hover {
  border-color: var(--clm-border-accent) !important;
  box-shadow: var(--clm-shadow-lg), var(--clm-shadow-glow) !important;
  transform: translateY(-4px);
}

.card-header,
.card-title,
[class*="card-header"] {
  background: var(--clm-bg-elevated) !important;
  border-bottom: 1px solid var(--clm-border-subtle) !important;
  padding: var(--clm-space-lg) !important;
}

.card-body,
.card-content,
[class*="card-body"] {
  padding: var(--clm-space-lg) !important;
}

/* Product Card Specific */
.product-card .product-image,
.product-card img {
  background: var(--clm-bg-elevated);
  aspect-ratio: 1;
  object-fit: contain;
}

.product-card .product-name,
.product-card .product-title {
  color: var(--clm-text-primary) !important;
  font-weight: var(--clm-font-semibold);
}

.product-card .product-price,
.product-card .price {
  background: var(--clm-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--clm-font-bold);
  font-size: var(--clm-text-xl);
}

/* =====================================================
 * MODALS
 * ===================================================== */

.modal,
.modal-content,
.modal-dialog,
[class*="modal"] > div,
.popup,
.overlay-content {
  background: var(--clm-bg-card) !important;
  border: 1px solid var(--clm-border-default) !important;
  border-radius: var(--clm-radius-xl) !important;
  box-shadow: var(--clm-shadow-xl) !important;
}

.modal-header,
[class*="modal-header"] {
  background: var(--clm-bg-elevated) !important;
  border-bottom: 1px solid var(--clm-border-subtle) !important;
  padding: var(--clm-space-lg) var(--clm-space-xl) !important;
}

.modal-body,
[class*="modal-body"] {
  padding: var(--clm-space-xl) !important;
}

.modal-footer,
[class*="modal-footer"] {
  background: var(--clm-bg-surface) !important;
  border-top: 1px solid var(--clm-border-subtle) !important;
  padding: var(--clm-space-lg) var(--clm-space-xl) !important;
}

/* Modal Backdrop */
.modal-backdrop,
.overlay,
[class*="backdrop"] {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px);
}

/* =====================================================
 * TABS
 * ===================================================== */

.tabs,
.tabs-nav,
.tab-navigation,
[class*="tabs"] {
  background: var(--clm-bg-surface) !important;
  border-radius: var(--clm-radius-lg);
  padding: var(--clm-space-xs);
  gap: var(--clm-space-xs);
}

.tab,
.tab-btn,
.tab-item,
[class*="tab-"] button,
[role="tab"] {
  background: transparent !important;
  color: var(--clm-text-muted) !important;
  border: none !important;
  border-radius: var(--clm-radius-md) !important;
  padding: var(--clm-space-md) var(--clm-space-lg) !important;
  font-weight: var(--clm-font-medium) !important;
  transition: all var(--clm-transition-fast) !important;
}

.tab:hover,
.tab-btn:hover,
[role="tab"]:hover {
  background: var(--clm-bg-hover) !important;
  color: var(--clm-text-primary) !important;
}

.tab.active,
.tab-btn.active,
[role="tab"][aria-selected="true"],
[class*="tab-"].active {
  background: var(--clm-gradient-primary) !important;
  color: var(--clm-text-primary) !important;
  box-shadow: var(--clm-shadow-glow) !important;
}

.tab-content,
.tab-panel,
[role="tabpanel"] {
  background: var(--clm-bg-card) !important;
  border: 1px solid var(--clm-border-subtle) !important;
  border-radius: var(--clm-radius-lg) !important;
  padding: var(--clm-space-xl) !important;
  margin-top: var(--clm-space-lg);
}

/* =====================================================
 * TABLES
 * ===================================================== */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--clm-bg-card);
  border-radius: var(--clm-radius-lg);
  overflow: hidden;
}

th {
  background: var(--clm-bg-elevated) !important;
  color: var(--clm-text-primary) !important;
  font-weight: var(--clm-font-semibold);
  padding: var(--clm-space-lg) !important;
  text-align: inherit;
  border-bottom: 1px solid var(--clm-border-default) !important;
}

td {
  padding: var(--clm-space-lg) !important;
  border-bottom: 1px solid var(--clm-border-subtle) !important;
  color: var(--clm-text-secondary);
}

tr:last-child td {
  border-bottom: none !important;
}

tr:hover td {
  background: var(--clm-bg-hover) !important;
}

/* =====================================================
 * TOAST / NOTIFICATIONS
 * ===================================================== */

.toast,
.notification,
.alert,
[class*="toast"],
[class*="notification"] {
  background: var(--clm-bg-elevated) !important;
  color: var(--clm-text-primary) !important;
  border: 1px solid var(--clm-border-default) !important;
  border-radius: var(--clm-radius-lg) !important;
  box-shadow: var(--clm-shadow-xl) !important;
  padding: var(--clm-space-lg) var(--clm-space-xl) !important;
}

.toast.success,
.alert-success {
  border-color: var(--clm-success) !important;
  background: var(--clm-success-bg) !important;
}

.toast.error,
.alert-error,
.alert-danger {
  border-color: var(--clm-error) !important;
  background: var(--clm-error-bg) !important;
}

.toast.warning,
.alert-warning {
  border-color: var(--clm-warning) !important;
  background: var(--clm-warning-bg) !important;
}

/* =====================================================
 * FOOTER
 * ===================================================== */

footer,
.footer,
.site-footer,
[class*="footer"] {
  background: var(--clm-bg-surface) !important;
  border-top: 1px solid var(--clm-border-default) !important;
  color: var(--clm-text-muted) !important;
  padding: var(--clm-space-2xl) var(--clm-space-lg) !important;
}

footer a {
  color: var(--clm-text-muted) !important;
}

footer a:hover {
  color: var(--clm-accent-light) !important;
}

/* =====================================================
 * BADGES & TAGS
 * ===================================================== */

.badge,
.tag,
.label,
.chip,
[class*="badge"] {
  background: var(--clm-gradient-subtle) !important;
  color: var(--clm-accent-light) !important;
  border: 1px solid var(--clm-border-accent) !important;
  border-radius: var(--clm-radius-full) !important;
  padding: var(--clm-space-xs) var(--clm-space-md) !important;
  font-size: var(--clm-text-xs) !important;
  font-weight: var(--clm-font-semibold) !important;
}

/* Authorized Badge */
.authorized-badge,
[class*="authorized"] {
  background: var(--clm-gradient-primary) !important;
  color: var(--clm-text-primary) !important;
  border: none !important;
}

/* =====================================================
 * SCROLLBAR
 * ===================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--clm-bg-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--clm-bg-active);
  border-radius: var(--clm-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clm-text-subtle);
}

/* =====================================================
 * SELECTION
 * ===================================================== */

::selection {
  background: var(--clm-accent);
  color: var(--clm-text-primary);
}

/* =====================================================
 * MOBILE RESPONSIVE
 * ===================================================== */

@media (max-width: 768px) {
  /* Larger touch targets */
  button,
  .btn,
  a.btn {
    min-height: 48px !important;
    font-size: var(--clm-text-base) !important;
  }
  
  input,
  select,
  textarea {
    min-height: 52px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  
  /* Better spacing */
  .card,
  .product-card {
    margin-bottom: var(--clm-space-lg);
  }
  
  /* Stack cards in mobile */
  .products-grid,
  .card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--clm-space-md) !important;
  }
  
  /* Hide luxury mode elements by default (OFF) */
  .spin-wheel,
  .wheel-popup,
  .countdown-timer,
  .live-viewers,
  .gamification,
  [class*="spin-wheel"],
  [class*="countdown"],
  [class*="live-viewer"] {
    display: none !important;
  }
  
  /* Mobile header */
  header,
  .header {
    padding: var(--clm-space-md) var(--clm-space-lg) !important;
  }
  
  /* Mobile drawer cart */
  .cart-drawer,
  .mobile-cart,
  [class*="cart-drawer"] {
    background: var(--clm-bg-card) !important;
    border-left: 1px solid var(--clm-border-default) !important;
    box-shadow: var(--clm-shadow-xl) !important;
  }
  
  [dir="rtl"] .cart-drawer {
    border-left: none !important;
    border-right: 1px solid var(--clm-border-default) !important;
  }
}

@media (max-width: 480px) {
  .products-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  
  .btn-cta,
  .checkout-btn {
    width: 100% !important;
    padding: var(--clm-space-lg) !important;
  }
}

/* =====================================================
 * LUXURY MODE OFF BY DEFAULT
 * These elements are hidden unless explicitly enabled
 * ===================================================== */

.spin-wheel-container,
.countdown-banner,
.live-viewers-widget,
.gamification-popup,
#spinWheel,
#countdownTimer,
#liveViewers,
[data-luxury="spin-wheel"],
[data-luxury="countdown"],
[data-luxury="live-viewers"] {
  display: none !important;
}

/* Enable via data attribute when admin turns on */
[data-luxury-mode="on"] .spin-wheel-container,
[data-luxury-mode="on"] .countdown-banner,
[data-luxury-mode="on"] .live-viewers-widget {
  display: block !important;
}

/* =====================================================
 * ADMIN SPECIFIC OVERRIDES
 * ===================================================== */

.admin-content,
.admin-panel,
[class*="admin-"] {
  background: var(--clm-bg-base) !important;
}

.admin-sidebar,
.admin-nav {
  background: var(--clm-bg-surface) !important;
  border-right: 1px solid var(--clm-border-default) !important;
}

[dir="rtl"] .admin-sidebar {
  border-right: none !important;
  border-left: 1px solid var(--clm-border-default) !important;
}

/* =====================================================
 * CHECKOUT SPECIFIC
 * ===================================================== */

.checkout-form,
.checkout-section,
[class*="checkout"] {
  background: var(--clm-bg-card) !important;
  border-radius: var(--clm-radius-lg) !important;
  border: 1px solid var(--clm-border-subtle) !important;
}

.order-summary,
.cart-summary {
  background: var(--clm-bg-elevated) !important;
  border-radius: var(--clm-radius-lg) !important;
  border: 1px solid var(--clm-border-accent) !important;
}

.total-price,
.order-total {
  background: var(--clm-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: var(--clm-text-2xl) !important;
  font-weight: var(--clm-font-bold) !important;
}

/* =====================================================
 * PRINT STYLES
 * ===================================================== */

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  button,
  .btn,
  header,
  footer,
  .no-print {
    display: none !important;
  }
}