/* =====================================================
   AOL FORM — FULL FORCED CSS (Elementor-safe)
   Scope: .aol-form--skin ONLY
   Replaces your old CSS بالكامل
===================================================== */

/* ---------- HARD RESET (stop theme/Elementor overrides) ---------- */
.aol-form--skin,
.aol-form--skin * {
  box-sizing: border-box !important;
  transform: none !important;
  filter: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  animation: none !important;
}

.aol-form--skin {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: 680px !important; /* match your source .form-holder max */
  margin: 0 auto !important;
}

/* make sure wrappers don't clip dropdowns */
.aol-form--skin,
.aol-form--skin .inputs-container,
.aol-form--skin .phone-wrapper,
.aol-form--skin .field,
.aol-form--skin .select {
  overflow: visible !important;
}

/* ---------- LAYOUT (2-column like source) ---------- */
.aol-form--skin .inputs-container.aol-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0px 20px !important; /* ✅ as requested */
  width: 100% !important;
  align-items: stretch !important;
}

.aol-form--skin .aol-field {
  flex: 1 1 calc(50% - 10px) !important; /* half minus half gap */
  min-width: 0 !important;
  margin: 0 0 24px 0 !important;
}

.aol-form--skin .aol-full {
  flex: 1 1 100% !important;
}

/* Labels are just spacers in your markup */
.aol-form--skin label {
  display: none !important;
}

/* ---------- INPUTS / SELECTS / TEXTAREA (force source look) ---------- */
.aol-form--skin input[type="text"],
.aol-form--skin input[type="email"],
.aol-form--skin input[type="tel"],
.aol-form--skin input[type="number"],
.aol-form--skin select,
.aol-form--skin textarea,
.aol-form--skin .input,
.aol-form--skin .textarea {
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 14px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 2px !important;
  font-size: 16px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  line-height: 1.2 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  max-width: 100% !important;
}

.aol-form--skin textarea,
.aol-form--skin .textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* placeholder color like source */
.aol-form--skin input::placeholder,
.aol-form--skin textarea::placeholder {
  color: #777777 !important;
  opacity: 1 !important;
}

/* focus border like source */
.aol-form--skin input:focus,
.aol-form--skin select:focus,
.aol-form--skin textarea:focus {
  border-color: #319b47 !important;
  outline: none !important;
}

/* ---------- SELECT: keep normal until submit validation ---------- */
.aol-form--skin select,
.aol-form--skin select#countries {
  background-color: #ffffff !important;
  border-color: #d0d0d0 !important;
  color: #777777 !important; /* placeholder look */
}

/* once a real value selected -> black text */
.aol-form--skin select#countries:not(.parsley-error):valid {
  color: #000000 !important;
}

/* DO NOT tint list/background on error; only border red */
.aol-form--skin select.parsley-error,
.aol-form--skin input.parsley-error,
.aol-form--skin textarea.parsley-error {
  border-color: #d63638 !important;
  background-color: #ffffff !important; /* ✅ remove pink tint */
}

/* also prevent any container from being tinted */
.aol-form--skin .select,
.aol-form--skin .field {
  background: transparent !important;
}

/* ---------- SELECT CARET (override Elementor) ---------- */
.aol-form--skin select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 36px !important;
}

/* ---------- Parsley errors list ---------- */
.aol-form--skin .parsley-errors-list {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #d63638 !important;
}

.aol-form--skin .parsley-errors-list li {
  margin: 0 !important;
}

/* ---------- PHONE (intl-tel-input) ---------- */
.aol-form--skin .iti {
  width: 100% !important;
  display: block !important;
}

.aol-form--skin .iti input {
  width: 100% !important;
  padding-left: 56px !important; /* space for flag */
}

/* match hover in source */
.aol-form--skin button.iti__selected-country:hover {
  background-color: #eeeeee !important;
}

/* stop country list being hidden/behind */
.aol-form--skin .iti__country-list {
  z-index: 999999 !important;
}

/* ---------- CONSENT (fix alignment + remove italic weirdness) ---------- */
.aol-form--skin .consent-container,
.aol-form--skin .aol-consent {
  margin-top: 10px !important;
  padding-bottom: 0 !important;
}

.aol-form--skin .consent {
  margin: 0 !important;
}

.aol-form--skin .consent,
.aol-form--skin .consent label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-style: normal !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  color: #555555 !important;
  line-height: 1.5 !important;
}

.aol-form--skin .consent small,
.aol-form--skin .consent span {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #555555 !important;
  font-style: normal !important;
}

.aol-form--skin .consent input[type="checkbox"],
.aol-form--skin .consent input[type="radio"] {
  width: auto !important;
  min-height: unset !important;
  margin-top: 6px !important;
}

/* links like source */
.aol-form--skin .consent a {
  color: #319b47 !important;
  text-decoration: underline !important;
}

/* ---------- SUBMIT BUTTON (source style) ---------- */
.aol-form--skin .submit-wrapper,
.aol-form--skin .field.submit-wrapper {
  margin-top: 0 !important;
}

.aol-form--skin button.button,
.aol-form--skin button.flex-btn,
.aol-form--skin .btn-submit {
  width: 100% !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 2px !important;
  background-color: #319b47 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  font-family: "Proxima Nova", Sans-serif !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.aol-form--skin button.button:hover,
.aol-form--skin button.flex-btn:hover,
.aol-form--skin .btn-submit:hover {
  opacity: 0.7 !important;
  background: #319b47 !important;
}

/* Loader SVG: hidden by default */
.aol-form--skin button.flex-btn svg,
.aol-form--skin button.button svg {
  display: none !important;
  width: 18px !important;
  height: 18px !important;
}

/* show loader only when JS adds .is-loading */
.aol-form--skin button.is-loading svg {
  display: inline-block !important;
}

.aol-form--skin button.is-loading {
  opacity: 0.9 !important;
}

/* Optional: dim text when loading (requires <span class="btn-text">) */
.aol-form--skin button.is-loading .btn-text {
  opacity: 0.8 !important;
}

/* ---------- HONEYPOT: keep hidden ---------- */
.aol-form--skin .hfield {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Hide Parsley messages until user tries submit */
.aol-form--skin:not(.aol-submitted) .parsley-errors-list,
.aol-form--skin:not(.aol-submitted) .parsley-errors-list.filled {
  display: none !important;
}

/* Also hide any custom "SELECT NATIONALITY" message if it's inside parsley list */
.aol-form--skin:not(.aol-submitted) .parsley-errors-list li {
  display: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .aol-form--skin {
    max-width: 100% !important;
  }

  .aol-form--skin .inputs-container.aol-grid {
    gap: 16px !important;
  }

  .aol-form--skin .aol-field {
    flex: 1 1 100% !important;
    margin-bottom: 16px !important;
  }
}

.aol-form--skin:not(.aol-submitted) .parsley-errors-list,
.aol-form--skin:not(.aol-submitted) .parsley-errors-list.filled {
  display: block !important;
}

.aol-form--skin:not(.aol-submitted) .parsley-errors-list li {
  display: block !important;
  font-size: 12px !important;
}

.parsley-errors-list.filled {
  order: 3;
  margin-top: -10px;
  margin-bottom: 10px;
  padding-left: 30px;
  display: block !important;
}

.parsley-errors-list li {
  display: block !important;
}

.consent-container .parsley-errors-list.filled {
  position: relative !important;
  top: 12px !important;
}