/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:  #212121;
  font-family: 'Baloo2', serif;
  background-color: #212121;
  color: #ffffff;
  overflow-x: hidden;
}

@font-face {
  font-family: 'Baloo2';
   src: url('./fonts/Baloo2.woff2') 
}


/* Preloader */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #212121;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Hero Section */
.hero-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f0f0f ;
  text-align: center;
  position: relative;
  overflow: hidden;
}



.hero-subtitle {
  font-size: 1.5rem;
  font-family: 'Baloo2',serif;
  letter-spacing: 2px;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
}

/* ✅ Responsive: تحسين العرض على الجوال */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    max-width: 90vw;
    padding: 0 10px;
  }
}

/* قسم Nos Services */
.services-section {
    background-color: #1a1a1a;
    padding: 60px 20px;
    text-align: center;
}

.services-section h2 {
    font-family: 'Baloo2', serif;
    color: #A35C7A;
    font-size: 36px;
    margin-bottom: 40px;
    text-shadow: none; /* إزالة التأثير الظلي */
}

.section-title {
    font-size: 2.5rem;
  font-family: 'Baloo2', serif;
    color: #C890A7;
    margin-bottom: 3rem;
    text-shadow: none; /* إزالة التأثير الظلي */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

/* كرت الخدمة */
.service-card {
    background-color: #1c1b1f;
    border-radius: 10px;
    overflow: hidden;
}

/* إزالة الخط تحت النص داخل كروت الخدمة */
.service-card a {
  text-decoration: none; /* إزالة الخط تحت الرابط */
}

/* صورة الخدمة */
.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  filter: brightness(0.9);
}

.service-card:hover img {
  filter: brightness(1.1);
}



/* اسم الخدمة */
.service-card h3 {
  padding: 1rem;
  background: #2c1921;
  color: #fff;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* À propos */
.about-section {
  background-color: #1a1a1a;
  font-family: 'Baloo2', serif;
  color: #eee;
  padding: 5rem 2rem;
  text-align: center;
padding: 2rem 2rem;}
.about-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.about-wrapper h2 {
  font-size: 2rem;
  color: #A35C7A;
  margin-bottom: 1.5rem;
}
.about-wrapper p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #ccc;
}

/* Contact */
.contact-section {
  background-color: #000;
  padding: 5rem 2rem;
  text-align: center;
}
.contact-section h2 {
  font-size: 2rem;
  color: #A35C7A;
  margin-bottom: 2rem;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 1.2rem;
}
.contact-form select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  height: 48px;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: var(--bg-color, #fff);
  color: var(--text-color, #000);
  box-sizing: border-box;

  /* إزالة السهم الأصلي */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* إضافة مسافة للسهم الجديد */
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.event-type-date {
  display: flex;
  gap: 16px; /* spacing between them */
  
}
.event-type-date select{
     padding: 1rem;
    font-size: 16px;
    border: 1px solid #C890A7;
    border-radius: 4px;
    background-color: #303030;
    color: #767676;
    box-sizing: border-box;
    height: 52px;
}

.event-type-date select{
     padding: 1rem;
    font-size: 16px;
    border: 1px solid #C890A7;
    border-radius: 4px;
    background-color: #303030;
  color: #ffffff;
    box-sizing: border-box;
    height: 52px;
}

.event-type-date input[type="date"] {
  padding: 1rem;
  font-size: 16px;
  border: 1px solid #C890A7;
  border-radius: 4px;
  background-color: #303030;
  color: #ffffff;
  box-sizing: border-box;
  height: 52px;
  width: 340px;
}
.event-type-date input[type="date"]::placeholder {
  color: #aaa; /* ⬅️ Light gray placeholder */
  opacity: 1;
}

#event {
  color: #767676; /* gray by default */
}
/* When user selects something other than the first option */
#event:valid {
  color: #ffffff; /* black after valid selection */
}
#event_date::placeholder {
  color: #767676; /* gray placeholder */
}

#event_date {
  color: #ffffff; /* user input is black */
}

/* Container for both fields side by side */
.event-type-date {
  display: flex;
  gap: 16px;
}

/* Shared light mode style */
.light-mode select,
.light-mode input[type="text"] {

  background-color: #fff;
  color: #000;
}

/* Placeholder (for date input only) */
.light-mode #event_date {
  color: #000000; /* user input is black */
}

/* Dropdown placeholder styling */
#event {
  color: #888;
}

.light-mode #event:valid {
  color: #000;
}

.light-mode #event option[disabled] {
  color: #000000;
}

