/* =====================================================
   جنون الفن — CRAZY ART
   Dark / Gold premium design system (Cairo font)
   Applied to the live "Raed" theme via Twilight CSS tokens
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --font-main: 'Cairo', 'PingARLT', -apple-system, system-ui, sans-serif;

  --color-primary: #C9A227;
  --color-primary-dark: #a37c01;
  --color-primary-light: #efc84d;
  --color-primary-reverse: #1a1408;

  --color-background: #0d0c0a;
  --color-text: #f2ede2;

  --header-main-color: #0d0c0a;
  --header-text-color: #f2ede2;
  --color-footer: #0a0908;
  --color-footer-text: #b8b2a3;

  --color-bg-card: #161512;
  --color-wishlist-icon: #C9A227;
  --color-title-card: #ffffff;
  --color-subtitle-card: #b8b2a3;
  --color-price-card: #f2b90d;
  --color-old-price-card: #7c7566;
  --color-text-btn-card: #1a1408;
  --color-btn-hover-card: #efc84d;
  --card-title-font-weight: 600;

  --color-tag-badge-bg: #4a3d18;
  --color-tag-badge-text: #f2b90d;
  --color-tag-badge-border: #C9A227;
  --color-tag-badge-bg-2: #2a2314;
  --color-tag-badge-text-2: #efc84d;
  --color-tag-badge-border-2: #a37c01;
  --color-option-chip-bg: #161512;
  --color-option-chip-text: #f2ede2;
  --color-option-chip-border: #544e3b;
  --color-option-chip-selected-bg: #C9A227;
  --color-option-chip-selected-text: #1a1408;
  --color-option-chip-selected-border: #efc84d;
  --color-option-chip-hover-bg: #2a2314;
  --color-option-chip-hover-border: #C9A227;
  --color-option-chip-disabled-bg: #161512;

  --color-title-single-product: #ffffff;
  --color-subtitle-single-product: #b8b2a3;
  --color-description-single-product: #d8d2c4;
  --color-price-single-product: #f2b90d;
  --color-disprice-single-product: #7c7566;
  --color-icons-single-product: #C9A227;
  --color-btn-single-product: #C9A227;
  --color-btnHove-single-product: #efc84d;
  --color-relatedTitle-single-product: #ffffff;
}

html, body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-main);
}

body { background-color: var(--color-background) !important; }

header { background-color: var(--header-main-color); color: var(--header-text-color); }
footer { background-color: var(--color-footer); color: var(--color-footer-text); }

main, .s-block, .s-layout, .main-content, #app {
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); font-weight: 700; color: var(--color-text); }
p, span, div { font-family: var(--font-main); }
* { letter-spacing: normal; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary-light); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

input, textarea, select {
  background-color: #161512;
  color: var(--color-text);
  border: 1px solid #544e3b;
  font-family: var(--font-main);
}
input::placeholder, textarea::placeholder { color: #7c7566; }
input:focus, textarea:focus, select:focus { border-color: var(--color-primary); outline: none; }

button, .btn { font-family: var(--font-main); }
.btn-primary, button[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}
.btn-primary:hover, button[type="submit"]:hover { background-color: var(--color-primary-light); }

::selection { background-color: var(--color-primary); color: var(--color-primary-reverse); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: #544e3b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   Fix #2 — real Raed-theme utility-class overrides
   ===================================================== */

.bg-white {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}

.s-product-card-entry, .s-product-card-image {
  background-color: var(--color-bg-card) !important;
}
.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--color-title-card) !important;
}
.s-product-card-price {
  color: var(--color-price-card) !important;
}

.slide--cat-entry {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text) !important;
  border: 1px solid #544e3b;
}

.homeslider__slide, .magnify-wrapper { background-color: #f5f3ee !important; }


/* =====================================================
   Fix #3 — Tailwind text-gray-* utilities (illegible dark
   text on the new dark background) + icon button circles
   ===================================================== */

[class*="text-gray-"] { color: var(--color-text) !important; }

.s-social-share-btn, .btn--wishlist, .s-product-card-wishlist-btn {
  background-color: var(--color-bg-card) !important;
  border-color: #544e3b !important;
  color: var(--color-primary) !important;
}