/* ==========================================================
   ألوان وقياسات قابلة للتعديل من مكان واحد
   ========================================================== */
:root{
  --red:#e2272e;
  --red-dark:#c81f26;
  --red-soft:#fbe2e3;
  --text-strong:#7a2424;
  --text-placeholder:#b7a99c;
  --bar-bg:#ffffff;
  --page-bg:#eef0ee;
  --divider:#ececec;
  --radius-full:999px;
  --shadow-bar:0 6px 24px rgba(0,0,0,.07);
  --suggestion-hover:#f5f5f5;
}
*{ box-sizing:border-box; }

.vsf-wrap{ max-width:1100px; margin:0 auto; }

/* ===================== الشريط الرئيسي (Desktop) ===================== */
.vsf-bar{
  direction:rtl;
  display:flex;
  flex-direction:row-reverse;
  align-items:stretch;
  background:var(--bar-bg);
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-bar);
  padding:6px;
  gap:2px;
  margin:0;
  position:relative;
}

.vsf-btn{
  flex: 0 0 auto;
  min-width: 150px;
  border:none;
  cursor:pointer;
  background:linear-gradient(180deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff;
  font-size:15px;
  font-weight:700;
  padding:0 24px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vsf-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(226,39,46,.35); }
.vsf-btn:focus-visible{ outline:3px solid var(--text-strong); outline-offset:2px; }

.vsf-divider{ width:1px; background:var(--divider); margin:10px 4px; flex:0 0 auto; }

/* حقل عام وتوزيع ذكي للمساحات على الشاشات الكبيرة */
.vsf-field{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1.2 1 150px;
  min-width:0;
  padding:6px 14px;
  border-radius:var(--radius-full);
  transition:background .15s ease;
}
.vsf-field:hover{ background:#fafafa; }

/* إعطاء مساحة أكبر لحقل الاستلام وحقل التسليم لمنع قص النصوص الطويلة */
.vsf-field[data-role="pickup-location"],
.vsf-dropoff-group {
  flex: 2 1 210px;
}

/* تاريخ الاستلام والتسليم بمساحة مثالية */
.vsf-date-field {
  flex: 1.3 1 160px;
  cursor: pointer;
}

/* قسم تحديد الدولة */
.vsf-country-field {
  flex: 0 0 140px;
  cursor: pointer;
}

/* سهم المؤشر الأحمر للأسفل في القوائم المنسدلة */
.vsf-arrow-indicator {
  width: 16px;
  height: 16px;
  color: var(--red);
  display: block;
  flex-shrink: 0;
  margin-right: auto; /* يدفعه لأقصى اليسار في تصميم الـ RTL */
}

/* ===================== حقول المواقع ===================== */
.vsf-location-wrapper{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}

.vsf-text-input{
  flex:1 1 auto;
  min-width:0;
  border:none !important;
  outline:none;
  background:transparent;
  font-size:14px;
  color:var(--text-strong);
  text-align:right;
  font-family:inherit;
  padding:4px 0;
  margin-top: 10px !important;
}
.vsf-text-input::placeholder{ color:var(--text-placeholder); }

/* ===================== قائمة الاقتراحات المدمجة ===================== */
.vsf-location-suggestions{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  left:auto; /* فك الارتباط بالجهة اليسرى للمدخل للتمدد خارج الحقل */
  width:320px; /* تحديد عرض مريح ومستقل عن عرض الحقل الصغير لمنع تشوه النصوص */
  max-width: 90vw; /* لمنع خروج القائمة عن نطاق شاشات العرض المتوسطة */
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  border:1px solid #eef0ee;
  overflow:hidden;
  z-index:1000;
  display:none;
}
.vsf-location-suggestions.active{ display:block; }

.vsf-suggestion-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  cursor:pointer;
  transition:background .15s ease;
  border-bottom:1px solid #f9f9f9;
  direction:ltr; /* تماشي النصوص الإنجليزية لتبدأ من اليسار، والأيقونة على اليمين */
  text-align:left;
}
.vsf-suggestion-item:last-child{ border-bottom:none; }
.vsf-suggestion-item:hover{ background:var(--suggestion-hover); }

.vsf-suggestion-text {
  font-size:14px;
  color:#333;
  font-weight:500;
  font-family: inherit;
  white-space:nowrap; /* يمنع انقسام النص ليظل في سطر واحد دائماً */
  overflow:hidden;
  text-overflow:ellipsis; /* يضيف (...) تلقائياً عند زيادة طول النص عن المساحة المتاحة */
  flex:1;
  padding-right:12px; /* مسافة أمان تفصل النص عن الأيقونة */
}

.vsf-suggestion-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  flex-shrink:0; /* يمنع انضغاط الأيقونة */
}
.vsf-suggestion-icon svg{
  width:18px;
  height:18px;
  display:block;
}

