/* =====================================================
   CUTE NIGHT — CSS v5.0 | Athena Real Classes
   مبني على الـ classes الحقيقية من Developer Tools
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400&display=swap');

/* ─────────────────────────────────────
   المتغيرات
───────────────────────────────────── */
:root {
  --cn-navy:            #133951;
  --cn-dark:            #171A1D;
  --cn-bar:             #1a3448;
  --cn-bg:              #faf9f7;
  --cn-white:           #ffffff;
  --cn-rose:            #c47b8a;
  --cn-rose-light:      #f5e8eb;
  --cn-rose-border:     #e8c8d0;
  --cn-border:          #e4ddd7;
  --cn-muted:           #7a8e9a;
  --cn-light-text:      #c8d8e4;
  --cn-shadow:          0 4px 16px rgba(19,57,81,0.06);
  --cn-shadow-hover:    0 8px 24px rgba(19,57,81,0.10);
  --cn-radius:          16px;
}

/* =====================================================
   1. GLOBAL
   ===================================================== */

html, body {
  font-family: 'Tajawal', sans-serif !important;
  background-color: var(--cn-bg) !important;
  color: var(--cn-dark) !important;
  font-weight: 300 !important;
}

section,
.s-block,
.s-block-wrapper,
.s-block--default,
.s-block--categories,
.s-block--products,
.s-block--banners,
.s-block--fixed-banner,
.s-block--slider,
.s-block--best-offers {
  background-color: var(--cn-bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Tajawal', sans-serif !important;
  color: var(--cn-navy) !important;
  font-weight: 300 !important;
}

a {
  font-family: 'Tajawal', sans-serif !important;
  transition: color 0.2s ease !important;
}

a:hover { color: var(--cn-rose) !important; }

/* =====================================================
   2. ANNOUNCEMENT BAR
   ===================================================== */

.announcement-bar,
.top-navbar,
.s-announcement-bar,
.salla-theme_announcement,
.store-notice,
div[class*="announcement"],
div[class*="top-bar"] {
  background-color: var(--cn-bar) !important;
  color: var(--cn-light-text) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
}

.announcement-bar *,
div[class*="announcement"] * {
  color: var(--cn-light-text) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* إبطاء الحركة */
.announcement-bar [class*="marquee"],
div[class*="announcement"] [class*="ticker"] {
  animation-duration: 40s !important;
}

/* =====================================================
   3. HEADER
   ===================================================== */

header,
.store-header,
.main-nav-container,
.navbar {
  background-color: var(--cn-bg) !important;
  border-bottom: 0.5px solid var(--cn-border) !important;
  box-shadow: none !important;
}

.main-menu a,
.navbar a,
.store-header a {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  color: var(--cn-dark) !important;
}

.main-menu a:hover,
.navbar a:hover { color: var(--cn-rose) !important; }

.store-header svg,
.navbar svg,
.main-nav-container svg {
  stroke: var(--cn-navy) !important;
  stroke-width: 1.5 !important;
  fill: none !important;
  opacity: 0.8 !important;
}

/* =====================================================
   4. HERO
   ===================================================== */

.s-slider-block__title,
[class*="hero-title"],
[class*="slider"] h1,
[class*="slider"] h2 {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--cn-navy) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  margin-top: 16px !important;
}

/* =====================================================
   5. ═══ PRODUCT CARDS — الـ Classes الحقيقية ═══
   ===================================================== */

/* الغلاف الخارجي */
.athena-card-wrapper {
  border-radius: var(--cn-radius) !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

/* البطاقة الداخلية */
.athena-card {
  background-color: var(--cn-white) !important;
  border: 0.5px solid var(--cn-rose-border) !important;
  border-radius: var(--cn-radius) !important;
  box-shadow: var(--cn-shadow) !important;
  overflow: hidden !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.athena-card:hover {
  border-color: var(--cn-rose) !important;
  box-shadow: var(--cn-shadow-hover) !important;
}

.athena-card-wrapper:hover {
  transform: translateY(-2px) !important;
}

/* منطقة الصورة */
.athena-image-container {
  background-color: var(--cn-bg) !important;
  border-radius: var(--cn-radius) var(--cn-radius) 0 0 !important;
  overflow: hidden !important;
}

.athena-image-container img,
.athena-image {
  border-radius: var(--cn-radius) var(--cn-radius) 0 0 !important;
  transition: transform 0.3s ease !important;
}

.athena-card:hover .athena-image,
.athena-card:hover .athena-image-container img {
  transform: scale(1.02) !important;
}

/* محتوى البطاقة */
.athena-card-content {
  background-color: var(--cn-white) !important;
  padding: 10px 12px 12px !important;
  border-radius: 0 0 var(--cn-radius) var(--cn-radius) !important;
}

/* اسم المنتج داخل البطاقة */
.athena-card-content h3,
.athena-card-content .title,
.athena-card-content [class*="title"],
.athena-card-content [class*="name"] {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--cn-dark) !important;
  line-height: 1.5 !important;
}

/* السعر */
.athena-card-content [class*="price"],
.athena-card-content salla-price,
.athena-card-content .price {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  color: var(--cn-rose) !important;
  font-size: 14px !important;
}

/* ───── زر إضافة للسلة الحقيقي ───── */

/* زر الإضافة العلوي (فوق الصورة) */
.athena-desktop-add-btn,
.athena-desktop-add-btn button,
.athena-action-buttons button {
  background-color: var(--cn-rose-light) !important;
  color: var(--cn-dark) !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  transition: background-color 0.2s !important;
}

.athena-desktop-add-btn:hover button,
.athena-desktop-add-btn button:hover,
.athena-action-buttons button:hover {
  background-color: #ecd5d8 !important;
}

/* زر "إضافة للسلة" الظاهر تحت الصورة */
.athena-card-content button,
.athena-card-content .s-button-btn,
.athena-card-content salla-add-product-button,
.athena-card-content [class*="add"],
custom-salla-product-card .athena-card-content button {
  background-color: var(--cn-rose-light) !important;
  color: var(--cn-dark) !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  width: 100% !important;
  padding: 8px !important;
}

/* النص داخل الزر */
.athena-card-content button *,
.athena-desktop-add-btn * {
  color: var(--cn-dark) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* custom-salla-product-card الغلاف الكلي */
custom-salla-product-card {
  display: block !important;
  border-radius: var(--cn-radius) !important;
  overflow: hidden !important;
}

/* =====================================================
   6. SALE COUNT DOWN
   ===================================================== */

.athena-sale-count-down-container {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
}

/* =====================================================
   7. CATEGORY CARDS
   ===================================================== */

.s-category-card,
.category-card,
.s-block--categories .s-block__item {
  background-color: var(--cn-white) !important;
  border-radius: var(--cn-radius) !important;
  border: 0.5px solid var(--cn-border) !important;
  box-shadow: var(--cn-shadow) !important;
  overflow: hidden !important;
  transition: all 0.22s ease !important;
}

.s-category-card:hover,
.category-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--cn-rose-border) !important;
  box-shadow: var(--cn-shadow-hover) !important;
}

.s-category-card span,
.s-category-card h3,
.category-card span {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--cn-dark) !important;
}

