@charset "UTF-8";
/* ==========================================================================
   Contact (تواصل)
   ========================================================================== */

.contact {
  margin-top: var(--section-gap);
}

.contact__card {
  min-height: 530px;
  display: grid;
  grid-template-columns: 599fr 639fr; /* RTL: info (right) | form (left) */
  border: 1px solid var(--c-border-blue);
  border-radius: 32px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

/* ---------- Info ---------- */
.contact__info {
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 23.1px;
}

.contact__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-primary);
}

.contact__lead {
  max-width: 426px;
  min-height: 59px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--c-gray-dark);
}

.contact__list {
  list-style: none;
  margin: 0;
  padding: 24.9px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--c-gray-dark);
}
.contact__list a:hover {
  color: var(--c-secondary-dark);
}

.contact__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-secondary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact__icon-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* ---------- Form ---------- */
.contact__form-wrap {
  padding: 80px 80px 100px;
  background: var(--c-white);
}

/*
 * Entrance (Figma "تواصل مع أوج": Default -> Variant2, smart animate, "Quick" spring, 0.744s):
 * the empty card is shown first; the info column slides in from the right (499px) and the
 * white form panel from the left (646px), both clipped by the card. linear() reproduces
 * the spring; older browsers fall back to the cubic-bezier.
 */
@media (min-width: 861px) {
  .contact__info,
  .contact__form-wrap {
    transition: transform 0.744s cubic-bezier(0.34, 1.3, 0.64, 1);
    transition-timing-function: linear(0, 0.116, 0.364, 0.63, 0.851, 1.001, 1.082, 1.108, 1.099, 1.074, 1.045, 1.02, 1.002, 0.992, 0.988, 0.989, 0.991, 0.995, 0.997, 1, 1.001, 1.001, 1.001, 1.001, 1);
  }
  .contact__info {
    transform: translateX(499px);
  }
  .contact__form-wrap {
    transform: translateX(-646px);
  }
  .contact.is-visible .contact__info,
  .contact.is-visible .contact__form-wrap {
    transform: none;
  }
}
@media (max-width: 860px) {
  .contact__info,
  .contact__form-wrap {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }
  .contact.is-visible .contact__info,
  .contact.is-visible .contact__form-wrap {
    opacity: 1;
  }
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 16px;
  line-height: 1.35;
  color: var(--c-primary);
}
.field .label--alt {
  color: var(--c-blue-900);
}
.field input,
.field select {
  width: 100%;
  padding: 18px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--c-gray-light-active);
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-tiny);
  line-height: 1.2;
  color: var(--c-primary);
  outline: none;
  transition: border-color 0.2s ease;
}
.field input::placeholder,
.field select::placeholder {
  color: var(--c-gray-normal);
}
.field input:focus,
.field select:focus {
  border-bottom-color: var(--c-primary);
}
.field input[dir=ltr] {
  text-align: right;
}
.field input[dir=ltr]::placeholder {
  text-align: right;
}
.field small {
  font-size: 12px;
  color: var(--c-secondary-dark);
}
.field--error input {
  border-bottom-color: var(--c-secondary);
}

.select {
  position: relative;
}
.select select {
  appearance: none;
  padding-left: 28px;
  color: var(--c-gray-700);
  cursor: pointer;
}
.select img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-30%);
  width: 21px;
  height: 21px;
  pointer-events: none;
}

.submit {
  width: 100%;
  padding: 15px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-primary);
  color: var(--c-white);
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 16px;
  line-height: 1.35;
  transition: background 0.25s ease;
}
.submit img {
  width: 20px;
  height: 20px;
}
.submit:hover, .submit:focus-visible {
  background: var(--c-secondary);
}

.contact__success {
  font-size: 14px;
  color: #1f7a4d;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .contact__info,
  .contact__form-wrap {
    padding: 48px;
  }
}
@media (max-width: 860px) {
  .contact__card {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
  .contact__info,
  .contact__form-wrap {
    padding: 32px 24px;
  }
}