/* ==========================================================================
   IRON PLUS PREMIUM STORE ENHANCEMENT PLATFORM
   COMPLETE CORE STYLING ARCHITECTURE - UNABRIDGED CYBER EDITION V11.0
   STRICT TOTAL BLACK STYLE / CYBER ASSISTANT & FEATURES GRID INJECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL VARIABLES AND STRICT ULTRA BLACK DEFINITIONS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght=400;500;700;900&display=swap');

:root {
  --iron-ultimate-black: #000000;
  --iron-deep-space: #020202;
  --iron-void-gray: #050505;
  --iron-cyber-card-bg: #070707;
  --iron-neon-gold: #ffd700;
  --iron-neon-gold-rgb: 255, 215, 0;
  --iron-neon-cyan: #00e5ff;
  --iron-neon-cyan-rgb: 0, 229, 255;
  --iron-neon-purple: #bd00ff;
  --iron-neon-magenta: #ff0055;
  --iron-glass-background: rgba(4, 4, 4, 0.95);
  --iron-card-border-color: rgba(255, 255, 255, 0.05);
  --iron-text-pure-white: #ffffff;
  --iron-text-cosmic-gray: #a5b1b2;
}

/* --------------------------------------------------------------------------
   2. DOM ROOT RESET AND ABSOLUTE BLACK INJECTION (ELIMINATING ALL WHITE)
   -------------------------------------------------------------------------- */
html, body, root, :root {
  background-color: var(--iron-ultimate-black) !important;
  background: var(--iron-ultimate-black) !important;
  color: var(--iron-text-pure-white) !important;
  font-family: 'Tajawal', sans-serif !important;
}

main, section, header, nav, div, article, aside {
  background-color: transparent;
}

/* إبادة شاملة لأي خلفية بيضاء في القوالب */
.bg-white, .store-header, .site-header, .header-wrapper, .top-nav, .salla-theme-header, .cart-page, .cart-item, .page-wrapper {
  background-color: var(--iron-ultimate-black) !important;
  background: var(--iron-ultimate-black) !important;
}

/* --------------------------------------------------------------------------
   3. FORCE PURE WHITE COLOR ON ALL PRODUCT TEXTS & LABELS
   -------------------------------------------------------------------------- */
.product-box *, .product-card *, .s-product-card *, .product-item *, .s-product-card-entry *, .product-card-component * {
  color: var(--iron-text-pure-white) !important;
}