/* =====================================================
   8. BUTTONS العامة
   ===================================================== */

button, .btn, .button,
.s-button-btn, .s-button-primary {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  border-radius: var(--cn-radius) !important;
  transition: all 0.22s ease !important;
}

.s-button-primary,
.btn-primary,
button[type="submit"],
.s-cart-summary-button,
.checkout-button {
  background-color: var(--cn-dark) !important;
  color: var(--cn-bg) !important;
  border: none !important;
}

.s-button-primary:hover,
.btn-primary:hover,
.checkout-button:hover {
  background-color: var(--cn-navy) !important;
  box-shadow: 0 6px 16px rgba(19,57,81,0.14) !important;
}

/* =====================================================
   9. BANNERS
   ===================================================== */

.s-block--banners img,
.s-block--fixed-banner img,
.s-slider-block img,
.s-slider-container img {
  border-radius: 24px !important;
}

.swiper-pagination-bullet {
  background-color: rgba(19,57,81,0.25) !important;
}
.swiper-pagination-bullet-active {
  background-color: var(--cn-navy) !important;
}

/* =====================================================
   10. INPUTS
   ===================================================== */

input, textarea, select {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 300 !important;
  border: 0.5px solid var(--cn-border) !important;
  border-radius: 10px !important;
  background-color: var(--cn-white) !important;
  color: var(--cn-dark) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--cn-navy) !important;
  box-shadow: 0 0 0 2px rgba(19,57,81,0.08) !important;
  outline: none !important;
}

