/* Add custom CSS styles below */
/* ============================================================
   متجر جامعة أم القرى — Premium CSS v2
   آمن، بدون conflicts، خلفيات بيضاء
   ============================================================ */

/* ── 1. المتغيرات ─────────────────────────────────────────── */
:root {
  --uqu-primary:      #056971;
  --uqu-primary-dark: #034a50;
  --uqu-primary-lite: #07909b;
  --uqu-gold:         #c9a84c;
  --uqu-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. خلفية الموقع بيضاء ────────────────────────────────── */
body,
main,
.main,
#main,
#app,
.app-wrapper,
.page-wrapper,
.content-wrapper {
  background-color: #ffffff !important;
  color: #111827;
}

/* ── 3. Scrollbar أنيق ────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #f3f4f6; }
::-webkit-scrollbar-thumb  { background: var(--uqu-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--uqu-primary-dark); }

/* ── 4. Header — فقط الظل والانتقال بدون تغيير اللون ─────── */
.s-header,
.header-container,
[data-section-type="header"],
.site-header {
  transition: box-shadow var(--uqu-transition) !important;
  background-color: #ffffff !important;
}

/* ظل ناعم عند التمرير (تضاف class عبر JS) */
.uqu-header-scrolled {
  box-shadow: 0 2px 16px rgba(5, 105, 113, 0.12) !important;
}

/* ── 5. شريط الإعلانات — gradient خفيف فقط ──────────────── */
.s-topnav,
.announcement-bar,
[data-section-type="top-bar"] {
  background: linear-gradient(
    90deg,
    var(--uqu-primary-dark) 0%,
    var(--uqu-primary) 50%,
    var(--uqu-primary-lite) 100%
  ) !important;
}

/* ── 6. بطاقات المنتجات — hover فقط بدون تغيير خلفية ──────── */
.s-product-card,
.product-card {
  transition:
    transform var(--uqu-transition),
    box-shadow var(--uqu-transition),
    border-color var(--uqu-transition) !important;
  background-color: #ffffff !important;
}

.s-product-card:hover,
.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 28px rgba(5, 105, 113, 0.14) !important;
  border-color: rgba(5, 105, 113, 0.22) !important;
}

/* زووم خفيف على صورة المنتج */
.s-product-card .s-product-card__image img,
.s-product-card .product-image img,
.product-card img {
  transition: transform 0.45s ease !important;
  background-color: #ffffff !important;
}

.s-product-card:hover .s-product-card__image img,
.s-product-card:hover .product-image img,
.product-card:hover img {
  transform: scale(1.04) !important;
}

/* اسم المنتج */
.s-product-card .s-product-card__title,
.s-product-card .product-name,
.product-card .product-name {
  transition: color var(--uqu-transition) !important;
}

.s-product-card:hover .s-product-card__title,
.s-product-card:hover .product-name {
  color: var(--uqu-primary) !important;
}

/* سعر المنتج */
.s-product-card .s-product-card__price,
.s-product-card .product-price,
.product-card .product-price {
  color: var(--uqu-primary) !important;
  font-weight: 800 !important;
}

/* ── 7. أزرار إضافة للسلة ──────────────────────────────────── */
.s-btn.s-btn--primary,
.s-add-to-cart-btn,
button.btn-primary,
.add-to-cart-btn {
  background: linear-gradient(
    135deg,
    var(--uqu-primary) 0%,
    var(--uqu-primary-lite) 100%
  ) !important;
  border-color: var(--uqu-primary) !important;
  color: #ffffff !important;
  transition:
    transform var(--uqu-transition),
    box-shadow var(--uqu-transition) !important;
  position: relative;
  overflow: hidden;
}

.s-btn.s-btn--primary:hover,
.s-add-to-cart-btn:hover,
button.btn-primary:hover,
.add-to-cart-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(5, 105, 113, 0.38) !important;
  background: linear-gradient(
    135deg,
    var(--uqu-primary-dark) 0%,
    var(--uqu-primary) 100%
  ) !important;
}

/* Shine sweep على الأزرار */
.s-btn.s-btn--primary::after,
.s-add-to-cart-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  transition: left 0.45s ease;
}

.s-btn.s-btn--primary:hover::after,
.s-add-to-cart-btn:hover::after {
  left: 140%;
}

/* ── 8. سلة التسوق — أيقونة فقط ───────────────────────────── */
.s-header__cart-btn,
.cart-btn,
.header-cart {
  transition: transform var(--uqu-transition) !important;
}

.s-header__cart-btn:hover,
.cart-btn:hover {
  transform: scale(1.08) !important;
}

/* Badge العدد */
.s-header__cart-count,
.cart-count,
.cart-badge {
  background-color: var(--uqu-gold) !important;
  color: #111 !important;
  font-weight: 800 !important;
  border: 2px solid #fff !important;
}

/* ── 9. Footer فقط ─────────────────────────────────────────── */
.s-footer,
.site-footer,
footer.footer {
  background: linear-gradient(
    160deg,
    var(--uqu-primary-dark) 0%,
    #022f33 100%
  ) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 3px solid var(--uqu-gold) !important;
}

.s-footer a,
.site-footer a,
footer.footer a {
  color: rgba(255, 255, 255, 0.70) !important;
  transition: color var(--uqu-transition) !important;
}

.s-footer a:hover,
.site-footer a:hover {
  color: var(--uqu-gold) !important;
}

.s-footer h1, .s-footer h2, .s-footer h3, .s-footer h4, .s-footer h5, .s-footer h6,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: #ffffff !important;
}

/* ── 10. Scroll Reveal — يُفعَّل عبر JS فقط ──────────────── */
.uqu-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.uqu-reveal.uqu-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 11. Badge التخفيض ─────────────────────────────────────── */
.s-product-card .s-badge--sale,
.s-product-card .sale-badge,
.sale-tag {
  background: linear-gradient(135deg, var(--uqu-gold), #b8860b) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ── 12. Input البحث ───────────────────────────────────────── */
.s-header__search input,
.search-input,
input[type="search"] {
  border-radius: 8px !important;
  transition:
    border-color var(--uqu-transition),
    box-shadow var(--uqu-transition) !important;
  background-color: #ffffff !important;
}

.s-header__search input:focus,
.search-input:focus,
input[type="search"]:focus {
  border-color: var(--uqu-primary) !important;
  box-shadow: 0 0 0 3px rgba(5, 105, 113, 0.10) !important;
  outline: none !important;
}

/* ── 13. Toast الإشعارات ───────────────────────────────────── */
.s-toast,
.salla-toast,
[class*="toast-container"] {
  border-right: 4px solid var(--uqu-primary) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  background: #ffffff !important;
}

/* ── 14. زر العودة للأعلى (يُضاف عبر JS) ─────────────────── */
#uqu-back-top {
  position: fixed;
  bottom: 88px;
  left: 18px;
  z-index: 9998;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--uqu-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(5, 105, 113, 0.38);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#uqu-back-top.uqu-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#uqu-back-top:hover {
  background: var(--uqu-primary-dark);
  transform: translateY(-2px) !important;
}

/* ── 15. Pagination ────────────────────────────────────────── */
.s-pagination .s-pagination__item--active,
.pagination .active a,
.pagination .active span {
  background: var(--uqu-primary) !important;
  border-color: var(--uqu-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ── 16. موبايل ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .s-product-card:hover,
  .product-card:hover {
    transform: translateY(-3px) !important;
  }
}