/* ================== Purple Raed Theme - Full CSS ================== */

/* ---------- Variables ---------- */
:root{
  --primary: #10002b;   /* requested base */
  --accent1: #8f4cc6;
  --accent2: #a04fcf;
  --accent3: #c779ff;
  --muted: #bba6d9;
  --text: #ffffff;
  --card-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.03);
}

/* ---------- Base reset & force full-page background ---------- */
html, body {
  direction: rtl !important;
  background-color: var(--primary) !important;
  background-image: none !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure main wrappers inherit the background */
html, body, #app, .app, .site, .site-wrapper, .page-wrapper, .main-wrapper,
.store-page, .store-body, .store-container, .store-wrapper,
.container, .wrap {
  background-color: var(--primary) !important;
  background-image: none !important;
}

/* Common elements that sometimes add white panels */
[class*="bg-"],
[class*="panel-"],
[class*="section-"],
[class*="block-"],
[class*="card-"],
.s-block,
.s-panel,
.panel,
.section,
.container,
.site-content,
.site-main,
.store-content {
  background: transparent !important;
}

/* Override inline background styles inside main wrappers (use carefully) */
#app *[style*="background"],
.site *[style*="background"],
.container *[style*="background"],
.wrap *[style*="background"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Ensure header/footer adopt the theme */
.site-header, .header, .store-header,
.store-footer__inner, .site-footer, .footer {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 0 !important;
}

/* ---------- Typography ---------- */
body, input, button, textarea, select {
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue" !important;
  color: var(--text) !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
  color: var(--text) !important;
  margin: 0 0 .5rem 0;
  font-weight: 600;
}

/* Lists */
li, ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text) !important;
}

/* Links */
a, a:link, a:visited {
  color: var(--accent3) !important;
  text-decoration: none !important;
}
a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
* { box-sizing: border-box; }

/* Remove page side white margins from some templates */
.site, .store-page, .store-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Hero / slider / titles ---------- */
.s-slider-block__title h2,
.hero-title,
.banner-title {
  color: var(--text) !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
  font-weight: 700;
}

/* ---------- Product Cards ---------- */
.s-product-card-entry,
.product-card,
.card,
.product-card__inner,
.card .card-body {
  background: var(--card-bg) !important;
  border: 0 !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, background .24s ease;
}

/* Card hover lift */
.s-product-card-entry:hover,
.product-card:hover,
.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(16,0,43,0.45) !important;
}

/* Product title / price */
.s-product-card-entry .title,
.product-card .title,
.product-card__name,
.card .title,
.s-product-card-entry .price {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* product images: ensure no white bg */
.product-card img,
.s-product-card-entry img,
.card img {
  background: transparent !important;
}

/* ---------- Buttons ---------- */
button, .btn, .button, .s-btn, .add-to-cart {
  background: linear-gradient(90deg, var(--accent2), var(--accent1)) !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
  box-shadow: 0 8px 20px rgba(160,79,207,0.15) !important;
}

/* Button hover */
button:hover, .btn:hover, .button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

/* Small ghost / outline buttons */
.btn--outline, .button--outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}

/* ---------- Features / testimonials ---------- */
.s-block--features__item,
.s-reviews-testimonial,
.feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  font-weight: 600;
}

/* ---------- Slider arrows / icons ---------- */
.s-slider-nav-arrow svg,
.icon svg,
.svg-icon {
  fill: #e0aaff !important;
}

/* ---------- Cart summary / totals ---------- */
.s-cart-summary-total,
.cart-summary .total,
.cart-summary .amount {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ---------- Footer ---------- */
.store-footer__inner,
.site-footer,
.footer {
  background: linear-gradient(180deg, #0b0020, var(--primary)) !important;
  color: var(--text) !important;
  border-top: 0 !important;
}
.store-footer__inner a, .footer a { color: var(--accent2) !important; }

/* ---------- Generic class overrides (to prevent white blocks) ---------- */
[class*="bg-"],
[class*="panel-"],
[class*="section-"],
[class*="block-"],
[class*="container-"],
[class*="card-"] {
  background: transparent !important;
}

/* ---------- Accessibility focus outlines ---------- */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(143,76,198,0.22) !important;
  outline-offset: 2px !important;
}

/* ---------- Floating / Glow Animation (CSS-only helper) ---------- */
.purple-glow {
  animation: float-glow 6s ease-in-out infinite;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes float-glow {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 8px 30px rgba(140,64,186,0.12)); }
  50% { transform: translateY(-6px) scale(1.01); filter: drop-shadow(0 24px 60px rgba(160,79,207,0.18)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 8px 30px rgba(140,64,186,0.12)); }
}

/* ---------- Hover ring (for JS to toggle .visible) ---------- */
.hover-ring {
  position: absolute;
  pointer-events: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(199,121,255,0.85);
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
  transition: transform .12s ease, opacity .18s ease;
  mix-blend-mode: screen;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 20px rgba(160,79,207,0.14);
  z-index: 9999;
  will-change: transform, opacity;
  background: radial-gradient(circle at 35% 35%, rgba(199,121,255,0.06), transparent 40%);
}

.hover-ring.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Ripple element (JS will add .animate) ---------- */
.ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  z-index: 9998;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.ripple.animate {
  animation: ripple-expand .7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ripple-expand {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.9; }
  70% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.28; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1200px) {
  html, body, #app, .site, .container {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 768px) {
  .hover-ring { width: 48px; height: 48px; }
  .s-product-card-entry, .product-card { border-radius: 10px !important; padding: 10px !important; }
  .site-header { padding: 10px 12px !important; }
}

/* ---------- Safety overrides for stubborn white areas ---------- */
/* These are broad - keep at bottom so they override earlier rules */
html, body, #app, .app, .site, .site-wrapper, .page-wrapper, .main-wrapper,
.store-page, .container, .wrap, .site-content {
  background-color: var(--primary) !important;
  background-image: none !important;
}

/* Target inline style white backgrounds by scanning style attribute (broad) */
*[style*="background: white"], *[style*="background-color: white"],
*[style*="background:#fff"], *[style*="background:#ffffff"],
*[style*="background: rgb(255, 255, 255)"], *[style*="background-color: rgb(255, 255, 255)"] {
  background-color: transparent !important;
  background-image: none !important;
}
.slide--cat-entry h2 {    color: #cd0d0d !important;}
/* ---------- End of file ---------- */