/* Custom CSS for the Country Selection Modal */
/* CSS مخصص لنافذة اختيار الدولة المنبثقة */
/* Version: 1.0.50 */
/* Author: Nader Aljawhary/Skinci LLC */

/* Global styles for the modal content, inheriting Amiri font and black text */
/* الأنماط العامة لمحتوى النافذة المنبثقة، وراثة خط أميري والنص الأسود */
body {
  font-family: 'Amiri', serif;
  color: #000000;
  margin: 0; /* Ensure no default body margin */
}

/* Modal Overlay Styles */
/* أنماط تراكب النافذة المنبثقة */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top, increased z-index to avoid conflicts */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable vertical scroll for the entire modal overlay */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  justify-content: center;
  align-items: center; /* Keep centering for shorter content */
  padding: 20px; /* Add padding to ensure content isn't flush with top/bottom edges when scrolling */
  box-sizing: border-box;
}

/* New class to explicitly show the modal as flex */
/* فئة جديدة لإظهار النافذة المنبثقة بوضوح كـ flex */
.modal-overlay.modal-show {
  display: flex;
}

/* Outer Container for the Modal Content */
/* الحاوية الخارجية لمحتوى النافذة المنبثقة */
.modal-outer-container {
  background-color: #fce4ec; /* Slightly darker pink to make inner modal stand out */
  padding: 20px; /* Padding around the inner modal */
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.6); /* More prominent shadow */
  max-width: 600px; /* Adjusted max-width for a smaller modal */
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; /* Prevents the modal from shrinking if content is too tall */
  margin: auto; /* This helps with centering when content overflows, pushing it to the top if needed */
}

/* Modal Content Styles */
/* أنماط محتوى النافذة المنبثقة */
.modal-content {
  background: #ffe6f0; /* Same background as original form */
  padding: 25px;
  border-radius: 10px;
  border: 2px solid red; /* Red border as requested */
  box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
  width: 100%;
  max-width: 560px; /* Max width for the inner form content (600 - 2*20) */
  position: relative;
  box-sizing: border-box;
  /* Force LTR and left-align for stability - Added !important */
  direction: ltr !important;
  text-align: left !important;
}

/* Close Button for Modal */
/* زر إغلاق النافذة المنبثقة */
.close-button {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #cc3385;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}
.close-button:hover,
.close-button:focus {
  color: #ff66b2;
  text-decoration: none;
}

/* Styles for the country select field */
/* أنماط حقل اختيار الدولة */
#country {
  width: 100% !important; /* Make it full width within the modal */
  height: 44px !important;
  margin-top: 20px; /* Add some top margin to separate from currency text */
  margin-bottom: 20px; /* Add some bottom margin */
}

/* Select2 customization (copied from previous form) */
/* تخصيص Select2 (منسوخ من النموذج السابق) */
.select2-container--default .select2-selection--single {
  height: 44px !important;
  padding: 0 10px !important;
  font-size: 16px;
  background-color: #fff !important; /* Added !important */
  border: 1.5px solid #ff66b2 !important; /* Added !important */
  border-radius: 6px !important; /* Added !important */
  transition: border-color 0.3s;
  color: #000000 !important; /* Added !important */
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
}
.select2-selection__rendered {
  line-height: 44px !important;
  color: #000000 !important; /* Added !important */
  white-space: nowrap;
}
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #cc3385 !important; /* Added !important */
  outline: none;
  box-shadow: 0 0 6px rgba(204, 51, 133, 0.5) !important; /* Added !important */
}
.select2-selection__arrow {
  height: 44px !important;
  top: 0 !important;
  right: 10px !important;
  color: #cc3385 !important; /* Added !important */
}
.flag-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flag-option img {
  width: 24px !important;
  height: 18px !important;
  margin-right: 8px !important;
  vertical-align: middle;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Select2 search box styling */
/* أنماط مربع بحث Select2 */
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #ff66b2 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    width: calc(100% - 20px) !important; /* Adjust width to account for padding */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #cc3385 !important;
    box-shadow: 0 0 6px rgba(204, 51, 133, 0.5) !important;
}

/* Select2 dropdown styling */
/* أنماط القائمة المنسدلة Select2 */
.select2-container--open .select2-dropdown {
    background-color: #ffe6f0 !important; /* Match modal content background, added !important */
    border: 1.5px solid #ff66b2 !important; /* Added !important */
    border-radius: 6px !important; /* Added !important */
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4) !important; /* Added !important */
    z-index: 10001 !important; /* Ensure it's above the modal overlay, increased z-index */
    width: 100% !important; /* Ensure dropdown matches the width of the input field */
}

