/*
Theme Name:   Astra Child
Theme URI:    https://zelenastore.com
Description:  قالب ابن مخصص لمتجر ZELENA STORE مبني على Astra
Author:       ZELENA TEAM
Template:     astra
Version:      1.0.0
*/

/*=============================================
  1. استيراد تنسيقات القالب الأب
=============================================*/
@import url("../astra/style.css");

/*=============================================
  2. إعدادات عامة للصفحة
=============================================*/

/* إخفاء التمرير الأفقي */
html, body {
  overflow-x: hidden !important;
}

/* منع تمدد السكاشن */
.elementor-section {
  max-width: 100vw !important;
  overflow-x: hidden;
}

/* الصور والفريمات */
img, iframe {
  max-width: 100%;
  height: auto;
}

/*=============================================
  3. تنسيق متغيرات المنتجات (Swatches)
=============================================*/
.variations .swatch-label,
.variations .variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.variations .variable-item {
  margin: 0 !important;
  float: none !important;
}

.variations .label {
  margin-bottom: 8px;
  display: block;
  width: 100%;
  font-weight: 600;
}

.variations td.label {
  width: auto !important;
}

/*=============================================
  4. إصلاح ودجات الفلاتر
=============================================*/
.widget,
.woocommerce-widget-layered-nav,
.woocommerce-widget-price-filter,
.woocommerce-widget {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.woocommerce-widget-layered-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-widget-layered-nav li {
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*=============================================
  5. تخصيص swatches في صفحة المتجر
=============================================*/
ul.products li.product .variations_form .variable-items-wrapper {
  order: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

ul.products li.product .add_to_cart_button,
ul.products li.product .button {
  order: 2;
  margin-top: 10px;
}

ul.products li.product .product-inner,
ul.products li.product .product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.variable-items-wrapper .variable-item {
  border: 2px solid #EC407A !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 2px 5px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.variable-items-wrapper .variable-item.selected {
  border: 2px solid #2E7D32 !important;
  box-shadow: 0 0 0 2px #FCE4EC;
}

/*=============================================
  6. أزرار المقالات (قراءة المزيد + اكتشفي المزيد)
=============================================*/
.read-more a,
.more-link,
.ast-related-post-link.ast-button {
  background-color: #EC407A !important;
  color: #ffffff !important;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease;
  margin: 10px auto;
}

.read-more a:hover,
.more-link:hover,
.ast-related-post-link.ast-button:hover {
  background-color: #1E4646 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/*=============================================
  7. زر إرسال التعليق
=============================================*/
.comment-form .form-submit input {
  background-color: #2E7D32;
  color: #fff;
  font-weight: bold;
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  transition: background 0.3s ease;
  cursor: pointer;
}

.comment-form .form-submit input:hover {
  background-color: #4CAF50;
}

/*=============================================
  8. تنسيق الرسالة الترحيبية أسفل المقال
=============================================*/
.comment-notes {
  background-color: #fce4ec;
  padding: 12px 20px;
  border-radius: 15px;
  color: #2E7D32;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

/*=============================================
  9. إخفاء الحقول غير المهمة
=============================================*/
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent,
.logged-in-as {
  display: none !important;
}

/*=============================================
  10. إظهار نموذج التعليق دائمًا
=============================================*/
.comments-area,
.comment-respond {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
}

/*=============================================
  11. إخفاء زر "عرض التعليقات"
=============================================*/
.ast-show-comments,
.ast-show-comments-data {
  display: none !important;
}

/*=============================================
  12. تخصيص عنوان التعليقات
=============================================*/
.comments-title {
  font-size: 22px;
  color: #EC407A;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

/*=============================================
  13. تنسيق الروابط الداخلية داخل المقالات
=============================================*/
.entry-content a {
  color: #EC407A !important;
  text-decoration: none !important;
  font-weight: 600;
}

.entry-content a:hover {
  color: #1E4646 !important;
  text-decoration: underline;
}