/* ==========================================================================
   🎨 UVINA / Youvina - CSS محدّث مع إصلاح مشكلة النصوص الطويلة
   ✅ يحل مشكلة اقتطاع أسماء الأقسام في الموبايل
   ========================================================================== */

/* (احتفظ بكل المتغيرات والإعدادات السابقة من الملف الأصلي) */
:root {
  /* === متغيرات Easy Orders الأصلية (مُعدّلة) === */
  --ann-bg: #02C7CF;
  --ann-text: #FFFFFF;
  --hd-bg: #FFFFFF;
  --hd-text: #0A1640;
  --body-bg: #FFFFFF;
  --body-text: #0A1640;
  --ft-bg: #0A1640;
  --ft-text: #FFFFFF;
  --color-primary: #EF2F72;
  --buy-btn-bg: #EF2F72;
  --buy-btn-border: #EF2F72;
  --buy-btn-text: #FFFFFF;
  --crt-btn-bg: #02C7CF;
  --crt-btn-border: #02C7CF;
  --crt-btn-text: #FFFFFF;
  --input-bg: #FFFFFF;
  --input-border: #E5E8EE;
  --input-text: #0A1640;
  --checkout-form-bg: #F8F5F2;
  --checkout-heading-text: #0A1640;
  --product-name-text: #0A1640;
  --product-price-text: #02C7CF;
  --product-sale-price-text: #EF2F72;
  --ab-header-category-bg: #FFFFFF;
  --ab-header-category-text: #0A1640;
  --ab-product-card-bg: #FFFFFF;
  --ab-sale-badge-bg: #EF2F72;
  --ab-sale-badge-text: #FFFFFF;
  --ab-footer-subscribe-color: #02C7CF;
  --ab-featured-hero-cta-bg: #EF2F72;
  --ab-featured-hero-cta-text: #FFFFFF;
  --ab-featured-hero-subtitle-color: #0A1640;
  --ab-pgrid-hero-cta-color: #02C7CF;
  --ab-checkout-shipping-note: #0A1640;
}

/* ==========================================================================
   🔧 الإصلاح الرئيسي: منع اقتطاع النصوص الطويلة
   ========================================================================== */

/* إزالة ال ellipsis من جميع عناصر الأقسام والمنتجات */
.ab-categories,
.ab-categories *,
.ab-cat-card,
.ab-cat-card *,
.ab-cat-name,
.ab-cat-title,
[class*="category"] h1,
[class*="category"] h2,
[class*="category"] h3,
[class*="category"] h4,
[class*="category"] p,
[class*="category"] span,
[class*="category"] a,
[class*="cat-"] h1,
[class*="cat-"] h2,
[class*="cat-"] h3,
[class*="cat-"] h4,
[class*="cat-"] p,
[class*="cat-"] span,
[class*="cat-"] a {
  /* السماح بالتفاف النص على سطرين */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  display: block !important;
  -webkit-box-orient: horizontal !important;
  text-align: center !important;
}

/* تخصيص أسماء الأقسام في الصفحة الرئيسية */
.ab-cat-card .ab-cat-name,
.ab-cat-card h1,
.ab-cat-card h2,
.ab-cat-card h3,
.ab-cat-card h4,
.ab-cat-card p,
.ab-categories h1,
.ab-categories h2,
.ab-categories h3,
.ab-categories h4,
.ab-categories p {
  /* خصائص النص */
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0A1640 !important;
  line-height: 1.4 !important;
  /* السماح بسطرين كحد أقصى */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  /* محاذاة وسط */
  text-align: center !important;
  /* هوامش مناسبة */
  padding: 0 4px !important;
  margin-top: 8px !important;
  min-height: 36px !important;
  max-height: 40px !important;
}

/* ==========================================================================
   1️⃣ شريط الإعلانات (Announcement Bar)
   ========================================================================== */
.ab-announce {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  height: 42px !important;
  background: linear-gradient(90deg, #02C7CF 0%, #019AA1 100%) !important;
  box-shadow: 0 2px 8px rgba(2, 199, 207, 0.25);
}

.ab-announce a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
  transition: all 0.25s ease;
}

.ab-announce a:hover {
  border-bottom-color: #FFFFFF;
  opacity: 0.9;
}