/* Select2 option styling */
/* أنماط خيارات Select2 */
.select2-container--default .select2-results__option {
    padding: 10px !important; /* Added !important */
    font-size: 16px !important; /* Added !important */
    color: #000000 !important; /* Added !important */
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #ff66b2 !important; /* Highlight color, added !important */
    color: white !important; /* Added !important */
}
.select2-container--default .select2-results__option--selected {
    background-color: #fce4ec !important; /* Selected item background, added !important */
    color: #000000 !important; /* Added !important */
}


/* Language Buttons Container */
/* حاوية أزرار اللغة */
.language-buttons {
  display: flex;
  justify-content: center; /* Changed from space-around to center to keep buttons stable */
  gap: 15px; /* Space between buttons */
  margin-top: 20px; /* Added margin to separate from text above */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Language Button Styling */
/* أنماط زر اللغة */
.language-button {
  min-width: 150px; /* Increased minimum width for buttons */
  padding: 12px 20px;
  background-color: #ff66b2 !important; /* Pink background, added !important */
  color: white !important; /* White text, added !important */
  border: none !important; /* Added !important */
  border-radius: 8px !important; /* Added !important */
  font-size: 18px !important; /* Added !important */
  font-weight: bold !important; /* Added !important */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4) !important; /* Added !important */
  font-family: 'Amiri', serif !important; /* Ensure Amiri font for buttons, added !important */
}

.language-button:hover {
  background-color: #cc3385 !important; /* Darker pink on hover, added !important */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 6px 15px rgba(255, 105, 180, 0.6) !important; /* Added !important */
}

.language-button:active {
  transform: translateY(0); /* Press effect */
  box-shadow: 0 2px 5px rgba(255, 105, 178, 0.3) !important; /* Added !important */
}

/* New styles for headings */
/* أنماط جديدة للعناوين */
.modal-heading {
  text-align: center;
  color: #cc3385 !important; /* Dark pink color for headings, added !important */
  margin-bottom: 10px;
  font-weight: 700 !important; /* Added !important */
  font-size: 24px !important; /* Larger font for main heading, added !important */
}

.modal-text {
  text-align: center;
  color: #000000 !important; /* Black for regular text, added !important */
  margin-bottom: 25px; /* Space before country select */
  font-size: 16px !important; /* Added !important */
}

/* Enter Website Button Styling */
/* أنماط زر الدخول إلى الموقع */
.enter-website-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(45deg, #ff66b2, #cc3385) !important; /* Charming color gradient, added !important */
  border: none !important; /* Added !important */
  border-radius: 8px !important; /* More rounded corners, added !important */
  color: white !important; /* Added !important */
  font-size: 18px !important; /* Added !important */
  font-weight: bold !important; /* Added !important */
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(255, 105, 178, 0.4) !important; /* Larger, more prominent shadow, added !important */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  margin-top: 30px; /* Top margin to separate from country select */
  letter-spacing: 1px; /* Letter spacing */
  text-transform: uppercase; /* Uppercase letters */
  font-family: 'Amiri', serif !important; /* Ensure Amiri font, added !important */
}

.enter-website-button:hover {
  background: linear-gradient(45deg, #cc3385, #ff66b2) !important; /* Reverse gradient on hover, added !important */
  box-shadow: 0 8px 20px rgba(255, 105, 178, 0.6) !important; /* Larger shadow on hover, added !important */
  transform: translateY(-2px); /* Slight lift effect */
}

.enter-website-button:active {
  transform: translateY(0); /* Press effect */
  box-shadow: 0 2px 5px rgba(255, 105, 178, 0.3) !important; /* Added !important */
}


/* Responsive adjustments for smaller screens */
/* تعديلات الاستجابة للشاشات الأصغر */
@media (max-width: 768px) {
  .modal-outer-container {
    padding: 10px;
    max-width: 95%; /* Make it almost full width on small screens */
  }
  .modal-content {
    padding: 15px 10px;
  }
  .language-buttons {
    flex-direction: row; /* Changed to row for side-by-side */
    justify-content: center; /* Keep centered */
    gap: 10px; /* Space between buttons */
  }
  .language-button {
    width: calc(50% - 7.5px); /* Two columns with gap */
    min-width: unset; /* Remove min-width to allow calc to work */
  }
  .modal-heading {
    font-size: 20px; /* Default smaller size for heading on mobile */
    width: 100% !important; /* Ensure it takes full width on mobile */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
  }
  /* Specific font size for English heading on mobile */
  /* حجم خط محدد للعنوان الإنجليزي على الجوال */
  .modal-heading.modal-heading-en {
    font-size: 16px !important; /* Even smaller font size for English heading on mobile */
  }
}