/* ===================================================
   Darwish Express Booking — Frontend Styles
   Version: 1.0.0
=================================================== */

/* ── المتغيرات ── */
:root {
  --deb-primary:        #1a6b3a;
  --deb-primary-dark:   #145530;
  --deb-primary-light:  #e8f5ee;
  --deb-accent:         #f0a500;
  --deb-accent-dark:    #d4920a;
  --deb-text:           #1e2d24;
  --deb-text-muted:     #6b7c72;
  --deb-border:         #d0ddd5;
  --deb-bg:             #f7faf8;
  --deb-white:          #ffffff;
  --deb-error:          #c0392b;
  --deb-success:        #1a6b3a;
  --deb-radius:         14px;
  --deb-radius-sm:      8px;
  --deb-shadow:         0 4px 24px rgba(26,107,58,.10);
  --deb-shadow-hover:   0 8px 32px rgba(26,107,58,.18);
  --deb-transition:     all .22s cubic-bezier(.4,0,.2,1);
  --deb-font:           'Segoe UI', 'Cairo', Tahoma, Arial, sans-serif;
}

/* ── الغلاف الرئيسي ── */
.deb-form-wrapper {
  font-family: var(--deb-font);
  color: var(--deb-text);
  line-height: 1.6;
  max-width: 720px;
  margin: 2rem auto;
}

/* ── البطاقة ── */
.deb-form-card {
  background: var(--deb-white);
  border-radius: var(--deb-radius);
  box-shadow: var(--deb-shadow);
  overflow: hidden;
  border: 1px solid var(--deb-border);
}

/* ── رأس النموذج ── */
.deb-form-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--deb-primary) 0%, var(--deb-primary-dark) 100%);
  padding: 1.5rem 2rem;
  color: var(--deb-white);
}

.deb-rtl .deb-form-header { flex-direction: row; }
.deb-ltr .deb-form-header { flex-direction: row; }

.deb-form-logo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.deb-form-logo svg { width: 100%; height: 100%; }

.deb-form-title {
  margin: 0 0 .2rem !important;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deb-white) !important;
  line-height: 1.2;
}

.deb-form-subtitle {
  margin: 0 !important;
  font-size: .85rem;
  opacity: .82;
  color: var(--deb-white);
}

/* ── جسم النموذج ── */
#deb-booking-form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* ── مجموعة الحقل ── */
.deb-field-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

/* ── التسمية ── */
.deb-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--deb-text);
}

.deb-label-required::after {
  content: ' *';
  color: var(--deb-error);
}

/* ── حقل الإدخال ── */
.deb-input,
.deb-select,
.deb-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .72rem 1rem;
  border: 1.5px solid var(--deb-border);
  border-radius: var(--deb-radius-sm);
  font-size: .95rem;
  font-family: var(--deb-font);
  color: var(--deb-text);
  background: var(--deb-white);
  transition: var(--deb-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.deb-input:focus,
.deb-select:focus,
.deb-textarea:focus {
  border-color: var(--deb-primary);
  box-shadow: 0 0 0 3px rgba(26,107,58,.12);
}

.deb-input.deb-error,
.deb-select.deb-error {
  border-color: var(--deb-error);
  box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}

.deb-textarea { resize: vertical; min-height: 90px; }

/* ── السيليكت ── */
.deb-select-wrapper {
  position: relative;
}

.deb-select-wrapper .deb-select {
  padding-inline-end: 2.4rem;
  cursor: pointer;
}

.deb-select-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--deb-text-muted);
  font-size: .8rem;
}

.deb-rtl .deb-select-arrow { left: .9rem; }
.deb-ltr .deb-select-arrow { right: .9rem; }

/* ── صف الهاتف ── */
.deb-phone-row {
  display: flex;
  gap: .6rem;
}

.deb-country-select {
  flex: 0 0 200px;
}

.deb-phone-input {
  flex: 1;
  min-width: 0;
}

