/* =====================================================================
   GlobalMart Enterprise — Core Stylesheet
   دعم كامل لـ RTL/LTR + مكونات مخصصة
   ===================================================================== */

:root {
  --primary: #1a3255;
  --primary-dark: #0c1a2e;
  --accent: #ff7a00;
}

html[dir="ltr"] body { font-family: 'Inter', sans-serif; }
html[dir="rtl"] body { font-family: 'Cairo', sans-serif; }

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* -------------------- Loading Skeleton -------------------- */
.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------- Product Card Hover -------------------- */
.product-card { transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(79,70,229,.25); }

/* -------------------- Toast Notifications -------------------- */
#toast-container { position: fixed; top: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
html[dir="rtl"] #toast-container { left: 1rem; }
html[dir="ltr"] #toast-container { right: 1rem; }
.toast { animation: toast-in .25s ease; min-width: 260px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------- Chatbot Widget -------------------- */
#chatbot-fab {
  position: fixed; bottom: 1.5rem; z-index: 9998;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(79,70,229,.4); cursor: pointer;
  transition: transform .2s;
}
#chatbot-fab:hover { transform: scale(1.08); }
html[dir="rtl"] #chatbot-fab { left: 1.5rem; }
html[dir="ltr"] #chatbot-fab { right: 1.5rem; }

#chatbot-panel {
  position: fixed; bottom: 5.5rem; z-index: 9998;
  width: 370px; max-width: 92vw; height: 520px; max-height: 75vh;
  background: white; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.2);
  display: none; flex-direction: column; overflow: hidden;
}
html[dir="rtl"] #chatbot-panel { left: 1.5rem; }
html[dir="ltr"] #chatbot-panel { right: 1.5rem; }
#chatbot-panel.open { display: flex; }