/* ===================== أيقونات الحقول (تحسين لمطابقة لقطة الشاشة) ===================== */
.vsf-icon-circle{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f5f6 !important; /* خلفية دائرية رمادية فاتحة وموحدة بالكامل */
  color:var(--red) !important; /* لون الأيقونة الداخلي أحمر ناصع */
}
.vsf-icon-circle svg,
.vsf-icon-circle path {
  width:16px;
  height:16px;
  stroke:var(--red) !important;
  fill:none;
}
/* لدعم التعبئة للأيقونات الممتلئة كالأرضية والدبوس */
.vsf-icon-circle[id*="Icon"] svg,
.vsf-icon-circle[id*="Icon"] path {
  fill:var(--red) !important;
  stroke:none !important;
}

/* ===================== حقول التاريخ والمدخلات ===================== */
.vsf-date-input{
  flex:1 1 auto;
  min-width:0;
  border:none !important;
  outline:none;
  background:transparent;
  font-size:14px;
  font-weight:600;
  color:var(--text-strong);
  text-align:right;
  font-family:inherit;
  cursor:pointer;
  margin-top: 10px !important;
}
.vsf-date-input::placeholder{ color:var(--text-placeholder); font-weight:400; }

/* ===================== تخصيص ألوان Flatpickr لتتناسق مع هوية الموقع الحمراء ===================== */
.flatpickr-calendar {
  font-family: inherit;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #eef0ee !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.flatpickr-day.today {
  border-color: var(--red) !important;
}
.flatpickr-day:hover {
  background: var(--red-soft) !important;
}
.flatpickr-time input:hover, 
.flatpickr-time .flatpickr-am-pm:hover, 
.flatpickr-time input:focus, 
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--red-soft) !important;
}

/* ===================== Dropdown الدول ===================== */
.vsf-country-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  list-style:none;
  margin:0;
  padding:6px;
  z-index:50;
}
.vsf-country-dropdown[hidden]{ display:none; }
.vsf-country-dropdown li{
  padding:9px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--text-strong);
  cursor:pointer;
  text-align:right;
  white-space:nowrap;
}
.vsf-country-dropdown li:hover{ background:var(--red-soft); }

