/* ==========================================================
   ألوان وقياسات قابلة للتعديل من مكان واحد
   ========================================================== */
: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-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;
  outline:none;
  background:transparent;
  font-size:14px;
  color:var(--text-strong);
  text-align:right;
  font-family:inherit;
  padding:4px 0;
}
.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:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vsf-icon-circle.solid{ background:var(--red); color:#fff; }
.vsf-icon-circle.soft{ background:var(--red-soft); color:var(--red); }
.vsf-icon-circle svg{ width:15px; height:15px; display:block; }

/* ===================== حقول التاريخ والمدخلات ===================== */
.vsf-date-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  font-weight:600;
  color:var(--text-strong);
  text-align:right;
  font-family:inherit;
  cursor:pointer;
  border-radius: 50px !important;
      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 calc(50% - 10px) !important;
    background:#fbfbfb;
    border:1px solid #f0f0f0;
    border-radius:14px;
    padding:12px 16px;
  }
  
  .vsf-country-field {
    flex:1 1 calc(50% - 10px) !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;
  }
}

/* ===================== التجاوب على شاشات الموبايل (أقل من 768px) ===================== */
@media (max-width:767px){
  .vsf-bar{
    flex-direction:column;
    border-radius:18px;
    padding:12px;
    gap:10px;
  }
  .vsf-divider{ display:none !important; }
  
  .vsf-field,
  .vsf-dropoff-group{
    width:100% !important;
    padding:14px 16px;
    background:#fbfbfb;
    border:1px solid #f0f0f0;
    border-radius:12px;
    flex:0 0 auto !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  .vsf-toggle-wrap{
    width:100%;
    padding:4px 8px;
    justify-content:flex-end;
  }
  
  .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-top:8px;
    padding:16px 0;
    width:100% !important;
    font-size:16px;
    border-radius:12px;
    flex:0 0 auto !important;
  }
}

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