.contact-form input,
.contact-form textarea {
  padding: 1rem;
   border: 1px solid #C890A7;
  border-radius: 5px;
  background-color: #303030;
  color: #fff;
  font-size: 1rem;
  
}
/* 🔴 Red border only after submit attempt */
.contact-form.show-errors input:invalid,
.contact-form.show-errors select:invalid,
.contact-form.show-errors textarea:invalid {
  border: 1px solid #e74c3c !important;
 
  color: #000;
}

/* 🔴 Focus red outline (optional) */
.contact-form.show-errors input:focus:invalid,
.contact-form.show-errors select:focus:invalid,
.contact-form.show-errors textarea:focus:invalid {
  outline: 1px solid #e74c3c;
}

/* Optional: valid border to restore normal look */
.contact-form.show-errors input:valid,
.contact-form.show-errors select:valid,
.contact-form.show-errors textarea:valid {
  border: 1px solid #C890A7;
}


.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
/* === الزر الأساسي === */
.contact-form button {
  font-weight: 600;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
}

/* 🌙 الوضع الداكن */
body:not(.light-mode) .contact-form button {
  background-color: #A35C7A;
  color: #000;
  box-shadow: 0 4px 10px rgba(163, 92, 122, 0.15);
}

/* ☀️ الوضع الفاتح */
body.light-mode .contact-form button {
  background-color: #D8A3C1;
  color: #000;
  box-shadow: 0 4px 10px rgba(179, 142, 211, 0.15);
}

/* Hover */
.contact-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Active */
.contact-form button:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ✅ زر النجاح */
button.success-state {
  background-color: #4CAF50 !important; /* أخضر يدل على نجاح */
  color: #fff !important;
}

/* ❌ زر الفشل */
button.error-state {
  background-color: #E74C3C !important; /* أحمر يدل على خطأ */
  color: #fff !important;
}


/* عند إضافة الكلاس pulse-button يتم تشغيل التأثير */
button.pulse-button {
  animation: pulse 1s ease-in-out 1;
}

/* Footer */
.footer-section {
  background-color: #0a0a0a;
  color: #bbb;
  padding: 4rem 2rem 3rem;
  text-align: center;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05); /* شريط علوي خفيف */
}

/* النصوص العامة في الفوتر */
.footer-section p {
  margin-bottom: 1rem;
  color: #aaa;
  line-height: 1.6;
}

/* البريد الإلكتروني */
/* الوضع العام */
.footer-email {
  text-decoration: none;
  font-size: 0.95rem;
  margin-top: 1.2rem;
  transition: color 0.3s ease;
}

/* 🌙 الوضع الداكن */
body:not(.light-mode) .footer-email {
  color: #aaa; /* اللون الرمادي الزهري كما كان */
}

body:not(.light-mode) .footer-email:hover {
  color: #A35C7A;
}

/* ☀️ الوضع الفاتح */
body.light-mode .footer-email {
  color: #A35C7A; /* بنفسجي وردي ناعم */
}

body.light-mode .footer-email:hover {
  color: #A35C7A;
}



/* الشعار */
.site-logo {
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto 25px auto;
  opacity: 0.9;
  transition: opacity 0.3s, filter 0.3s;
}

.site-logo:hover {
  opacity: 1;
  filter: brightness(1.5);
}


/* أيقونات التواصل */
.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.footer-icons a svg {
  width: 26px;
  height: 26px;
  fill: #ffffff;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.footer-icons a:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px #B38ED3);
}


/* === تنسيق الأزرار داخل hero section === */
.hero-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}




html {
  scroll-behavior: smooth;
}

.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.footer-icons a svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
  
}

.footer-icons a:hover svg {
  transform: scale(1.2);
  filter: drop-shadow(0 0 3px #A35C7A);
}
.name-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.name-fields input {
  padding: 1rem;
  border: 1px solid #C890A7;
  border-radius: 5px;
  background-color: #303030;
  color: #fff;
  font-size: 1rem;
  
  width: 100%;
}
  /* ===== Light Mode ===== */
body.light-mode {
  background: #FBF5E5 ;
  
}

body.light-mode .hero-section {
  background: #FBF5E5 ;
}





.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

#toggle-theme {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  
  color: #fff;
}

#toggle-theme svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}


body.light-mode .hero-subtitle {
  color: #333;
}


body.light-mode .about-wrapper p {
  color: #333;
}

/* ===== بطاقات الخدمات ===== */