/* ── حقل رقم التذكرة الشرطي (يظهر عند اختيار مطار الملكة علياء) ── */
.deb-ticket-field {
  background: var(--deb-primary-light);
  border: 1.5px solid rgba(26,107,58,.25);
  border-radius: var(--deb-radius-sm);
  padding: 1rem;
  transition: var(--deb-transition);
}

.deb-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── مجموعة الراديو ── */
.deb-radio-group {
  display: flex;
  gap: .8rem;
}

.deb-radio-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--deb-border);
  border-radius: var(--deb-radius-sm);
  cursor: pointer;
  transition: var(--deb-transition);
  user-select: none;
}

.deb-radio-card:hover {
  border-color: var(--deb-primary);
  background: var(--deb-primary-light);
}

.deb-radio-card input[type="radio"] {
  display: none;
}

.deb-radio-card:has(input:checked) {
  border-color: var(--deb-primary);
  background: var(--deb-primary-light);
  box-shadow: 0 0 0 2px rgba(26,107,58,.15);
}

.deb-radio-icon {
  font-size: 1.3rem;
}

.deb-radio-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--deb-text);
}

/* ── عداد الحقائب ── */
.deb-counter {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  border: 1.5px solid var(--deb-border);
  border-radius: var(--deb-radius-sm);
  overflow: hidden;
}

.deb-counter-btn {
  width: 42px;
  height: 42px;
  border: none;
  background: var(--deb-bg);
  color: var(--deb-text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: var(--deb-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deb-counter-btn:hover {
  background: var(--deb-primary);
  color: var(--deb-white);
}

.deb-counter-input {
  width: 56px;
  height: 42px;
  border: none;
  border-inline: 1.5px solid var(--deb-border);
  border-radius: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--deb-text);
  background: var(--deb-white);
  -moz-appearance: textfield;
}

.deb-counter-input::-webkit-inner-spin-button,
.deb-counter-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ── زر الإرسال ── */
.deb-submit-wrap {
  margin-top: .5rem;
}

.deb-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--deb-accent) 0%, var(--deb-accent-dark) 100%);
  color: var(--deb-white);
  border: none;
  border-radius: var(--deb-radius-sm);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--deb-font);
  cursor: pointer;
  transition: var(--deb-transition);
  letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(240,165,0,.30);
  text-decoration: none;
}

.deb-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(240,165,0,.40);
}

.deb-submit-btn:active {
  transform: translateY(0);
}

.deb-submit-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.deb-btn-icon svg {
  width: 20px;
  height: 20px;
}

/* ── Spinner ── */
.deb-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: deb-spin .7s linear infinite;
}

@keyframes deb-spin {
  to { transform: rotate(360deg); }
}

/* ── الرسائل ── */
.deb-messages {
  padding: 1rem 1.2rem;
  border-radius: var(--deb-radius-sm);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  animation: deb-fadeIn .3s ease;
}

.deb-messages.deb-success {
  background: var(--deb-primary-light);
  border: 1.5px solid var(--deb-primary);
  color: var(--deb-primary-dark);
}

.deb-messages.deb-error-msg {
  background: #fdf1f0;
  border: 1.5px solid var(--deb-error);
  color: var(--deb-error);
}

@keyframes deb-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── مخفي ── */
.deb-hidden {
  display: none !important;
}

/* ── خطأ التحقق ── */
.deb-field-error {
  font-size: .8rem;
  color: var(--deb-error);
  margin-top: .2rem;
  animation: deb-fadeIn .2s ease;
}

/* ── متجاوب ── */
@media (max-width: 600px) {
  #deb-booking-form {
    padding: 1.2rem;
    gap: 1rem;
  }

  .deb-form-header {
    padding: 1.2rem;
  }

  .deb-form-title {
    font-size: 1.15rem !important;
  }

  .deb-fields-row {
    grid-template-columns: 1fr;
  }

  .deb-phone-row {
    flex-direction: column;
  }

  .deb-country-select {
    flex: none;
  }

  .deb-radio-group {
    flex-direction: column;
  }

  .deb-submit-btn {
    font-size: .95rem;
  }
}