/* ===========================================
   QASEEM AL OUD - Final Elegant Store Design
   With 2s Large Logo Loader + Smooth Product Fade-in
   =========================================== */

:root {
  --gold: #b57a36;
  --light-gold: #e3c299;
  --cream: #faf7f3;
  --text: #3c2f1d;
  --muted: #7a6a54;
  --overlay-gray: rgba(240,240,240,0.75);
  --font: "Tajawal", "Cairo", sans-serif;
  --logo: url('https://i.postimg.cc/bJVZPMvJ/shʿar-ʿwd-altyb.png');
}

body {
  background-color: var(--cream);
  color: var(--text);
  font-family: var(--font);
  direction: rtl;
}

/* ===== شاشة البداية ===== */
#welcome-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-gray);
  backdrop-filter: blur(10px);
  z-index: 99999;
  animation: fadeOutScreen 2s ease forwards;
  pointer-events: none;
}

#welcome-screen::before {
  content: "";
  width: 340px;
  height: 340px;
  background: var(--logo) no-repeat center/contain;
  animation: pulseLogo 1.8s ease-in-out infinite;
}

@keyframes fadeOutScreen {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes pulseLogo {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.95; }
  100% { transform: scale(1); opacity: 1; }
}

body:not(.welcome-shown) *:not(#welcome-screen) {
  animation: showPage 2.1s ease forwards;
  opacity: 0;
}
@keyframes showPage {
  to { opacity: 1; }
}

/* ===== ظهور ناعم للمنتجات ===== */
.product-card, .product-item, .product, .card {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 2s;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== الأزرار ===== */
button, .btn, [class*="button"] {
  background: linear-gradient(90deg, var(--gold), var(--light-gold)) !important;
  color: white !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  transition: transform .3s, box-shadow .3s !important;
}
button:hover, .btn:hover, [class*="button"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(181,122,54,0.3);
}

/* ===== بطاقات المنتجات ===== */
.product-card, .product-item, .product, .card {
  background: white !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
  transition: transform .3s, box-shadow .3s !important;
}
.product-card:hover, .product-item:hover, .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.1) !important;
}

/* ===== العناوين والأسعار ===== */
.product-title, .product-name, .product h3 {
  color: var(--gold) !important;
  font-weight: 700 !important;
}
.price, .product-price, .price-value {
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* ===== الفوتر ===== */
footer, .footer {
  background: linear-gradient(180deg, var(--light-gold) 0%, var(--cream) 100%) !important;
  text-align: center !important;
  padding: 40px 20px !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  color: var(--text) !important;
}
footer p, .footer p {
  color: var(--muted) !important;
  font-size: 0.95rem !important;
}
footer a, .footer a {
  color: var(--gold) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
footer a:hover { text-decoration: underline !important; }

/* ===== الجوال ===== */
@media (max-width: 768px) {
  #welcome-screen::before { width: 240px; height: 240px; }
}