.product-box .product-title, .product-card .title, .s-product-card .s-product-card-title, [class*="product-card"] [class*="title"], .product-box h3, .product-card h3 {
  color: var(--iron-text-pure-white) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

.product-box .product-price, .product-card .price, .s-product-card .s-product-card-price, [class*="product-card"] [class*="price"], .s-product-card-sale-price {
  color: var(--iron-text-pure-white) !important;
  font-weight: 900 !important;
  font-size: 17px !important;
}

/* --------------------------------------------------------------------------
   4. CART PAGE & QUANTITY FIELDS BLACKOUT
   -------------------------------------------------------------------------- */
.s-cart-quantity, .cart-quantity, [class*="quantity"] input, [class*="quantity-input"], .quantity, .quantity input, .s-quantity-input {
  background-color: var(--iron-ultimate-black) !important;
  background: var(--iron-ultimate-black) !important;
  color: var(--iron-text-pure-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cart-item-wrapper, .s-cart-item, [class*="cart-item"], .cart-summary, .s-cart-summary {
  background: var(--iron-void-gray) !important;
  background-color: var(--iron-void-gray) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   5. NEW: CYBER FEATURES GRID ARCHITECTURE (المميزات الخارقة)
   -------------------------------------------------------------------------- */
.iron-features-grid-section {
  max-width: 1200px !important;
  margin: 40px auto 20px !important;
  padding: 0 20px !important;
  direction: rtl !important;
  display: block !important;
}

.iron-features-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
}

.iron-feature-card {
  background: var(--iron-cyber-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 20px !important;
  padding: 30px 25px !important;
  text-align: center !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.iron-feature-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--iron-neon-cyan) !important;
  box-shadow: 0 20px 40px rgba(0, 229, 255, 0.15) !important;
}

.iron-feature-icon-box {
  font-size: 36px !important;
  margin-bottom: 15px !important;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4)) !important;
  display: inline-block !important;
}

.iron-feature-card h4 {
  color: var(--iron-text-pure-white) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

.iron-feature-card p {
  color: var(--iron-text-cosmic-gray) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   6. NEW: CYBER AI ASSISTANT WIDGET SYSTEM (المساعد التفاعلي الذكي)
   -------------------------------------------------------------------------- */
.iron-cyber-bot-widget {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  z-index: 999999 !important;
  direction: rtl !important;
}

.iron-bot-trigger-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: var(--iron-ultimate-black) !important;
  border: 2px solid var(--iron-neon-gold) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  transition: all 0.3s ease !important;
  animation: botButtonPulse 2s infinite ease-in-out !important;
}

.iron-bot-trigger-btn:hover {
  transform: scale(1.1) rotate(15deg) !important;
  border-color: var(--iron-neon-cyan) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.6) !important;
}

@keyframes botButtonPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

.iron-bot-chat-window {
  position: absolute !important;
  bottom: 75px !important;
  right: 0 !important;
  width: 350px !important;
  max-width: 90vw !important;
  background: rgba(6, 6, 6, 0.98) !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.98) !important;
  display: none !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

.iron-bot-chat-window.chat-open {
  display: flex !important;
}

.iron-bot-chat-header {
  background: var(--iron-cyber-card-bg) !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.iron-bot-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.iron-bot-header-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.iron-bot-header-status {
  font-size: 11px !important;
  color: #00ff66 !important;
  display: block !important;
}

.iron-bot-close-btn {
  background: transparent !important;
  border: none !important;
  color: var(--iron-text-cosmic-gray) !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

.iron-bot-chat-body {
  padding: 20px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.iron-bot-msg {
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 85% !important;
}

.iron-bot-msg.incoming {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  align-self: flex-start !important;
  border-top-right-radius: 2px !important;
}

.iron-bot-msg.outgoing {
  background: var(--iron-neon-gold) !important;
  color: #000000 !important;
  align-self: flex-end !important;
  border-top-left-radius: 2px !important;
  font-weight: 600 !important;
}

.iron-bot-quick-replies {
  padding: 15px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: #030303 !important;
}

.iron-bot-reply-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  color: var(--iron-neon-gold) !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: right !important;
  transition: all 0.2s ease !important;
}

.iron-bot-reply-btn:hover {
  background: var(--iron-neon-gold) !important;
  color: #000000 !important;
  border-color: var(--iron-neon-gold) !important;
}

/* --------------------------------------------------------------------------
   7. CYBER TICKER TAPE DESIGN STRUCTURE
   -------------------------------------------------------------------------- */
.cyber-ticker-wrapper {
  width: 100% !important;
  background: #030303 !important;
  border-top: 1px solid rgba(0, 229, 255, 0.1) !important;
  border-bottom: 1px solid rgba(189, 0, 255, 0.1) !important;
  overflow: hidden !important;
  position: relative !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 30px !important;
  display: block !important;
}

.cyber-ticker-inner {
  display: flex !important;
  white-space: nowrap !important;
  animation: tickerMoveEngine 25s linear infinite !important;
}

.cyber-ticker-item {
  color: var(--iron-neon-cyan) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

.cyber-ticker-item span {
  color: var(--iron-neon-gold) !important;
}

@keyframes tickerMoveEngine {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* --------------------------------------------------------------------------
   8. MOTHERSHIP & HERO GRAPHICS ENGINE WITH LIVE VISITORS
   -------------------------------------------------------------------------- */
#iron-top-section {
  position: relative !important;
  background: radial-gradient(circle at center, #050505 0%, #000000 100%) !important;
  padding-top: 140px !important;
  padding-bottom: 40px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: center !important;
  direction: rtl !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95) !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.iron-massive-mothership {
  position: absolute !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 72px !important;
  z-index: 20 !important;
  filter: drop-shadow(0 0 25px var(--iron-neon-cyan)) drop-shadow(0 0 40px var(--iron-neon-purple)) !important;
  animation: mothershipHeavyFlight 6s ease-in-out infinite !important;
}

.mothership-laser-beams {
  position: absolute !important;
  top: 75px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 260px !important;
  height: 160px !important;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.25) 0%, transparent 100%) !important;
  clip-path: polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%) !important;
  animation: mothershipLaserPulse 3s ease-in-out infinite !important;
}

@keyframes mothershipHeavyFlight {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes mothershipLaserPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

#iron-top-section .welcome-text {
  font-size: 36px !important;
  font-weight: 900 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2) !important;
  display: block !important;
}

.iron-live-visitors-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 229, 255, 0.05) !important;
  border: 1px solid rgba(0, 229, 255, 0.2) !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--iron-neon-cyan) !important;
  margin-bottom: 45px !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.1) !important;
}

.iron-live-visitors-badge .pulse-dot {
  width: 8px !important;
  height: 8px !important;
  background-color: #00ff66 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #00ff66 !important;
  animation: visitorDotPulse 1.5s infinite ease-in-out !important;
}

@keyframes visitorDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   9. COUNTERS BLOCKS LAYOUT (RATING FIXED TO 5.0)
   -------------------------------------------------------------------------- */
#iron-top-section .counters-container {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
}

#iron-top-section .counter-box {
  background: var(--iron-glass-background) !important;
  backdrop-filter: blur(20px) !important;
  padding: 45px 35px !important;
  border-radius: 32px !important;
  min-width: 260px !important;
  border: 1px solid var(--iron-card-border-color) !important;
  transition: transform 0.6s ease !important;
}

#iron-top-section .counter-box:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#iron-top-section .counter-box.rating-special-card {
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
}

#iron-top-section .rating-special-card .neon-bulb {
  width: 10px !important;
  height: 10px !important;
  background-color: var(--iron-neon-gold) !important;
  border-radius: 50% !important;
  margin: -15px auto 20px !important;
  box-shadow: 0 0 15px var(--iron-neon-gold) !important;
}