.ab-ann-simple,
.ab-ann-marquee-item {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.ab-ann-sep {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
}

/* ==========================================================================
   2️⃣ الهيدر (Header)
   ========================================================================== */
.ab-header {
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(10, 22, 64, 0.08) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(10, 22, 64, 0.06) !important;
  margin: 12px auto !important;
  width: calc(100% - 24px) !important;
  max-width: inherit !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ab-header.ab-hidden {
  transform: translateY(calc(-100% - 50px)) !important;
}

.ab-header-inner {
  height: 64px !important;
  padding: 0 24px !important;
  gap: 20px !important;
}

.ab-logo { font-weight: 800 !important; }
.ab-logo img { max-height: 40px !important; max-width: min(220px, 28vw) !important; }
.ab-logo-text { font-size: 36px !important; font-weight: 700 !important; color: #0A1640 !important; letter-spacing: -0.02em !important; }

.ab-nav { gap: clamp(16px, 2vw, 36px) !important; }

.ab-nav > a,
.ab-nav .ab-dropdown-trigger {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #0A1640 !important;
  padding: 6px 0 !important;
  position: relative;
  transition: all 0.25s ease !important;
}

.ab-nav > a::after,
.ab-nav .ab-dropdown-trigger::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #02C7CF 0%, #EF2F72 100%) !important;
  border-radius: 2px !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 auto !important;
}

.ab-nav > a:hover,
.ab-nav .ab-dropdown-trigger:hover { color: #EF2F72 !important; opacity: 1 !important; }
.ab-nav > a:hover::after,
.ab-nav .ab-dropdown-trigger:hover::after { width: 100% !important; }

.ab-dropdown-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(10, 22, 64, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(10, 22, 64, 0.15) !important;
  min-width: 200px !important;
}

.ab-dropdown-panel > a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0A1640 !important;
  padding: 12px 20px !important;
  transition: all 0.2s ease !important;
  background: #FFFFFF !important;
}

.ab-dropdown-panel > a:hover {
  background: linear-gradient(90deg, rgba(2, 199, 207, 0.08) 0%, rgba(239, 47, 114, 0.08) 100%) !important;
  color: #EF2F72 !important;
  padding-inline-start: 24px !important;
}

.ab-header-category {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E8EE !important;
  border-bottom: 2px solid #02C7CF !important;
  padding: 12px 20px !important;
  box-shadow: 0 2px 6px rgba(10, 22, 64, 0.04);
}

.ab-header-category a,
.ab-header-category button {
  color: #0A1640 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  white-space: normal !important;
}

.ab-header-category a:hover,
.ab-header-category button:hover {
  background: rgba(2, 199, 207, 0.1) !important;
  color: #02C7CF !important;
}

.ab-header-category a.active,
.ab-header-category button.active {
  background: #02C7CF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.ab-right { gap: 12px !important; }

.ab-right-links a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0A1640 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.ab-right-links a:hover {
  background: rgba(2, 199, 207, 0.1) !important;
  color: #02C7CF !important;
  opacity: 1 !important;
}

.ab-icon-btn {
  width: 38px !important;
  height: 38px !important;
  background: #F4F5F8 !important;
  border-radius: 10px !important;
  color: #0A1640 !important;
  transition: all 0.25s ease !important;
}

.ab-icon-btn:hover {
  background: #02C7CF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 199, 207, 0.3);
}

.ab-icon-btn.cart-btn {
  background: linear-gradient(135deg, #02C7CF 0%, #019AA1 100%) !important;
  color: #FFFFFF !important;
}

.ab-icon-btn.cart-btn:hover {
  background: linear-gradient(135deg, #019AA1 0%, #02C7CF 100%) !important;
  transform: translateY(-2px) scale(1.05);
}

.ab-cart-count {
  background: #EF2F72 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(239, 47, 114, 0.4);
}

.ab-hamburger {
  background: #F4F5F8 !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  color: #0A1640 !important;
  transition: all 0.25s ease !important;
}

.ab-hamburger:hover { background: #EF2F72 !important; color: #FFFFFF !important; }

.ab-mobile-menu {
  background: #FFFFFF !important;
  border-left: 1px solid rgba(10, 22, 64, 0.08) !important;
  box-shadow: -10px 0 40px rgba(10, 22, 64, 0.15) !important;
}

/* هيدر قائمة الموبايل: أبيض مثل الديسكتوب */
.ab-mobile-menu-header {
  background: #FFFFFF !important;
  color: #0A1640 !important;
  padding: 20px !important;
  border-bottom: 1px solid #E5E8EE !important;
  box-shadow: 0 4px 14px rgba(10, 22, 64, 0.06) !important;
}

/* تأكيد ظهور اللوجو بشكل واضح داخل هيدر قائمة الموبايل */
.ab-mobile-menu-header .ab-logo,
.ab-mobile-menu-header .ab-logo-text,
.ab-mobile-menu-header a {
  color: #0A1640 !important;
}

.ab-mobile-menu-header img {
  max-height: 42px !important;
  object-fit: contain !important;
}

.ab-mobile-nav a,
.ab-mobile-nav .ab-dropdown-trigger {
  color: #0A1640 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #E5E8EE !important;
  transition: all 0.2s ease !important;
}

.ab-mobile-nav a:hover,
.ab-mobile-nav .ab-dropdown-trigger:hover {
  background: linear-gradient(90deg, rgba(2, 199, 207, 0.08) 0%, rgba(239, 47, 114, 0.08) 100%) !important;
  color: #EF2F72 !important;
  padding-inline-start: 28px !important;
}

.ab-mobile-close {
  background: #F4F5F8 !important;
  color: #0A1640 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transition: all 0.2s ease !important;
}

.ab-mobile-close:hover {
  background: #EF2F72 !important;
  color: #FFFFFF !important;
}

.ab-mobile-overlay { background: rgba(10, 22, 64, 0.5) !important; backdrop-filter: blur(4px); }

/* ==========================================================================
   3️⃣ جسم الموقع
   ========================================================================== */
body {
  background: #FFFFFF !important;
  color: #0A1640 !important;
  font-family: 'Cairo', 'Tajawal', 'Inter', sans-serif !important;
}

.app_container, .content_container { background: #FFFFFF !important; color: #0A1640 !important; }

/* ==========================================================================
   4️⃣ الفوتر
   ========================================================================== */
footer, .ab-footer, .site-footer {
  background: linear-gradient(180deg, #02C7CF 0%, #06091F 100%) !important;
  color: #FFFFFF !important;
  padding: 60px 20px 0 !important;
}

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

footer a, .ab-footer a, .site-footer a { color: rgba(255, 255, 255, 0.85) !important; transition: all 0.25s ease !important; }
footer a:hover, .ab-footer a:hover, .site-footer a:hover { color: #02C7CF !important; padding-inline-start: 4px !important; }

/* ==========================================================================
   5️⃣ زر الشراء
   ========================================================================== */
button.bg-skin-primary, .btn-buy, [class*="buy-btn"] {
  background: linear-gradient(135deg, #EF2F72 0%, #C71E5A 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #EF2F72 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 20px rgba(239, 47, 114, 0.35) !important;
}

button.bg-skin-primary:hover, .btn-buy:hover {
  background: linear-gradient(135deg, #C71E5A 0%, #EF2F72 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(239, 47, 114, 0.5) !important;
}

button.border-skin-primary {
  background: #FFFFFF !important;
  color: #EF2F72 !important;
  border: 2px solid #EF2F72 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
}

button.border-skin-primary:hover { background: #EF2F72 !important; color: #FFFFFF !important; }

/* ==========================================================================
   6️⃣ زر السلة
   ========================================================================== */
button.add-to-cart, button[data-action="add-to-cart"], .add-to-cart-btn {
  background: linear-gradient(135deg, #02C7CF 0%, #019AA1 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #02C7CF !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  box-shadow: 0 6px 20px rgba(2, 199, 207, 0.35) !important;
}

button.add-to-cart:hover, .add-to-cart-btn:hover {
  background: linear-gradient(135deg, #019AA1 0%, #02C7CF 100%) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   7️⃣ النماذج
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E8EE !important;
  color: #0A1640 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-family: inherit !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  outline: none !important;
  border-color: #02C7CF !important;
  box-shadow: 0 0 0 4px rgba(2, 199, 207, 0.15) !important;
}

input::placeholder, textarea::placeholder { color: #9BA3B5 !important; }

.checkout-form, .form-section, [class*="checkout"] form {
  background: #F8F5F2 !important;
  border-radius: 16px !important;
  padding: 32px !important;
  border: 1px solid #E5E8EE !important;
}

/* ==========================================================================
   8️⃣ بطاقات المنتج
   ========================================================================== */
.product-card, .ab-product-card, [class*="product-card"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E8EE !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(10, 22, 64, 0.04) !important;
}

.product-card:hover, .ab-product-card:hover {
  border-color: #02C7CF !important;
  transform: translateY(-4px) !important;
}

.product-name, .ab-pd-name, h3.product-title, [data-product-name] {
  color: #0A1640 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.product-price, .ab-pd-price, .price, [data-product-price] {
  color: #02C7CF !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.product-sale-price, .sale-price, .ab-pd-sale-price {
  color: #EF2F72 !important;
  font-weight: 800 !important;
  font-size: 19px !important;
}

.product-original-price, .old-price, .price--old {
  color: #9BA3B5 !important;
  font-size: 14px !important;
  text-decoration: line-through !important;
}

.sale-badge, .ab-sale-badge, .discount-badge {
  background: #EF2F72 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
}

.stars-wrapper svg, .rating-star, .ab-review-stars svg { color: #F59E0B !important; fill: #F59E0B !important; }

/* ==========================================================================
   9️⃣ عناصر إضافية
   ========================================================================== */
.text-skin-primary, [class*="text-primary"] { color: #EF2F72 !important; }
.border-skin-primary { border-color: #EF2F72 !important; }

a { color: #0A1640 !important; text-decoration: none !important; }
a:hover { color: #EF2F72 !important; }

.collection_container, .product_container, main { padding-top: 130px !important; }

/* ==========================================================================
   📱 إصلاحات الموبايل - الأهم!
   ========================================================================== */
@media (max-width: 768px) {
  /* 🔧 الحل الجذري لمشكلة اقتطاع النصوص في الموبايل */
  .ab-categories,
  .ab-cat-card,
  [class*="category-card"],
  [class*="cat-card"] {
    padding: 8px !important;
    gap: 8px !important;
  }

  /* 🔧 إصلاح اسم القسم - السماح بسطرين مع ellipsis أنيق */
  .ab-cat-card .ab-cat-name,
  .ab-cat-card h1,
  .ab-cat-card h2,
  .ab-cat-card h3,
  .ab-cat-card h4,
  .ab-cat-card p,
  .ab-categories h1,
  .ab-categories h2,
  .ab-categories h3,
  .ab-categories h4,
  .ab-categories p,
  [class*="cat-card"] h1,
  [class*="cat-card"] h2,
  [class*="cat-card"] h3,
  [class*="cat-card"] h4,
  [class*="cat-card"] p,
  [class*="cat-card"] span,
  [class*="cat-card"] a {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    /* السماح بسطرين كحد أقصى مع نقاط */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* محاذاة وسط وعرض كامل */
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    /* هوامش ومسافات */
    padding: 6px 4px !important;
    margin: 0 !important;
    min-height: 32px !important;
    max-height: 36px !important;
    /* منع الكسر السيء للكلمات */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }

  /* الحاوية الرئيسية للأقسام */
  .collection_container, .product_container, main { padding-top: 110px !important; }

  .ab-header { margin: 8px auto !important; width: calc(100% - 16px) !important; border-radius: 12px !important; }
  .ab-header-inner { height: 56px !important; padding: 0 16px !important; }

  .ab-announce { font-size: 13px !important; height: 38px !important; }

  /* إخفاء عناوين الأقسام في هيدر الموبايل والاكتفاء بزر القائمة فقط */
  .ab-nav,
  .ab-header-category {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* بعد إخفاء شريط الأقسام نقلل المسافة العلوية للمحتوى */
  .collection_container,
  .product_container,
  main {
    padding-top: 88px !important;
  }
}

/* ==========================================================================
   📱 إصلاحات الشاشات الصغيرة جداً (أقل من 480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* خط أصغر قليلاً للأقسام في الشاشات الصغيرة */
  .ab-cat-card .ab-cat-name,
  .ab-categories h1, .ab-categories h2, .ab-categories h3, .ab-categories h4, .ab-categories p,
  [class*="cat-card"] h1, [class*="cat-card"] h2, [class*="cat-card"] h3,
  [class*="cat-card"] h4, [class*="cat-card"] p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    min-height: 28px !important;
    max-height: 32px !important;
  }
}

/* ==========================================================================
   🌙 تأثيرات إضافية
   ========================================================================== */
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid #02C7CF !important; outline-offset: 2px !important; }

/* ==========================================================================
   📋 ملخص الإصلاحات
   ==========================================================================

   🔧 المشكلة: أسماء الأقسام الطويلة يتم اقتطاعها بـ "..."
   ✅ الحل: السماح للنص بالالتفاف على سطرين كحد أقصى مع نقاط أنيقة

   📐 السلوك الجديد:
   - "منتجات التجميل" → سطر واحد (لأنه قصير)
   - "العناية بالأم والطفل" → سطرين (لأنه طويل)
   - "العناية بالبشرة" → سطر واحد
   - النصوص لا تخرج عن الإطار أبداً

   📱 متجاوب مع جميع أحجام الشاشات
   ========================================================================== */