body.light-mode .service-card h3 {
  color: #212121;
  background-color: #C890A7;
}
body.light-mode .service-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 25px rgba(207, 15, 71, 0.2);
}
body.light-mode .service-description {
  background-color: #fefefe;
  color: #333;
}

/* ===== نموذج التواصل ===== */
body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
 background-color: #ffffff;
    border: 1px solid #C890A7;
    color: #000000;
}
body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus {
  background-color: #fff;
  box-shadow: 0 0 8px #B38ED3;
}
/* ✅ رسالة الشكر */
.form-success {
  display: none;
  font-weight: bold;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid;
  background-color: transparent;
}

/* 🌙 الوضع الداكن */
body:not(.light-mode) .form-success {
  color: #B38ED3;
  border-color: #B38ED3;
  background-color: #2b2b2b;
}

/* ☀️ الوضع الفاتح */
body.light-mode .form-success {
  color: #B38ED3;
  border-color: #B38ED3;
  background-color: #f4ecff;
}

.form-warning {
  display: none;
  font-weight: bold;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid #ff4d4f; /* لون الحدود */
  background-color: #2a0000; /* خلفية تحذيرية داكنة */
  color: #ffcccc; /* لون الخط */
}


/* 🌙 الوضع الداكن */
body:not(.light-mode) .form-warning {
  color: #FF7D7D;
  border-color: #FF7D7D;
  background-color: #3b1e1e;
}

/* ☀️ الوضع الفاتح */
body.light-mode .form-warning {
  color: #C0392B;
  border-color: #C0392B;
  background-color: #ffebeb;
}



/* ===== الفوتر ===== */
body.light-mode .footer-section {
  background-color:   #FBF5E5;
  border-top: .5px solid #e9e3d4;
}
body.light-mode .footer-section p,
body.light-mode .footer-email {
  color: #444;
}

body.light-mode .footer-icons svg {
  fill: #111;
  
}




/* ===== زر تبديل الثيم (بأيقونة واحدة فقط) ===== */
#toggle-theme {
  all: unset;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  padding: 4px;
  display: inline-block;
  
}
#toggle-theme:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 3px #A35C7A);
}
body.light-mode #toggle-theme {
  color: #A35C7A;
  filter: none;
}
/* التأثير الأساسي عند التحويم */
body.light-mode #toggle-theme:hover #icon-sun {
  filter: drop-shadow(0 0 8px #A35C7A)
          drop-shadow(0 0 12px #A35C7A);
  transform: rotate(10deg);
  
}

body.light-mode #toggle-theme:hover #icon-sun {
  filter: drop-shadow(0 0 8px #B38ED3)
          drop-shadow(0 0 15px #FFB6C1);
  
}
.language-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

#language-btn {
  all: unset;
  cursor: pointer;
  font-size: 24px;
  padding: 4px;
  color: #fff;
  display: flex;
  align-items: center;
}

.language-icon {
  width: 24px; /* حجم الأعلام */
  height: auto;
  margin-right: 8px; /* المسافة بين العلم والنص */
}

#language-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px #A35C7A);
}

body.light-mode #language-btn {
  color: #B38ED3;
}

#language-menu li {
  margin: 6px 0;
}

#language-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 6px 4px;
  transition: background-color 0.3s ease;
}

#language-menu a img {
  width: 15px; /* حجم الأعلام في القائمة */
  height: auto;
  margin-right: 10px;
}

/* ✅ تخصيص القائمة في الوضع الفاتح */
body.light-mode #language-menu {
  background-color: #fff;
  border-color: #ddd;
}

/* ✅ النص في الوضع الفاتح */
body.light-mode #language-menu a {
  color: #1f1d1d;
}

/* ✅ Hover في الوضع المظلم */
#language-menu a:hover {
  background-color: #333;
  color: #B38ED3;  /* 🎯 النص يتغير بنفس اللون كما في الوضع الفاتح */
  border-radius: 4px;
}

/* ✅ Hover في الوضع الفاتح */
body.light-mode #language-menu a:hover {
  background-color: #f0f0f0;
  color: #B38ED3;  /* النص نفس اللون البنفسجي */
  border-radius: 4px;
}


.language-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

/* ✅ قائمة اللغات */
#language-menu {
  list-style: none;
  margin-top: 8px;
  padding: 6px 10px;
  background-color: #242424;
  border: 1px solid #444;
  border-radius: 6px;
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  min-width: 130px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 2000; /* ✅ حتى تكون القائمة فوق الفوتر وكل العناصر */
}

.footer-logo img {
  max-width: 130px;
  opacity: 0.9;
  transition: filter 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

/* الوضع الافتراضي = داكن */
.logo-light {
  display: none;
}
.logo-dark {
  display: inline-block;
}

/* عند تفعيل الوضع الفاتح */
body.light-mode .logo-dark {
  display: none;
}
body.light-mode .logo-light {
  display: inline-block;
}

/* تأثير التمرير على الشعار - الوضع الداكن */
.logo-dark:hover {
  filter: brightness(1.5);
  opacity: 1;
}

/* تأثير التمرير على الشعار - الوضع الفاتح */
body.light-mode .logo-light:hover {
  filter: brightness(1.8);
  opacity: 1;
}

html {
  scroll-behavior: smooth;
}

/* أقسام الصفحات في الوضع الفاتح */
body.light-mode .services-section,
body.light-mode .about-section {
  background-color: #fffbf0;
}
body.light-mode .contact-section {
  background: #FBF5E5;
}

/* تثبيت زر اللغة وزر الوضع الليلي */
.fixed-button {
  position: fixed;
  top: 1rem;
  z-index: 9999;
}
#toggle-theme.fixed-button {
  right: 1rem;
}
#lang-toggle.fixed-button {
  right: 3.5rem;
}
.theme-toggle,
.language-toggle {
  transition: opacity 0.3s ease;
  will-change: opacity;
}

/* ✅ أيقونة النجاح المتحركة */
.form-success .check-icon {
  display: inline-block;
  margin-right: 0.5rem;
  animation: bounce-check 0.6s ease;
}

/* ✨ حركة النبض / القفز */
@keyframes bounce-check {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero-title,
html[lang="ar"] .hero-subtitle {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.8;
  font-family: 'Tajawal', sans-serif;
  text-align: center;
}
html[lang="ar"] .btn,
html[lang="ar"] p,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
  font-family: 'Noto Kufi Arabic', sans-serif;
  letter-spacing: 0;
  word-spacing: 0;
}

input.invalid,
textarea.invalid,
select.invalid {
  border: 2px solid red !important;
  outline: none;
}

button[type="submit"].submit-error {
  background-color: #dc3545 !important; /* أحمر */
  color: white;
}

button[type="submit"].submit-success {
  background-color: #28a745 !important; /* أخضر */
  color: white;
}
/* =============== ✅ القاعدة العامة =============== */
.contact-form {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
  padding: 1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-form button {
  width: 100%;
  font-size: 1rem;
  padding: 1rem;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #C890A7;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ✅ الوضع المظلم */
body:not(.light-mode) .contact-form input,
body:not(.light-mode) .contact-form select,
body:not(.light-mode) .contact-form textarea {
  background-color: #303030;
  color: #fff;
}

body:not(.light-mode) .event-type-date select {
  background-color: #303030;
  color: #fff;
  height: 52px;
  line-height: 44px; /* ✅ يجعل النص في الوسط */
  padding: 0 40px 0 16px; /* ✅ padding مخصص للنص والسهم */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path fill='white' d='M1 1l7 7 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* ✅ الوضع الفاتح */
body.light-mode .contact-form input,
body.light-mode .contact-form select,
body.light-mode .contact-form textarea {
  background-color: #fff;
  color: #000;
  border: 1px solid #C890A7;
}

body.light-mode .event-type-date select {
  background-color: #fff;
  color: #000;
  height: 52px;
  line-height: 44px; /* ✅ يجعل النص في الوسط */
  padding: 0 40px 0 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path fill='black' d='M1 1l7 7 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* ✅ placeholder أو الخيار المعطل */
.event-type-date select option[disabled] {
  color: #aaa;
}

/* ✅ المجموعات */
.name-fields,
.event-type-date {
  display: flex;
  gap: 1rem;
}

.name-fields input,
.event-type-date input,
.event-type-date select {
  flex: 1;
}


/* ✅ تحسين الشكل عند التحويم */
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: #A35C7A;
}

/* ✅ تحسين الشكل عند التركيز */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #B38ED3;
  box-shadow: 0 0 6px rgba(179, 142, 211, 0.4);
}

/* زر الإرسال */
.contact-form button {
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  background-color: #A35C7A;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
  background-color: #C890A7;
  transform: translateY(-2px);
}
/* ✅ تأثير Hover عام للوضعين */
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: #A35C7A;
  box-shadow: 0 0 5px rgba(163, 92, 122, 0.4);
  transition: all 0.3s ease;
}

/* ✅ تأثير Hover خاص بالوضع الفاتح */
body.light-mode .contact-form input:hover,
body.light-mode .contact-form select:hover,
body.light-mode .contact-form textarea:hover {
  border-color: #C890A7;
  box-shadow: 0 0 6px rgba(200, 144, 167, 0.5);
  background-color: #fffdfd;
}

/* ✅ تأثير Focus عام (عندما تضغط على الحقل) */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #B38ED3;
  box-shadow: 0 0 7px rgba(179, 142, 211, 0.6);
  transition: all 0.3s ease;
}

/* ✅ تأثير Focus خاص بالوضع الفاتح */
body.light-mode .contact-form input:focus,
body.light-mode .contact-form select:focus,
body.light-mode .contact-form textarea:focus {
  border-color: #A35C7A;
  box-shadow: 0 0 8px rgba(195, 144, 167, 0.6);
  background-color: #ffffff;
}

/* ✅ منع أي سكرول جانبي عام */
body,
html {
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ✅ نموذج الاتصال الأساسي */
.contact-form {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
}

/* ✅ الحقول */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #1c1c1c;
  color: #fff;
}

/* ✅ جعل حقل نوع الحدث أصغر */
.event-type-date select {
  height: 40px; /* ←⬅️ Change this value to control height */
  font-size: 0.85rem; /* ←⬅️ Change this value to control font size */
  padding: 0.6rem 1rem; /* ←⬅️ Adjust padding for compactness */
}

/* ✅ زر الإرسال */
.contact-form button {
  padding: 1rem;
  font-size: 1.1rem;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #333;
}

/* ✅ تنسيق الحقول الداخلية */
.name-fields,
.event-type-date {
  display: flex;
  gap: 1rem;
}

.name-fields input,
.event-type-date input,
.event-type-date select {
  flex: 1;
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  box-sizing: border-box;
}

/* ✅ تخصيص حقل التاريخ */
.event-type-date input[type="date"] {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  font-size: 1rem;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #1c1c1c; /* ⬅️ Fix: dark background */
  color: #fff; /* ⬅️ Fix: ensure text is visible */
}

/* ✅ دعم التاريخ على سفاري والموبايل */
@media (max-width: 600px) {
  .event-type-date input[type="date"]::-webkit-datetime-edit,
  .event-type-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .event-type-date input[type="date"]::-webkit-datetime-edit-text,
  .event-type-date input[type="date"]::-webkit-datetime-edit-month-field,
  .event-type-date input[type="date"]::-webkit-datetime-edit-day-field,
  .event-type-date input[type="date"]::-webkit-datetime-edit-year-field {
    color: #fff; /* ⬅️ Safari and Chrome mobile fix */
  }

  /* ✅ عرض عنوان الحقل فقط على الشاشات الصغيرة */
  .event-type-date label.mobile-date-label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #b1b1b1; /* هذا سيكون لون الـ dark mode الافتراضي */
  }
  
    body.light-mode .event-type-date label.mobile-date-label {
    color: #3e3e3e;
  }
}

/* 📱 هواتف صغيرة جدًا (≤ 600px) */
@media (max-width: 600px) {
  .name-fields,
  .event-type-date {
    flex-direction: column;
    gap: 1rem;
  }

  .contact-form {
    padding: 1rem;
    gap: 1rem;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button {
    font-size: 0.95rem;
    height: 45px;
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #1c1c1c;
    color: #fff;
  }

  .contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0l5 6 5-6z" fill="%23fff"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
  }

  .contact-form textarea {
    height: auto;
    min-height: 100px;
  }

  .event-type-date input[type="date"] {
    padding: 0.9rem;
    font-size: 0.95rem;
  }
}

/* ✅ الأجهزة اللوحية (601px – 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .contact-form {
    max-width: 700px;
    padding: 1.5rem;
  }
    .event-type-date label.mobile-date-label {
    display: none;
  }
}

/* ✅ شاشات لابتوب (1025px – 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
  .contact-form {
    max-width: 800px;
    padding: 2rem;
  }
    .event-type-date label.mobile-date-label {
    display: none;
  }
}

/* ✅ شاشات عريضة (≥ 1441px) */
@media (min-width: 1441px) {
  .contact-form {
    max-width: 1000px;
    padding: 2rem 3rem;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button {
    font-size: 1.15rem;
    padding: 1.2rem;
  }
    .event-type-date label.mobile-date-label {
    display: none;
  }
}


/* ✅ تصحيح موقع السهم في select عند RTL */
  html[lang="ar"] .event-type-date select {
    background-position: left 12px center !important;
    padding-left: 2.5rem !important;
    padding-right: 1rem !important;
  }