.chat-bubble-user { background: var(--primary); color: white; border-radius: 1rem 1rem .25rem 1rem; }
html[dir="rtl"] .chat-bubble-user { border-radius: 1rem 1rem 1rem .25rem; }
.chat-bubble-bot { background: #f1f5f9; color: #1e293b; border-radius: 1rem 1rem 1rem .25rem; }
html[dir="rtl"] .chat-bubble-bot { border-radius: 1rem 1rem .25rem 1rem; }

/* -------------------- Loyalty Badge Glow -------------------- */
.badge-glow { box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.tier-bronze { background: linear-gradient(135deg,#b45309,#92400e); }
.tier-silver { background: linear-gradient(135deg,#94a3b8,#64748b); }
.tier-gold { background: linear-gradient(135deg,#fbbf24,#d97706); }
.tier-platinum { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.tier-diamond { background: linear-gradient(135deg,#38bdf8,#0ea5e9); }

/* -------------------- Map container -------------------- */
.tracking-map { height: 360px; border-radius: .75rem; z-index: 1; }

/* -------------------- RTL flip utilities -------------------- */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
html[dir="rtl"] .rtl-mirror-icon i { transform: scaleX(-1); display: inline-block; }

/* -------------------- Fade-in animation for route transitions -------------------- */
.page-fade { animation: page-fade-in .35s cubic-bezier(.22,.61,.36,1); }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------- Spinner -------------------- */
.spinner { border: 3px solid #e5e7eb; border-top-color: var(--primary); border-radius: 50%; width: 2rem; height: 2rem; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   إضافات v6 — تصميم تفاعلي بأسلوب Amazon / سلة
   ===================================================================== */

/* -------------------- Hero Carousel (بانر رئيسي متحرك تلقائياً) -------------------- */
.hero-carousel { position: relative; overflow: hidden; border-radius: 1rem; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease, transform .7s ease; transform: scale(1.03); pointer-events: none; }
.hero-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; position: relative; }
.hero-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; z-index: 10; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: all .3s; }
.hero-dot.active { background: white; width: 22px; border-radius: 4px; }

/* -------------------- Hero Visual (رسمة متحركة يسار البانر تتغير حسب كل شريحة) -------------------- */
.hero-visual-wrap { position: relative; width: 260px; height: 260px; }
.hero-visual-wrap svg { width: 100%; height: 100%; overflow: visible; }
.hv-orbit { transform-origin: 130px 130px; animation: hv-spin 14s linear infinite; }
.hv-orbit-slow { transform-origin: 130px 130px; animation: hv-spin 22s linear infinite reverse; }
@keyframes hv-spin { to { transform: rotate(360deg); } }
.hv-pulse { animation: hv-pulse-ring 2.6s ease-out infinite; transform-origin: center; }
.hv-pulse-2 { animation-delay: 1.3s; }
@keyframes hv-pulse-ring { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
.hv-float { animation: hv-float 3.2s ease-in-out infinite; transform-origin: center; }
.hv-float-delay { animation-delay: .8s; }
.hv-float-delay-2 { animation-delay: 1.6s; }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hv-swing { animation: hv-swing 3.4s ease-in-out infinite; transform-origin: top center; }
@keyframes hv-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.hv-sparkle { animation: hv-sparkle 1.8s ease-in-out infinite; transform-origin: center; }
.hv-sparkle-2 { animation-delay: .5s; }
.hv-sparkle-3 { animation-delay: 1s; }
@keyframes hv-sparkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.hv-rise { animation: hv-rise 3s ease-in infinite; }
.hv-rise-delay { animation-delay: 1s; }
.hv-rise-delay-2 { animation-delay: 2s; }
@keyframes hv-rise { 0% { transform: translateY(20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
.hv-grow { animation: hv-grow 2.4s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes hv-grow { from { transform: scaleY(.85); } to { transform: scaleY(1); } }
.hv-blink { animation: hv-blink 2s ease-in-out infinite; }
@keyframes hv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* -------------------- Top Announcement Ticker (شريط إعلانات علوي متحرك) -------------------- */
.announce-ticker { overflow: hidden; white-space: nowrap; }
.announce-track { display: inline-flex; gap: 3rem; animation: ticker-scroll 22s linear infinite; }
.announce-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
html[dir="rtl"] .announce-track { animation-name: ticker-scroll-rtl; }
@keyframes ticker-scroll-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* -------------------- Product Card — Quick Actions Overlay -------------------- */
.product-card { position: relative; }
.product-card .quick-actions { position: absolute; top: .5rem; inset-inline-end: .5rem; display: flex; flex-direction: column; gap: .4rem; opacity: 0; transform: translateX(8px); transition: all .25s ease; z-index: 5; }
html[dir="rtl"] .product-card .quick-actions { transform: translateX(-8px); }
.product-card:hover .quick-actions { opacity: 1; transform: translateX(0); }
.quick-action-btn {
  width: 34px; height: 34px; border-radius: 50%; background: white; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; color: #475569; transition: all .2s;
}
.quick-action-btn:hover { background: var(--accent); color: white; transform: scale(1.1); }
.quick-action-btn.active { background: #ef4444; color: white; }

/* شارة الخصم/جديد */
.ribbon-badge {
  position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 5;
  font-size: .68rem; font-weight: 800; padding: .2rem .55rem; border-radius: .4rem; color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); animation: fadeIn .4s ease both;
}
.ribbon-sale { background: #ef4444; }
.ribbon-new { background: #10b981; }
.ribbon-featured { background: var(--accent); }

/* زر "أضف للسلة" — تأثير نبض عند النقر */
.btn-add-cart { transition: transform .15s ease, box-shadow .2s ease; }
.btn-add-cart:active { transform: scale(.93); }
.btn-add-cart.pulse-success { animation: pulse-success .5s ease; }
@keyframes pulse-success { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); } }

/* اهتزاز أيقونة السلة عند الإضافة */
.cart-bump { animation: cart-bump .4s ease; }
@keyframes cart-bump { 0%,100% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(1.1) rotate(4deg); } }

/* -------------------- زر العودة للأعلى -------------------- */
#back-to-top {
  position: fixed; bottom: 1.5rem; z-index: 9997; width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: all .3s ease; cursor: pointer;
}
html[dir="rtl"] #back-to-top { left: 1.5rem; }
html[dir="ltr"] #back-to-top { right: 1.5rem; }
#back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover { transform: translateY(-4px); }

/* -------------------- Category Pills — تمرير أفقي سلس -------------------- */
.category-scroll { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.category-scroll::-webkit-scrollbar { display: none; }
.category-pill {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .75rem 1rem; border-radius: .9rem; background: white; border: 1px solid #e5e7eb; cursor: pointer;
  transition: all .25s ease; min-width: 84px;
}
.category-pill:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 16px -6px rgba(0,0,0,.15); }
.category-pill .cat-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* -------------------- Section reveal on scroll -------------------- */
.reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

/* -------------------- توهج متحرك خلف الصور (Image Aura) -------------------- */
.img-aura-wrap { position: relative; isolation: isolate; }
.img-aura-wrap::before {
  content: ''; position: absolute; inset: -18%; z-index: -1; border-radius: inherit;
  background: conic-gradient(from 0deg, var(--accent), #14b8a6, #60a5fa, var(--accent));
  filter: blur(28px); opacity: .35; animation: aura-spin 6s linear infinite;
}
.product-card:hover .img-aura-wrap::before { opacity: .55; }
@keyframes aura-spin { to { transform: rotate(360deg); } }

/* -------------------- شارات لغة/عملة على شكل "لوغو" دائري -------------------- */
.lang-chip { width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease; }
.lang-chip:hover { transform: scale(1.12); }
.lang-chip.active { border-color: var(--accent); }
.btn-display {
  font-family: 'Tajawal', sans-serif;
  letter-spacing: .3px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-display:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(0,0,0,.28); }
.btn-display:active { transform: translateY(0) scale(.97); }

/* -------------------- بطاقات اختيار نوع الحساب (تسجيل) -------------------- */
.reg-role-tab { border-color: #e5e7eb; color: #6b7280; cursor: pointer; }
.reg-role-tab:hover { border-color: #cbd5e1; transform: translateY(-2px); }

/* -------------------- Buttons: micro-interactions عامة -------------------- */
.btn-animated { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(0,0,0,.25); }
.btn-animated:active { transform: translateY(0) scale(.96); }

/* -------------------- OTP input boxes -------------------- */
.otp-box { width: 3rem; height: 3.4rem; text-align: center; font-size: 1.4rem; font-weight: 800; border: 2px solid #e5e7eb; border-radius: .6rem; transition: border-color .2s; }
.otp-box:focus { border-color: var(--accent); outline: none; }

/* -------------------- Deals page (original design) -------------------- */
.deals-hero { background: linear-gradient(120deg, #b91c1c, #ea580c); }
.deals-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 55%); }
.countdown-box { background: rgba(255,255,255,.18); border-radius: .5rem; padding: .4rem .7rem; font-weight: 800; font-size: 1.2rem; min-width: 2.6rem; text-align: center; backdrop-filter: blur(4px); }
.deal-card { transition: transform .2s ease, box-shadow .2s ease; }
.deal-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.22); }
.deal-stock-bar { height: 5px; border-radius: 4px; background: #f1f1f1; overflow: hidden; }
.deal-stock-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 4px; }

/* -------------------- Welcome banner (first visit) -------------------- */
.welcome-banner { animation: welcome-in .4s cubic-bezier(.22,.61,.36,1); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }