/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.16.1764864021
Updated: 2025-12-04 16:00:21

*/


/* =========================================
   1. FONTS IMPORT & GLOBAL VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  /* Brand Colors */
  --brand-green: #007A3D;
  --brand-green-dark: #005c2e;
  --brand-black: #1a1a1a;
  --brand-light-bg: #f4f7f6;
  --brand-accent-red: #D72810;
  --brand-accent-yellow: #f59f00;

  /* Layout Variables */
  --border-radius: 8px;
  --transition-speed: 0.3s;
}

/* =========================================
   2. GLOBAL RESETS
   ========================================= */
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif;
  background-color: var(--brand-light-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--brand-green) #e9ecef;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-green);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-green-dark);
}

/* =========================================
   3. HEADER & MENU STYLES (Updated)
   ========================================= */
/* تخصيص هيدر Astra ليتناسب مع الهوية */

/* الخلفية الرئيسية للهيدر */
.site-header {
  background-color: #fff;
  /* خلفية بيضاء نظيفة للجزء العلوي */
  border-bottom: 1px solid #e0e0e0;
}

/* شريط القائمة الرئيسية (Primary Menu) */
.main-header-bar {
  background-color: #fff;
  /* جعلنا الخلفية بيضاء لتكون نظيفة */
  color: var(--brand-black);
  padding: 10px 0;
  border-bottom: 3px solid var(--brand-green);
  /* خط أخضر أسفل القائمة */
}

/* روابط القائمة - تعديل اللون ليكون ظاهراً */
.main-header-menu>li>a {
  color: var(--brand-black) !important;
  /* لون أسود للنصوص */
  font-weight: 700;
  font-size: 15px;
  padding: 0 20px;
  transition: color 0.3s ease;
}

/* تأثير الهوفر على الروابط */
.main-header-menu>li>a:hover,
.main-header-menu>li.current-menu-item>a {
  color: var(--brand-green) !important;
  /* يتحول للأخضر عند التحويم */
  background-color: transparent;
  /* إزالة الخلفية */
}

/* القوائم المنسدلة (Sub Menu) */
.main-header-menu .sub-menu {
  background-color: #fff !important;
  border-top: 3px solid var(--brand-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 6px 6px;
}

.main-header-menu .sub-menu li a {
  color: #333 !important;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.main-header-menu .sub-menu li a:hover {
  background-color: #f9f9f9;
  color: var(--brand-green) !important;
  padding-right: 25px;
  /* حركة بسيطة لليسار */
}

/* الهيدر في الموبايل */
@media (max-width: 921px) {
  .main-header-bar {
    background-color: #fff;
  }

  .ast-mobile-menu-buttons .ast-mobile-menu-trigger-fill {
    fill: var(--brand-green);
    /* لون أيقونة القائمة */
  }

  .main-header-menu {
    background-color: #fff;
  }

  .main-header-menu>li>a {
    color: var(--brand-black) !important;
    border-bottom: 1px solid #eee;
  }
}

/* =========================================
   4. MAIN CONTAINER & TYPOGRAPHY
   ========================================= */
.main_div_container {
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  width: 90%;
  max-width: 800px;
  margin: 50px auto;
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  border-top: 5px solid var(--brand-green);

  direction: rtl;
  text-align: right;
}

.main_div_container h1,
.main_div_container h2 {
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--brand-green);
  line-height: 1.4;
}

.main_div_container h3,
.main_div_container h4,
.main_div_container h5,
.main_div_container h6 {
  color: var(--brand-black);
  font-weight: 700;
  margin-bottom: 10px;
}

/* =========================================
   5. MESSAGE BOXES (ALERTS)
   ========================================= */
.div_message {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 25px auto;
  padding: 15px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background-color: #e9f7ef;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.div_message.error {
  background-color: #fce8e6;
  border-color: #f5c6cb;
  color: var(--brand-accent-red);
}

.div_message.warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

/* =========================================
   6. STANDARD HTML TABLE STYLES
   ========================================= */
.general_table_classs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.general_table_classs caption {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: #e9f7ef;
  text-align: center;
  padding: 12px;
  color: var(--brand-green);
  border-radius: 6px;
}

.general_table_classs th,
.general_table_classs td {
  border: 1px solid #eee;
  padding: 14px 15px;
  text-align: right;
  vertical-align: middle;
  word-break: break-word;
}

.general_table_classs th {
  background-color: #fcfcfc;
  color: var(--brand-black);
  font-weight: 800;
  border-bottom: 2px solid #eee;
}

.general_table_classs tfoot {
  background-color: #f8f9fa;
  font-weight: bold;
  border-top: 2px solid #ddd;
}

.general_table_classs tfoot td {
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 20px 15px;
  width: 100%;
  display: table-cell;
}

/* =========================================
   7. DIV-BASED TABLE STYLES
   ========================================= */
.div_table_caption {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 12px;
  text-align: center;
  border-bottom: 2px solid var(--brand-green);
  color: var(--brand-black);
}

.div_table_row_header {
  display: grid;
  grid-template-columns: 30% 70%;
  background-color: var(--brand-black);
  font-weight: bold;
  color: #fff;
  padding: 14px 15px;
  align-items: center;
  text-align: center;
  border-radius: 6px 6px 0 0;
}

.div_table_row {
  display: grid;
  grid-template-columns: 30% 70%;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  align-items: stretch;
  transition: background-color 0.2s;
}

.div_table_row:last-child {
  border-bottom: none;
}

.div_table_row:hover {
  background-color: #fbfbfb;
}

.div_table_cell {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  word-break: break-word;
}

.div_table_cell_label {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  font-weight: 700;
  background-color: #f9fbfd;
  color: #444;
  border-left: 1px solid #eee;
}

.div_table_row_footer {
  display: flex;
  justify-content: center;
  background-color: #f8f9fa;
  padding: 20px 15px;
  border-top: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
}

/* =========================================
   8. FORMS & INPUTS
   ========================================= */
.main_div_container fieldset {
  border: 1px solid #e0e0e0;
  padding: 25px;
  margin-bottom: 25px;
  border-radius: var(--border-radius);
  background-color: #fff;
  width: 100%;
}

.main_div_container legend {
  font-weight: bold;
  padding: 0 10px;
  color: var(--brand-green);
}

.main_div_container label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.main_div_container input[type="text"],
.main_div_container input[type="email"],
.main_div_container input[type="password"],
.main_div_container input[type="number"],
.main_div_container input[type="text"],
.main_div_container input[type="date"],
.main_div_container input[type="time"],
.main_div_container input[type="tel"],
.main_div_container textarea,
.main_div_container select {
  width: 100%;
  padding: 8px 10px;
  /* تم تقليل البادينغ ليظهر النص كاملاً */
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  transition: all 0.2s ease;
}

.main_div_container input:focus,
.main_div_container textarea:focus,
.main_div_container select:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(0, 122, 61, 0.15);
}

.main_div_container select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23333" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 1em;
  padding-left: 35px;
  /* الحفاظ على مسافة للسهم */
}

/* =========================================
   9. BUTTONS
   ========================================= */
.main_div_container input[type="submit"],
.main_div_container input[type="button"],
.main_div_container button,
.button-primary {
  background-color: var(--brand-green);
  color: #fff;
  border: none;
  padding: 14px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: block;
  min-width: 150px;
  width: 100%;
  max-width: 400px;
  margin: 15px auto;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 4px 6px rgba(0, 122, 61, 0.2);
}

.main_div_container input[type="submit"]:hover,
.main_div_container button:hover {
  background-color: var(--brand-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0, 122, 61, 0.3);
}

.general_table_classs tfoot button,
.general_table_classs tfoot input[type="submit"],
#submit_insert_aa_vendors {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}

/* =========================================
   10. RESPONSIVE MEDIA QUERIES (Mobile)
   ========================================= */
@media (max-width: 768px) {

  .main_div_container {
    padding: 15px;
    width: 96%;
    margin: 20px auto;
  }

  .general_table_classs,
  .general_table_classs tbody,
  .general_table_classs tr,
  .general_table_classs td {
    display: block;
    width: 100%;
  }

  .general_table_classs thead {
    display: none;
  }

  .general_table_classs caption {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }

  .general_table_classs tr {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    border-top: 4px solid var(--brand-green);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: #fff;
    overflow: hidden;
  }

  .general_table_classs td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 15px;
    padding-right: 40%;
    position: relative;
    border-bottom: 1px dashed #eee;
    min-height: 50px;
  }

  .general_table_classs td:last-child {
    border-bottom: none;
  }

  .general_table_classs td::before {
    content: attr(data-label);
    position: absolute;
    right: 15px;
    font-weight: 700;
    color: var(--brand-green-dark);
    text-align: right;
    width: 35%;
  }

  .general_table_classs tfoot,
  .general_table_classs tfoot tr,
  .general_table_classs tfoot td {
    display: block;
    width: 100%;
    border: none;
  }

  .general_table_classs tfoot td {
    padding: 15px !important;
    text-align: center;
    background: #f9f9f9;
  }

  .general_table_classs tfoot td::before {
    display: none;
  }

  .div_table_row_header {
    display: none;
  }

  .div_table_row {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    margin-bottom: 20px;
    border-radius: 10px;
    border-top: 4px solid var(--brand-green);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    overflow: hidden;
  }

  .div_table_cell_label {
    width: 100%;
    border-left: none;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f4fdf7;
    color: var(--brand-green-dark);
    padding: 12px 15px;
  }

  .div_table_cell {
    width: 100%;
    padding: 15px;
    justify-content: flex-start;
  }

  .main_div_container input[type="submit"],
  .main_div_container button,
  #submit_insert_aa_vendors {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================
   11. PRINT STYLES
   ========================================= */
@media print {
  @page {
    margin: 2cm;
    size: auto;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  header,
  footer,
  .sidebar,
  .nav,
  .menu,
  #wpadminbar,
  button,
  input[type="submit"],
  .div_table_row_footer,
  tfoot {
    display: none !important;
  }

  .main_div_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .general_table_classs,
  .div_table_row {
    page-break-inside: avoid;
    border: 1px solid #000 !important;
  }

  .general_table_classs th,
  .div_table_row_header {
    background-color: #f0f0f0 !important;
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
  }

  input,
  select,
  textarea {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: bold;
  }

  select {
    background-image: none !important;
    padding-left: 0 !important;
  }
}

/* --- FIX: Compact TinyMCE Toolbar --- */

/* 1. Button Container: Shrink to fit */
.wp-editor-container .mce-toolbar .mce-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  margin: 0 1px !important;
  /* Tight spacing between buttons */
  width: auto !important;
  /* Remove fixed width */
  min-width: 0 !important;
  /* Remove minimum width from theme */
  display: inline-block !important;
}

/* 2. Actual Button: Remove padding & constraints */
.wp-editor-container .mce-toolbar .mce-btn button {
  padding: 2px 4px !important;
  /* Minimal padding */
  margin: 0 !important;
  font-size: 14px !important;
  line-height: normal !important;
  width: auto !important;
  /* Shrink to icon size */
  min-width: 0 !important;
  /* Remove minimum width */
  background: transparent !important;
  box-shadow: none !important;
}

/* 3. Force Icon Visibility (Dark Grey) */
.wp-editor-container .mce-toolbar .mce-btn i,
.wp-editor-container .mce-toolbar .mce-btn .mce-ico {
  color: #555 !important;
  text-shadow: none !important;
  width: auto !important;
  height: auto !important;
}

/* 4. Hover & Active States */
.wp-editor-container .mce-toolbar .mce-btn:hover,
.wp-editor-container .mce-toolbar .mce-btn.mce-active {
  background-color: #e5e5e5 !important;
  border-color: #ccc !important;
}

/* تنسيق التذييل ليكون في المنتصف */
.admin-footer {
  text-align: center;
  /* جعل النصوص في المنتصف */
  padding: 20px 0;
  background-color: #fff;
  /* يمكنك تغيير اللون حسب الحاجة */
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

.footer-content {
  display: flex;
  flex-direction: row;
  /* ترتيب العناصر عمودياً */
  align-items: center;
  /* توسيط العناصر أفقياً */
  justify-content: center;
}

.footer-content p {
  margin: 0 0 5px 0;
  /* مسافة بسيطة أسفل النص */
}

.version {
  font-size: 12px;
  color: #999;
}

/* تنسيق الشارة الحمراء للعنصر المضاف يدوياً */
.cart-dynamic-badge {
  background-color: #e41e1e;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  /* تعديل الارتفاع */
  right: -15px;
  /* وضعها بجانب النص أو الأيقونة */
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

/* تحسين شكل العنصر عند التمرير */
.cart-menu-wrapper:hover i {
  color: var(--brand-green, #007A3D);
}

/* تنسيق الموبايل لضمان عدم تداخل الرقم مع النص */
@media (max-width: 921px) {
  .cart-dynamic-badge {
    position: static;
    margin-right: 10px;
    display: inline-flex;
  }
}