/* ====== Base / Variables ====== */
:root {
  --ae-bg: #fff;
  --ae-border: #e6e6e6;
  --ae-border-strong: #d8d8d8;
  --ae-shadow: 0 2px 10px rgba(0,0,0,.04);
  --ae-radius: 10px;
  --ae-pad: 14px;
  --ae-gap: 14px;
  --ae-label: #6b7280;        /* رمادي هادي للعناوين */
  --ae-text: #111827;         /* نص أساسي */
  --ae-muted: #9ca3af;        /* Placeholder */
  --ae-focus: #2563eb;        /* أزرق الفوكس */
  --ae-section: #f8fafc;      /* خلفية خفيفة للعناوين */
  --ae-warning-bg: #fff1f2;
  --ae-warning-border: #fecdd3;
  --ae-warning-text: #b91c1c;
  --ae-success-bg: #ecfdf5;
  --ae-success-border: #a7f3d0;
  --ae-success-text: #065f46;
  --ae-font: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* يدعم RTL افتراضياً */
.ae-form,
.jet-form { direction: rtl; font-family: var(--ae-font); color: var(--ae-text); }

/* ====== Layout Wrappers ====== */
.ae-card, .jet-form {
  background: var(--ae-bg);
  border: 1px solid var(--ae-border);
  box-shadow: var(--ae-shadow);
  border-radius: 16px;
  padding: 22px;
}

/* عنوان قسم (مثل: بيانات المستلم) */
.ae-section-title {
  margin: 20px 0 10px;
  padding: 10px 14px;
  background: var(--ae-section);
  border: 1px solid var(--ae-border);
  border-radius: 12px;
  font-weight: 700;
  color: #111827;
}

/* شبكة الحقول */
.ae-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ae-gap);
}
@media (min-width: 768px){
  .ae-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .ae-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ====== Field ====== */
.ae-field, .jet-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ae-label, .jet-form__label {
  color: var(--ae-label);
  font-size: .95rem;
  font-weight: 600;
  padding-inline: 4px;
}

.ae-control,
.jet-form input[type="text"],
.jet-form input[type="email"],
.jet-form input[type="tel"],
.jet-form input[type="number"],
.jet-form input[type="password"],
.jet-form select,
.jet-form textarea,
.ae-input, .ae-select, .ae-textarea {
  background: var(--ae-bg);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius);
  padding: 14px 16px;
  min-height: 48px;
  line-height: 1.4;
  outline: none;
  box-shadow: var(--ae-shadow);
  transition: border-color .2s, box-shadow .2s;
}

.jet-form textarea, .ae-textarea { min-height: 110px; resize: vertical; }

/* Placeholder */
.ae-control::placeholder,
.jet-form input::placeholder,
.jet-form textarea::placeholder { color: var(--ae-muted); }

/* Hover + Focus */
.ae-control:hover,
.jet-form input:hover,
.jet-form select:hover,
.jet-form textarea:hover { border-color: var(--ae-border-strong); }

.ae-control:focus,
.jet-form input:focus,
.jet-form select:focus,
.jet-form textarea:focus {
  border-color: var(--ae-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Select arrow RTL */
.jet-form select, .ae-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position: calc(1rem) 50%, calc(1.5rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-start: 2.2rem; /* مساحة السهم يمين */
}

/* Checkboxes / Radios */
.ae-check, .ae-radio,
.jet-form input[type="checkbox"], .jet-form input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--ae-focus);
}

/* Buttons */
.ae-btn, .jet-form__submit {
  background: var(--ae-focus);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ae-shadow);
}
.ae-btn:hover, .jet-form__submit:hover { filter: brightness(.95); }

/* ====== Messages (Error/Success like screenshot) ====== */
.ae-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid;
  margin-top: 6px;
  font-weight: 600;
}
.ae-alert--error {
  background: var(--ae-warning-bg);
  border-color: var(--ae-warning-border);
  color: var(--ae-warning-text);
}
.ae-alert--success {
  background: var(--ae-success-bg);
  border-color: var(--ae-success-border);
  color: var(--ae-success-text);
}
.ae-alert__icon {
  font-size: 18px; line-height: 1; margin-top: 2px;
}

/* حالة خطأ للحقل */
.is-invalid,
.jet-form .error,
.jet-form .jet-form__field.error input,
.jet-form .jet-form__field.error select,
.jet-form .jet-form__field.error textarea {
  border-color: var(--ae-warning-text) !important;
  box-shadow: 0 0 0 3px rgba(185,28,28,.12) !important;
}

/* مسافات بين المجموعات */
.ae-group { margin: 16px 0; }

/* اجعل الحقل يبدو عريض وممتد مثل الاسكرين */
.ae-wide .ae-control,
.jet-form .ae-wide input,
.jet-form .ae-wide select,
.jet-form .ae-wide textarea {
  width: 100%;
}

/* تصغير حجم الخط “سيكة” */
.ae-sm, .jet-form { font-size: 15px; }
.ae-sm .ae-label, .jet-form .jet-form__label { font-size: .9rem; }