/* ===================== Toggle ===================== */
.vsf-toggle-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 6px;
}
.vsf-toggle{ position:relative; width:42px; height:24px; display:block; }
.vsf-toggle input{
  position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2;
}
.vsf-toggle .track{
  position:absolute; inset:0;
  background:#fff;
  border:1.5px solid var(--red);
  border-radius:var(--radius-full);
  transition:background .2s ease;
}
.vsf-toggle .knob{
  position:absolute; top:2.5px; left:3px;
  width:17px; height:17px;
  background:var(--red);
  border-radius:50%;
  transition:transform .2s ease, background .2s ease;
}
.vsf-toggle input:checked ~ .track{ background:var(--red); }
.vsf-toggle input:checked ~ .knob{ transform:translateX(18px); background:#fff; }

/* ===================== Dropoff Group ===================== */
.vsf-dropoff-group{
  position:relative;
  display:none;
  align-items:center;
  gap:10px;
  flex:1 1 130px;
  min-width:0;
  padding:6px 14px;
  border-radius:var(--radius-full);
}
.vsf-bar.is-two-locations .vsf-dropoff-group{ display:flex; }

/* ===================== Country Field ===================== */
.vsf-country-field{
  cursor:pointer;
  flex:0 0 auto;
  min-width:90px;
}
.vsf-country-field .vsf-label{
  flex:0 0 auto;
  font-size:13px;
  font-weight:600;
}

/* ===================== التجاوب على شاشات التابلت (768px إلى 1023px) ===================== */
@media (min-width:768px) and (max-width:1023px){
  .vsf-bar{
    flex-wrap:wrap;
    flex-direction:row-reverse;
    border-radius:24px;
    padding:12px;
    gap:10px;
  }
  .vsf-divider{ display:none !important; }
  
  .vsf-field,
  .vsf-dropoff-group{
    flex:1 1 50px !important;
    background:#fbfbfb;
    border:1px solid #f0f0f0;
    border-radius:14px;
    padding:12px 16px;
  }
  
  .vsf-country-field {
    flex:1 1 50px !important;
  }
  
  .vsf-toggle-wrap{
    flex:1 1 100%;
    justify-content:flex-end;
    padding:4px 10px;
  }
  
  .vsf-btn{
    flex:1 1 100% !important;
    padding:15px 0;
    border-radius:14px;
  }
}

/* ===================== التجاوب المالي والكامل للموبايل (مطابقة تامة لقطة الشاشة) ===================== */
@media (max-width:767px){
  .vsf-bar{
    flex-direction:column; /* استخدام نمط العمود وتحديد الترتيب الموجه */
    background:#ffffff !important;
    border-radius:20px !important;
    border:1px solid #f2f3f4 !important;
    box-shadow:0 8px 30px rgba(0,0,0,0.03) !important;
    padding:12px 20px !important;
    gap:0 !important;
  }
  .vsf-divider{ display:none !important; }
  
  .vsf-field,
  .vsf-toggle-wrap{
    width:100% !important;
    padding:14px 0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    border-bottom:1px solid #f3f4f5 !important; /* فاصل خطي ممتد ومطابق للصورة */
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    margin:0 !important;
    min-height:56px !important;
  }

  .vsf-dropoff-group {
    display: none !important;
  }

  .vsf-bar.is-two-locations .vsf-dropoff-group {
    width:100% !important;
    padding:14px 0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    border-bottom:1px solid #f3f4f5 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    margin:0 !important;
    min-height:56px !important;
  }
  
  .vsf-country-field { order: 1 !important; }
  .vsf-field[data-role="pickup-location"] { order: 2 !important; }
  .vsf-toggle-wrap { order: 3 !important; }
  .vsf-dropoff-group { order: 4 !important; }
  #vsfDatePickupField { order: 5 !important; }
  #vsfDateReturnField { order: 6 !important; }
  .vsf-btn { order: 7 !important; }

  .vsf-arrow-indicator {
    margin-right: 0 !important;
    margin-left: auto !important;
    order: 1 !important;
  }
  
  .vsf-location-wrapper {
    order: 2 !important;
  }
  
  .vsf-icon-circle {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .vsf-country-field .vsf-label {
    order: 2 !important;
    text-align: right !important;
    flex: 1 !important;
    padding-right: 10px !important;
  }

  .vsf-toggle-wrap {
    justify-content: flex-end !important;
  }

  .vsf-country-dropdown{
    right:10px;
    left:10px;
    min-width:0;
  }
  
  .vsf-location-suggestions{
    right:0;
    left:0 !important;
    width:auto !important;
    max-width:100% !important;
  }
  
  .vsf-btn{
    margin:12px 0 6px 0 !important;
    padding:16px 0 !important;
    width:100% !important;
    font-size:16px !important;
    font-weight:700 !important;
    border-radius:12px !important;
    background:linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%) !important;
    box-shadow:0 4px 15px rgba(226,39,46,0.2) !important;
    color:#ffffff !important;
    flex:0 0 auto !important;
  }
  
  .vsf-field, .vsf-dropoff-group {
    flex: 2 1 50px !important;
    }

}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}