/* تعريف المتغيرات لضمان تماسك الألوان والأنماط بسهولة */
:root {
    --main-bg-color: #f7f9fc; /* لون خلفية فاتح */
    --text-color: #2c3e50; /* لون نص داكن للتباين */
    --link-color: #3498db; /* لون أزرق مشرق للروابط */
    --link-hover-color: #2980b9; /* لون أزرق داكن عند التحويم */
    --active-color: #e67e22; /* لون برتقالي للعناصر النشطة */
    --completed-color: #3498db; /* لون أزرق للعناصر المكتملة */
    --border-color: #bdc3c7; /* لون حدود رمادي فاتح */
    --highlight-scale: 1.1; /* نسبة التكبير عند التحويم */
}

/* تحسين الأنماط العامة لتعزيز القابلية والتماسك */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--main-bg-color);
    margin: 0;
    padding: 20px;
    color: var(--text-color);
    transition: background-color 0.3s ease-in-out; /* تحريك سلس لتغيير اللون */
}

a {
    color: var(--link-color);
    text-decoration: none; /* إزالة الخطوط تحت الروابط */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; /* تحريك سلس للون وتأثير تحويم */
}

a:hover {
    text-decoration: underline; /* إضافة تأثير تحويم للروابط */
    color: var(--link-hover-color);
    transform: translateY(-2px); /* حركة خفيفة لأعلى عند التحويم */
}

/* إضافة خط وصل بطريقة احترافية للتقدم */
#progressbar {
    display: flex;
    margin-bottom: 30px;
    justify-content: space-evenly;
    list-style: none; /* إزالة نقاط القائمة */
    padding: 0;
    position: relative; /* للسماح بوضع الخطوط الواصلة بشكل صحيح */
}

#progressbar::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--border-color); /* لون الخط الواصل */
    z-index: 1; /* لضمان ظهور الخط خلف العناصر */
    transition: background-color 0.3s ease-in-out; /* تحريك سلس لتغيير لون الخط */
}

.progress-step {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--border-color);
    position: relative; /* لتحسين التحكم في التكديس */
    z-index: 2; /* لجعل الخطوات تظهر فوق الخط الواصل */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease; /* تحريكات سلسة للخلفية، التكبير والظل */
}

.progress-step:hover {
    transform: scale(var(--highlight-scale)); /* تأثير تحويم بالتكبير */
    box-shadow: 0 4px 8px rgba(241, 196, 15, 0.2); /* إضافة ظل عند التحويم */
}

.progress-step.active,
.progress-step.completed {
    color: #fff; /* لون النص للعناصر النشطة والمكتملة */
}

.progress-step.active {
    background-color: #cd6a7b; 
}

.progress-step.completed {
    background-color: var(--completed-color);
}

.progress-step.active::after {
    content: ". " attr(data-title); /* إضافة عنوان للخطوة النشطة */
    margin-left: 5px;
}









/* إخفاء جميع الخطوات */
.step {
    display: none;
}

/* عرض الخطوة الأولى فقط */
#step1 {
    display: block;
}


/* Step 1: Choose Category Styles */
#step1 {
    text-align: center;
    margin-top: 20px;
}

#step1 h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

/* نمط الخيارات ضمن الفئات */
/* نمط الخيارات ضمن الفئات */
.category-option {
    display: inline-flex; /* استخدام flex لتحسين تماسك المحتوى */
    flex-direction: column; /* ترتيب المحتوى بشكل عمودي */
    width: 300px; /* العرض ثابت لكل خيار */
    margin: 0 10px 20px; /* مسافة بين الخيارات وأسفل كل خيار */
    cursor: pointer; /* مؤشر الفأرة يعكس القابلية للنقر */
    border: 1px solid #ddd; /* حد خفيف لتعريف الحدود */
    border-radius: 10px; /* حواف مدورة لمظهر أنيق */
    overflow: hidden; /* يمنع المحتوى من تجاوز الحدود */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات سلسة عند التحويم */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ظل خفيف لإضافة عمق */
}

/* تأثيرات عند تحويم الخيارات */
.category-option:hover {
    transform: translateY(-5px); /* رفع العنصر قليلاً */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* ظل أكثر وضوحًا للتأكيد */
}

/* نمط الصور ضمن الخيارات */
.category-option img {
    width: 100%; /* الصورة تأخذ العرض الكامل للعنصر */
    height: 150px; /* تحديد ارتفاع ثابت للصور */
    object-fit: contain; /* يضمن الاحتفاظ بنسب الأبعاد دون قص */
    border-bottom: 1px solid #ddd; /* فاصل بين الصورة والنص */
}

/* نمط النصوص ضمن الخيارات */
.category-option p {
    font-size: 18px; /* حجم الخط المناسب للقراءة */
    color: #333; /* لون النص الداكن لتعزيز التباين */
    padding: 10px 15px; /* مساحة داخلية حول النص */
    margin: 0; /* إزالة الهوامش الافتراضية */
    background-color: #f9f9f9; /* خلفية فاتحة للنص للتمييز */
    text-align: center; /* محاذاة النص في المركز */
}



/* أنماط الخطوة 2: اختيار الخدمة */
#step2 {
    margin-top: 20px;
    font-family: 'Arial', sans-serif; /* استخدام خط عصري ونظيف */
}

#step2 h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    font-weight: normal; /* لتخفيف وزن الخط */
    margin-bottom: 30px; /* زيادة المسافة للتهوية */
}

#step2 table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto; /* زيادة المسافة للتهوية */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للجدول */
}

#step2 th, #step2 td {
    text-align: left;
    padding: 15px; /* زيادة التبطين لمزيد من الراحة */
    border-bottom: 2px solid #eee; /* توسيع الحدود لتعزيز الفصل */
}

#step2 th {
    background-color: #a90c56; /* تغيير لون الخلفية لظل أزرق أنيق */
    color: white;
    font-size: 16px; /* تعديل حجم الخط للتوازن */
}

#step2 tr:hover {
    background-color: #f0f0f0; /* تغيير لون التحويم لنعومة أكبر */
}

#step2 button {
    background-color: #b7569a; /* توحيد اللون مع العناوين */
    color: white;
    border: none;
    padding: 10px 20px; /* زيادة التبطين لراحة أفضل */
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease; /* تأثير انتقال سلس لكافة الخصائص */
}

#step2 button:hover {
    background-color: #4e548d; /* تغيير اللون عند التحويم لتأثير دقيق */
}

/* أنماط الخطوة 3: اختيار الحلاق */
#step3 {
    text-align: center;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* استخدام خط عصري وأنيق */
}

#step3 h2 {
    color: #333;
    font-size: 24px;
    font-weight: 300; /* استخدام وزن خفيف للخط لمزيد من الأناقة */
    margin-bottom: 30px; /* زيادة المسافة لتوفير مزيد من التنفس */
}

/* Base Styling for Barber Options */

.barber {
  display: inline-block;
  width: 200px;
  margin: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
}

.barber:hover {
  transform: translateY(-5px); /* Subtle movement effect */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Adjusted shadow for clarity */
}

.barber img {
  width: 100%; /* يضمن العرض الكامل للعنصر .barber */
  height: 150px; /* ارتفاع ثابت لكل الصور */
  object-fit: cover; /* يغطي الصورة المساحة المتاحة بالكامل، مع الحفاظ على نسبها */
  display: block;
}


.barber h2 {
  font-size: 16px; /* Reduced font size for better fit */
  color: #333;
  padding: 15px; /* Increased padding for comfort */
  margin: 0;
  background-color: #fff; /* White background for simplicity and purity */
  text-align: center; /* Center-aligning text for aesthetics */
}

.barber a {
  display: inline-block;
  background-color: #007bff; /* Example button color */
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 10px 15px; /* Adjust spacing around the button */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.barber a:hover {
  background-color: #0056b3; /* Darker shade on hover */
}




/* Step 4: Choose Date and Time - Design inspired by the provided image */
#step4 {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Arial', sans-serif;
}

#step4 h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 30px;
}

.calendar-container {
    width: 400px;
    background: #FFFFFF; /* خلفية بيضاء للتأكيد على النظافة */
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* ظل أخف لتأثير أكثر نعومة */
    overflow: hidden;
    border: 1px solid #BEC6D2; /* حدود بلون رمادي فاتح */
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ca3e6a; /* رأس الرزنامة بلون أزرق غامق */
    color: #FFFFFF; /* نص أبيض للتباين */
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
}

.calendar-header button {
    margin: 0;
    border: none;
    background: #ff0039; /* أزرار بلون أزرق أفتح قليلاً */
    color: #FFFFFF;
    font-size: 25px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50%;
    transition: background 0.3s, transform 0.3s;
}

.calendar-header button:hover {
    background: #5689C1; /* تغميق لون الزر عند تمرير الماوس */
    transform: scale(1.1);
}

.month-year {
    flex-grow: 1;
    text-align: center;
}

.day-names, .days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.day-names span, .days-grid .day {
    padding: 15px 0;
    transition: background-color 0.3s;
}