/* =====================================================
   11. FOOTER
   ===================================================== */

footer, .store-footer, .s-footer,
.footer, .footer-main, .footer-top,
.footer-content, .footer-wrapper,
.store-footer__inner, .store-footer__top,
.store-footer__content,
.store-footer .container,
footer .container {
  background-color: var(--cn-navy) !important;
  color: var(--cn-light-text) !important;
}

footer > div, .store-footer > div,
.s-footer > div {
  background-color: transparent !important;
}

footer *, .store-footer *,
.s-footer *, .footer-content * {
  font-family: 'Tajawal', sans-serif !important;
  color: var(--cn-light-text) !important;
}

footer h3, footer h4,
.store-footer h3, .store-footer h4 {
  color: #ffffff !important;
  font-weight: 400 !important;
}

footer a, .store-footer a, .s-footer a {
  color: var(--cn-light-text) !important;
  opacity: 0.9;
}

footer a:hover, .store-footer a:hover {
  color: #ffffff !important;
  opacity: 1;
}

footer svg, .store-footer svg, .s-footer svg {
  stroke: var(--cn-light-text) !important;
  fill: none !important;
}

.store-footer__bottom, .footer-bottom,
.copyright {
  background-color: #0F3045 !important;
  border-top: 0.5px solid rgba(255,255,255,0.10) !important;
}

/* =====================================================
   12. MOBILE
   ===================================================== */

