/* ======================================================================
   متجر روان | تخصيص CSS لثيم النمو (Vitrin) - نسخة مصححة للقوائم
   ====================================================================== */

:root {
  --primary: #2E86AB !important;
  --primary-foreground: #FFFFFF !important;
  --accent: #E8C5C8 !important;
  --secondary: #BCE3E6 !important;
  --background: #FCF8EF !important;
  --foreground: #243640 !important;
  --muted: #5F6B72 !important;
  --border: #DCE7E6 !important;
  --input: #2E86AB !important;
  --ring: #2E86AB !important;
  --radius: 9px !important;
}

/* ---------------------------------------------------------------------
   التصحيح: استهداف القوائم المنسدلة بشكل دقيق لضمان وضوح النص
   --------------------------------------------------------------------- */
/* نلغي لون النص الأبيض من القوائم المنسدلة ونفرض اللون الغامق */
header .dropdown-menu a, 
header .dropdown-menu span,
header .sub-menu a,
header .sub-menu span,
header [data-menu-dropdown] a,
header [data-menu-dropdown] span,
header [role="menuitem"],
header .el-dropdown-menu__item,
header .el-dropdown-menu__item a {
    color: var(--foreground) !important;
}

/* نضمن خلفية فاتحة للقوائم المنسدلة في الهيدر */
header .dropdown-menu, 
header .sub-menu,
header [data-menu-dropdown],
header .el-dropdown-menu {
    background-color: var(--background) !important;
    border: 1px solid var(--border) !important;
}

/* ---------------------------------------------------------------------
   2) أساسيات (باقي الكود كما هو)
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background-color: var(--background); }
::selection { background: var(--primary); color: #fff; }
[data-announcement-bar] p { letter-spacing: .2px; }

header { background-color: var(--primary) !important; border-color: rgba(255,255,255,.15) !important; }
#footer { background-color: var(--primary) !important; }

header a, header button, header span, header summary, header svg,
#footer a, #footer button, #footer span, #footer h3, #footer p, #footer svg {
  color: #FFFFFF !important;
}
#footer .text-muted { color: rgba(255,255,255,.72) !important; }
#footer .border-t { border-color: rgba(255,255,255,.20) !important; }

/* استثناء القوائم المنسدلة ونافذة البحث (لضمان أنها ليست بيضاء) */
header dialog a, header dialog button, header dialog span,
header dialog input, header dialog svg, header dialog summary, header dialog p,
header el-popover a, header el-popover button, header el-popover span, header el-popover svg {
  color: var(--foreground) !important;
}

header a[aria-label] img,
#footer img[alt="Rewaan Home"] {
  background: #FFFFFF !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

.section-categories h2::after,
.section-products h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  margin-top: .55rem;
}

.btn { transition: transform .25s ease, background-color .25s ease, color .25s ease, filter .25s ease, box-shadow .25s ease; border-radius: 9px !important; }
.btn-filled { background: var(--primary) !important; color: #fff !important; }
.btn-filled:hover { filter: brightness(.93); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46, 134, 171, .28); }
.btn-outlined { border-color: var(--primary) !important; color: var(--primary) !important; }
.btn-outlined:hover { background: var(--primary) !important; color: var(--primary-foreground) !important; transform: translateY(-1px); }

[data-product-card] { transition: transform .35s ease, box-shadow .35s ease; border-radius: 12px; padding: 6px; }
[data-product-card]:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(36, 54, 64, .12); }
[data-product-card] a.block { border-radius: 10px; }
[data-product-card] img { transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
[data-product-card]:hover img { transform: scale(1.06); }
[data-product-card] [data-wishlist-btn] { background: rgba(255, 255, 255, .85) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: transform .2s ease, background-color .2s ease; }
[data-product-card] [data-wishlist-btn]:hover { background: #fff !important; transform: scale(1.08); }

[data-product-card] p.font-semibold, main .text-foreground.font-semibold { color: var(--primary) !important; letter-spacing: .2px; }
.line-through, .text-destructive.line-through { color: #C0392B !important; text-decoration-color: #C0392B !important; }

.bg-\[\#F1EFFE\] { background: #BCE3E6 !important; border-color: #8FCBD1 !important; color: #0E4A59 !important; font-weight: 700 !important; }
.text-\[\#7462F4\] { color: #0E4A59 !important; }
.bg-\[\#F1EFFE\] svg { fill: #0E4A59 !important; }
.bg-success\/20 { background: rgba(214, 69, 69, .14) !important; }
.text-success { color: #C0392B !important; font-weight: 700 !important; }
[data-product-card] span.bg-secondary { background: rgba(232, 197, 200, .55) !important; color: #8A3D49 !important; font-weight: 700 !important; }
.bg-warning\/20, .bg-warning\/10 { background: rgba(186, 117, 23, .14) !important; }
.text-warning { color: #8A4B0B !important; font-weight: 700 !important; }

.qty-input { border-color: var(--border) !important; border-radius: 9px !important; overflow: hidden; }
.qty-input-btn:hover { background: var(--secondary) !important; }
.qty-input-field:focus { outline-color: var(--primary) !important; }

.embla__prev, .embla__next, .products-embla__prev, .products-embla__next { background: var(--background) !important; border: 1px solid var(--border); color: var(--foreground); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); transition: .25s; }
.embla__prev:hover, .embla__next:hover, .products-embla__prev:hover, .products-embla__next:hover { background: var(--primary) !important; color: var(--primary-foreground); border-color: var(--primary); }
.embla__progress-bar, .products-embla__progress-bar { background: var(--accent) !important; }

.form-input:focus, .form-input-wrapper:focus-within { border-color: var(--primary) !important; }

img[data-lightbox-trigger] { aspect-ratio: 1 / 1 !important; object-fit: cover !important; width: 100% !important; max-width: 550px !important; height: auto !important; margin-inline: auto !important; border-radius: 10px !important; }
.section-categories .aspect-\[4\/5\], .section-categories img.aspect-\[4\/5\] { aspect-ratio: 1 / 1 !important; }