.days-grid .day {
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

.days-grid .day:hover {
    background-color: #D4E1F4; /* خلفية اليوم عند التمرير بالماوس بلون أزرق فاتح */
    transform: translateY(-5px);
}

.days-grid .day.selected {
    background-color: #e24a4a; /* خلفية اليوم المحدد بلون أزرق غامق */
    color: #FFFFFF;
    transform: scale(1.05);
}

.days-grid .day.disabled {
    color: #9CAAB6; /* يوم غير متاح بلون رمادي */
    cursor: default;
}

.slots-heading {
    text-align: center;
    padding: 15px;
    font-weight: bold;
    background-color: #fde0e8; /* عنوان الفترات بلون أزرق شاحب */
}

.time-selection {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.time-slot {
    padding: 10px 15px;
    margin: 5px;
    background-color: #f4d4d4; /* فترات الوقت بلون أزرق فاتح */
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    flex: 1;
    text-align: center;
    max-width: calc(50% - 10px);
}

.time-slot:hover {
    background-color: #BCCFEB; /* فترة الوقت عند تمرير الماوس بلون أزرق أفتح */
    transform: scale(1.1);
}

.time-slot.selected {
    background-color: #dc3545; /* فترة الوقت المحددة بلون أزرق غامق */
    color: #FFFFFF;
}

.selection-display, .actions {
    text-align: center;
    padding: 20px;
}

.actions button {
    margin: 10px;
    padding: 10px 25px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    background-color: #6BA9F0; /* أزرار الإجراءات بلون أزرق */
    color: #FFFFFF;
    font-weight: bold;
}

.actions button:hover {
    background-color: #5689C1; /* أزرار الإجراءات عند تمرير الماوس بلون أزرق أغمق */
    transform: scale(1.05);
}

.calendar-header button:disabled,
.day.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.day.today {
    background-color: #bbdbff; /* لون خلفية مميز لليوم الحالي */
    color: #FFFFFF; /* لون نص أبيض لتحسين التباين */
    font-weight: bold; /* جعل النص أكثر بروزاً */
    border: 1px solid #797979; /* إضافة حد لتعزيز التمييز */
}

#selected-date-time {
    font-size: 16px; /* تحديد حجم الخط */
    color: #2C3E50; /* تحديد لون النص */
    background-color: #ECF0F1; /* تحديد لون خلفية النص */
    padding: 10px 15px; /* تحديد البادئة حول النص */
    border-radius: 5px; /* تحديد نصف قطر الحدود للحصول على حواف مدورة */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للعنصر */
    margin: 10px 0; /* تحديد الهوامش العلوية والسفلية */
    text-align: center; /* تحديد محاذاة النص إلى الوسط */
    display: inline-block; /* جعل العنصر يشغل المساحة التي يحتاجها فقط */
    width: auto; /* تحديد العرض التلقائي بناءً على محتوى النص */
    max-width: 100%; /* ضمان عدم تجاوز العنصر لعرض الحاوية */
    overflow-wrap: break-word; /* تقسيم الكلمات لتجنب تجاوز النص للعنصر */
}

/* Base Styling for Contact Form */
.booking-container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Styling for different sections and groups */
.booking-step {
  display: none;
}

.booking-contact-section, .booking-payment-section, .booking-action-buttons {
  margin-bottom: 30px;
}

.booking-input-group, .booking-payment-option {
  margin-bottom: 15px;
}

.booking-input-group label, .booking-payment-section h2 {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

/* Input field styles with modifications for error highlighting using outline */
.booking-input-group input[type="text"],
.booking-input-group input[type="email"],
.booking-input-group input[type="tel"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: outline 0.3s, border-color 0.3s; /* Smooth transition for highlighting errors */
}

/* Highlighting fields that contain errors */
.booking-input-group input.error {
  border-color: #ff3860; /* Maintain border but in warning color */
  outline: 2px solid #ff3860; /* Use outline instead of changing border size */
  background-color: #ffe6e6; /* Optional: add a light background color */
}

/* Error message styling */
.error-message {
  color: #ff3860;
  font-size: 14px;
  margin-top: 5px;
}

.booking-payment-option label img {
  height: 50px;
  cursor: pointer;
}

.booking-action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.booking-btn-back, .booking-btn-complete {
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.booking-btn-back {
  background-color: #f44336; /* Red */
  color: white;
}

.booking-btn-complete {
  background-color: #4CAF50; /* Green */
  color: white;
}

.booking-payment-section h2 {
  margin-bottom: 20px;
}

.payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* تقليل الفجوة بين خيارات الدفع */
}

.payment-option {
  flex-basis: calc(33% - 10px); /* تصغير الحجم لاستيعاب 3 في صف واحد مع تقليل الفجوة */
  display: flex;
  align-items: center;
  border: 1px solid #ddd; /* تنعيم حدود الخيارات */
  padding: 8px; /* تقليل الحشوة لجعل الخيارات أصغر */
  border-radius: 8px; /* تقريب الزوايا قليلاً */
  cursor: pointer;
  transition: all 0.2s ease; /* تسريع الانتقال لجعله أكثر استجابة */
}

.payment-option:hover, .payment-option:focus-within {
  border-color: #4CAF50; /* تسليط الضوء عند تمرير الماوس أو التركيز */
  background-color: #f0f8f0;
}

.payment-option input[type="radio"] {
  display: none; /* إخفاء مربعات الاختيار بشكل تام */
}

.payment-option.selected {
  border-color: #4CAF50; /* تسليط الضوء عند الاختيار */
  background-color: #e8f4ea;
}

.payment-icon img {
  width: 40px; /* تصغير صور الأيقونات */
  height: auto;
  margin-right: 8px; /* تقليل الهامش الأيمن */
}

.payment-text {
  font-size: 14px; /* تصغير حجم النص ليناسب الخيارات الأصغر */
}




<!-- Step 6 -->
.confirmation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px; /* Adjust based on your design */
}

.confirmation-message {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #e8f4ea; /* Light green background */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-left: 6px solid #4CAF50; /* Green border */
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirmation-message p {
  margin: 0;
  color: #2a5934; /* Dark green text */
  font-size: 18px;
  text-align: center;
}