@media (max-width: 768px) {

  .s-block {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  h1, .s-slider-block__title {
    font-size: 22px !important;
    font-weight: 300 !important;
    text-align: center !important;
  }

  h2, .s-block__title {
    font-size: 17px !important;
    font-weight: 300 !important;
  }

  .athena-card {
    border-radius: var(--cn-radius) !important;
  }

  .athena-image-container,
  .athena-image-container img {
    border-radius: var(--cn-radius) var(--cn-radius) 0 0 !important;
  }

  .container, .s-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =====================================================
   END — CuteNight CSS v5.0
   الـ classes مأخوذة مباشرة من Developer Tools
   ===================================================== */


/* =====================================================
   PATCH v5.1 — تعديلات بعد المراجعة
   ===================================================== */

/* ─────────────────────────────────────
   1. زر "إضافة للسلة" — تصغير على الموبايل
   خلفية شفافة تندمج مع البطاقة
───────────────────────────────────── */

/* الزر بشكل عام — خلفية شفافة + حواف حادة */
.athena-card-content button,
.athena-card-content .s-button-btn,
.athena-card-content salla-add-product-button,
.s-product-card-content-footer button,
.s-product-card-content-footer .s-button-btn,
.add-to-cart {
  background-color: transparent !important;
  color: var(--cn-dark) !important;
  border: 0.5px solid var(--cn-rose-border) !important;
  border-radius: 0 0 var(--cn-radius) var(--cn-radius) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  width: 100% !important;
  padding: 10px !important;
  font-size: 13px !important;
  transition: background-color 0.2s !important;
  margin: 0 !important;
}

.athena-card-content button:hover,
.s-product-card-content-footer button:hover {
  background-color: var(--cn-rose-light) !important;
}

/* الموبايل — تصغير زر الإضافة */
@media (max-width: 768px) {
  .athena-card-content button,
  .athena-card-content .s-button-btn,
  .s-product-card-content-footer button,
  .add-to-cart {
    font-size: 11px !important;
    padding: 7px 8px !important;
    min-height: 34px !important;
  }

  /* أيقونة السلة داخل الزر */
  .athena-card-content button svg,
  .s-product-card-content-footer button svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* ─────────────────────────────────────
   2. الكتيجوري — مستطيل بإطار بدل دائري
───────────────────────────────────── */

/* إزالة الشكل الدائري من صور الكتيجوري */
.s-category-card img,
.category-card img,
.s-block--categories .s-block__item img,
.s-block--categories img {
  border-radius: var(--cn-radius) var(--cn-radius) 0 0 !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* البطاقة نفسها مستطيلة */
.s-category-card,
.category-card,
.s-block--categories .s-block__item {
  background-color: var(--cn-white) !important;
  border-radius: var(--cn-radius) !important;
  border: 0.5px solid var(--cn-rose-border) !important;
  box-shadow: var(--cn-shadow) !important;
  overflow: hidden !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.s-category-card:hover,
.category-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--cn-rose) !important;
  box-shadow: var(--cn-shadow-hover) !important;
}

/* اسم الكتيجوري في الأسفل */
.s-category-card span,
.s-category-card h3,
.s-category-card p,
.category-card span,
.category-card h3,
.s-block--categories .s-block__item span {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--cn-dark) !important;
  padding: 8px !important;
  text-align: center !important;
}

/* ─────────────────────────────────────
   3. عدد البطاقات — 3 في الصف على الديسكتوب
   بدل 4
───────────────────────────────────── */

@media (min-width: 1024px) {
  /* قسم الكتيجوري — 3 بدل 4 */
  .s-block--categories .s-block__grid,
  .s-block--categories [class*="grid"],
  .s-home-categories [class*="grid"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* قسم المنتجات — 3 في الصف */
  .s-block--products [class*="grid"],
  .s-products-list [class*="grid"],
  .athena-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─────────────────────────────────────
   4. حواف زر الإضافة على الديسكتوب
   حادة أسفل البطاقة فقط — تبدو داخلها
───────────────────────────────────── */

@media (min-width: 769px) {
  .athena-card-content button,
  .athena-card-content .s-button-btn,
  .s-product-card-content-footer button {
    border-radius: 0 0 var(--cn-radius) var(--cn-radius) !important;
    border-top: 0.5px solid var(--cn-rose-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background-color: transparent !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}

/* =====================================================
   END PATCH v5.1
   ===================================================== */


/* =====================================================
   PATCH v5.2 — 5 تعديلات محددة
   أضف هذا في نهاية الكود الموجود
   ===================================================== */


/* 2. العناوين الرئيسية — Regular/Semi Bold */
h1, h2, h3,
.s-block__title,
.s-slider-block__title,
.section-title {
  font-weight: 500 !important;
}

/* 4. تقليل المسافة بين العنوان والدوائر */
.s-block--categories,
.s-home-categories {
  padding-top: 8px !important;
}

.s-block__title + .s-block--categories,
.s-block__title + [class*="categories"] {
  margin-top: 8px !important;
}

/* تقليل المسافة السفلية للعنوان مباشرة */
.s-block--categories .s-block__title,
[class*="categories"] h2,
[class*="categories"] h3 {
  margin-bottom: 10px !important;
}

/* =====================================================
   PATCH v5.4b — إطار وظل للدوائر فقط، الاسم خارجها
   ===================================================== */

/* إطار وظل على الشكل الدائري */
.store_category_item .img-shine-wrapper {
  border: 0.5px solid var(--cn-rose-border) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(196,123,138,0.08) !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.store_category_item:hover .img-shine-wrapper {
  border-color: var(--cn-rose) !important;
  box-shadow: 0 8px 24px rgba(196,123,138,0.14) !important;
}

/* ===================================================== */

/* =====================================================
   PATCH v5.6 — عناوين الأقسام في الهيدر أكبر + Regular
   ===================================================== */

#show-long-menu a,
#show-long-menu .menu-item,
.flex.justify-center.w-full a {
  font-size: 17px !important; /* أكبر بـ 20% من 14px */
  font-weight: 400 !important; /* Regular */
  font-family: 'Tajawal', sans-serif !important;
}

/* ===================================================== */

/* =====================================================
   PATCH v5.7b — Grid المنتجات 3 بالـ class الحقيقي
   ===================================================== */

.athena_fixed_products_parent {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ===================================================== */


/* =====================================================
   PATCH v5.8 — Grid الموبايل 2 في الصف
   ===================================================== */

@media (max-width: 1023px) {
  .athena_fixed_products_parent {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  .athena_fixed_products_parent {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* ===================================================== */