#iron-top-section .counter-number {
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
}

#iron-top-section .rating-special-card .counter-number {
  color: var(--iron-neon-gold) !important;
}

#iron-top-section .counter-label {
  font-size: 16px !important;
  color: var(--iron-text-cosmic-gray) !important;
  font-weight: 600 !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   10. SALLA PRODUCT CARDS CYBER DESIGN HOVER ENGINE
   -------------------------------------------------------------------------- */
.product-box, .product-card, .s-product-card, .product-item, .s-product-card-entry, .product-card-component, [class*="product-card"], [class*="product-box"] {
  position: relative !important;
  background: rgba(4, 4, 4, 0.99) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform, border-color, box-shadow !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.product-box:hover, .product-card:hover, .s-product-card:hover, .product-item:hover, .s-product-card-entry:hover {
  transform: translateY(-15px) scale(1.02) !important;
  border-color: var(--iron-neon-gold) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.98), 0 0 40px rgba(255, 215, 0, 0.35) !important;
  z-index: 99 !important;
}

.product-box:hover img, .product-card:hover img, .s-product-card:hover img, .s-product-card-entry:hover img {
  transform: scale(1.08) !important;
  filter: brightness(1.15) !important;
}

.product-box img, .product-card img, .s-product-card img, .s-product-card-entry img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease !important;
}

.product-box::after, .product-card::after, .s-product-card::after, .s-product-card-entry::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 24px !important;
  padding: 2px !important;
  background: linear-gradient(135deg, var(--iron-neon-cyan), transparent, var(--iron-neon-gold)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.product-box:hover::after, .product-card:hover::after, .s-product-card:hover::after, .s-product-card-entry:hover::after { opacity: 1 !important; }

/* --------------------------------------------------------------------------
   11. LIVE SALES POPUP NOTIFICATIONS SYSTEM
   -------------------------------------------------------------------------- */
.iron-live-popup-notification {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  background: rgba(5, 5, 5, 0.98) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  padding: 15px 20px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.95) !important;
  z-index: 99999 !important;
  transform: translateY(150px) scale(0.9) !important;
  opacity: 0 !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease !important;
  direction: rtl !important;
  pointer-events: none !important;
  width: 340px !important;
  max-width: 90% !important;
}

.iron-live-popup-notification.popup-active {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.iron-popup-avatar {
  width: 45px !important;
  height: 45px !important;
  background: radial-gradient(circle, #111 0%, #000 100%) !important;
  border: 1px solid var(--iron-neon-gold) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
}

.iron-popup-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.iron-popup-title {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.iron-popup-title span {
  color: var(--iron-neon-gold) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   12. MOBILE & RESPONSIVE MEDIA QUERIES MANAGEMENT
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .iron-features-container { grid-template-columns: 1fr !important; gap: 15px !important; }
}

@media (max-width: 768px) {
  #iron-top-section { padding-top: 120px !important; }
  .iron-massive-mothership { font-size: 46px !important; }
  #iron-top-section .counter-box { min-width: 46% !important; padding: 25px 15px !important; }
  .iron-live-popup-notification { left: 15px !important; bottom: 15px !important; right: 15px !important; max-width: calc(100% - 30px) !important; }
}
/* ==========================================================================
   IRON PLUS STORE - GLOBAL UI STYLES V15.0
   ========================================================================== */

/* 1. إعدادات الشبكة الفضائية واللون العام */
body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 2. تنسيق كروت المنتجات والعداد الذكي */
.iron-stock-badge {
    background: rgba(255, 0, 85, 0.15) !important;
    border: 1px solid #ff0055 !important;
    color: #ff0055 !important;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
    padding: 6px !important;
    border-radius: 6px;
    display: inline-block;
}

/* 3. تنسيق قسم الـ Hero والعدادات */
#iron-top-section {
    position: relative;
    padding: 60px 20px;
    text-align: center;
    background: #000;
    overflow: hidden;
}

.counters-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.counter-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    min-width: 120px;
}

.counter-number {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}

/* 4. تنسيق شريط نفاذ الكمية */
.iron-scarcity-ticker-bar {
    background: linear-gradient(90deg, #ff0055, #8a002d);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 800px;
}

.iron-timer-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 24px;
    margin-top: 5px;
}

/* 5. تنسيق إشعارات المبيعات */
.iron-live-popup-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #111;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 10px;
    display: none;
    z-index: 9999;
}

.iron-live-popup-notification.popup-active {
    display: flex;
    animation: slideIn 0.5s forwards;
}

/* 6. تنسيق المساعد الذكي */
.iron-cyber-bot-widget {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9998;
}

.iron-bot-trigger-btn {
    background: #007bff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* 7. تأثيرات الحركة (Animations) */
@keyframes slideIn {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 8. فرض اللون الأسود على عناصر Salla */
.s-product-card, .product-box {
    background-color: #050505 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    transition: 0.3s;
}

.s-product-card:hover {
    border-color: #ffd700 !important;
    transform: translateY(-10px);
}