.ali-contact {
  background: linear-gradient(180deg, var(--color-black), oklch(8% 0.012 78));
}

.ali-contact__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.ali-contact__copy h2 {
  margin: 1rem 0;
  font-size: var(--fs-h2);
  color: var(--color-gold-soft);
}

.ali-contact__copy p {
  color: var(--color-muted);
}

.ali-contact__channels {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ali-contact__channels a {
  position: relative;
  width: fit-content;
  color: var(--color-gold-soft);
  font-weight: 800;
  text-decoration: none;
  transition:
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.ali-contact__channels a::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.18rem;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.32;
  transform: scaleX(0.58);
  transform-origin: right;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.ali-contact__channels a:hover,
.ali-contact__channels a:focus-visible {
  --ali-hover-y: -2px;

  color: var(--color-ink);
}

.ali-contact__channels a:hover::after,
.ali-contact__channels a:focus-visible::after {
  opacity: 0.72;
  transform: scaleX(1);
}

.ali-contact__form {
  position: relative;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  overflow: hidden;
  transition:
    border-color 220ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.ali-contact__form:hover {
  --ali-hover-y: -3px;

  border-color: var(--color-line-strong);
  box-shadow: 0 24px 66px oklch(4% 0.01 78 / 0.34);
}

.ali-contact__form::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, oklch(77% 0.12 83 / 0.12), transparent 16rem),
    linear-gradient(180deg, oklch(96% 0.01 84 / 0.035), transparent 42%);
}

.ali-contact__form > * {
  position: relative;
  z-index: 1;
}

.ali-contact .wpforms-container {
  margin: 0 !important;
}

.ali-contact .wpforms-container .wpforms-form {
  display: grid;
  gap: 1rem;
  direction: rtl;
  color: var(--color-ink);
  font-family: var(--font-body);
}

.ali-contact .wpforms-field {
  position: relative;
  padding: 0 !important;
}

.ali-contact .wpforms-field-label,
.ali-contact .wpforms-field-sublabel {
  display: block;
  margin: 0 0 0.42rem !important;
  color: var(--color-gold-soft) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

.ali-contact .wpforms-required-label {
  color: var(--color-gold) !important;
}

.ali-contact .wpforms-field-description {
  margin-top: 0.45rem !important;
  color: var(--color-muted) !important;
  font-size: var(--fs-small) !important;
  line-height: 1.6 !important;
}

.ali-contact .wpforms-field input[type="text"],
.ali-contact .wpforms-field input[type="email"],
.ali-contact .wpforms-field input[type="tel"],
.ali-contact .wpforms-field input[type="url"],
.ali-contact .wpforms-field input[type="number"],
.ali-contact .wpforms-field input[type="date"],
.ali-contact .wpforms-field select,
.ali-contact .wpforms-field textarea {
  width: 100% !important;
  max-width: none !important;
  min-height: 3.35rem !important;
  border: 1px solid oklch(74% 0.055 82 / 0.24) !important;
  border-radius: 0.9rem !important;
  padding: 0.82rem 1rem !important;
  color: var(--color-ink) !important;
  background:
    linear-gradient(180deg, oklch(96% 0.01 84 / 0.055), oklch(96% 0.01 84 / 0.028)),
    var(--color-black-3) !important;
  box-shadow:
    inset 0 1px 0 oklch(96% 0.01 84 / 0.05),
    0 10px 28px oklch(4% 0.01 78 / 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  outline: none !important;
  transition:
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.ali-contact .wpforms-field textarea {
  min-height: 8rem !important;
  resize: vertical;
}

.ali-contact .wpforms-field select {
  appearance: none;
  background-image:
    url("/wp-content/themes/ali-legal/assets/images/icons/dropdown-arrow.svg"),
    linear-gradient(180deg, oklch(96% 0.01 84 / 0.055), oklch(96% 0.01 84 / 0.028)) !important;
  background-position: left 1rem center, center !important;
  background-repeat: no-repeat !important;
  background-size: 0.78rem, auto !important;
  padding-inline-start: 2.5rem !important;
}

.ali-contact .wpforms-field input::placeholder,
.ali-contact .wpforms-field textarea::placeholder {
  color: oklch(72% 0.018 84 / 0.68) !important;
}

.ali-contact .wpforms-field input:focus,
.ali-contact .wpforms-field select:focus,
.ali-contact .wpforms-field textarea:focus {
  border-color: var(--color-gold) !important;
  box-shadow:
    inset 0 1px 0 oklch(96% 0.01 84 / 0.06),
    0 0 0 3px oklch(77% 0.12 83 / 0.13),
    0 16px 42px oklch(4% 0.01 78 / 0.2) !important;
}

.ali-contact .wpforms-field input.wpforms-error,
.ali-contact .wpforms-field select.wpforms-error,
.ali-contact .wpforms-field textarea.wpforms-error {
  border-color: oklch(72% 0.18 34) !important;
  background:
    linear-gradient(180deg, oklch(72% 0.18 34 / 0.08), oklch(96% 0.01 84 / 0.028)),
    var(--color-black-3) !important;
  box-shadow:
    inset 0 1px 0 oklch(96% 0.01 84 / 0.05),
    0 0 0 3px oklch(72% 0.18 34 / 0.13),
    0 14px 36px oklch(4% 0.01 78 / 0.18) !important;
}

.ali-contact .wpforms-error,
.ali-contact label.wpforms-error {
  position: relative;
  display: flex !important;
  gap: 0.5rem;
  align-items: flex-start;
  width: fit-content;
  margin: 0.55rem 0 0 !important;
  border: 1px solid oklch(72% 0.18 34 / 0.26);
  border-radius: 0.75rem;
  padding: 0.48rem 0.68rem !important;
  color: oklch(88% 0.1 52) !important;
  background:
    linear-gradient(180deg, oklch(72% 0.18 34 / 0.12), oklch(72% 0.18 34 / 0.055)),
    oklch(10% 0.015 78) !important;
  box-shadow: 0 12px 28px oklch(4% 0.01 78 / 0.18);
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.ali-contact .wpforms-error::before,
.ali-contact label.wpforms-error::before {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  content: "!";
  color: var(--color-black);
  background: oklch(88% 0.1 52);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.ali-contact .wpforms-field.wpforms-has-error .wpforms-field-label {
  color: oklch(88% 0.1 52) !important;
}

.ali-contact .wpforms-field.wpforms-has-error::after {
  position: absolute;
  inset-block-start: 2.35rem;
  inset-inline-end: 0.82rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  content: "";
  background: oklch(88% 0.1 52);
  box-shadow: 0 0 0 4px oklch(88% 0.1 52 / 0.12);
}

.ali-contact .wpforms-container .wpforms-form .wpforms-field-container + .wpforms-error-container,
.ali-contact .wpforms-container .wpforms-form .wpforms-error-container {
  margin: 0 0 1rem !important;
  border: 1px solid oklch(72% 0.18 34 / 0.34) !important;
  border-radius: 1rem !important;
  padding: 0.85rem 1rem !important;
  color: oklch(88% 0.1 52) !important;
  background:
    radial-gradient(circle at 100% 0%, oklch(72% 0.18 34 / 0.16), transparent 13rem),
    oklch(11% 0.015 78) !important;
}

.ali-contact .wpforms-container .wpforms-form .wpforms-error-container p,
.ali-contact .wpforms-container .wpforms-form .wpforms-error-container ul,
.ali-contact .wpforms-container .wpforms-form .wpforms-error-container li {
  margin-block: 0 !important;
  color: inherit !important;
  font-family: var(--font-body) !important;
  line-height: 1.7 !important;
}

.ali-contact .wpforms-field-checkbox ul,
.ali-contact .wpforms-field-radio ul {
  display: grid;
  gap: 0.45rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ali-contact .wpforms-field-checkbox li,
.ali-contact .wpforms-field-radio li {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--color-muted);
}

.ali-contact .wpforms-field-checkbox input,
.ali-contact .wpforms-field-radio input {
  accent-color: var(--color-gold);
}

.ali-contact .wpforms-submit-container {
  margin: 0.35rem 0 0 !important;
  padding: 0 !important;
}

.ali-contact .wpforms-submit {
  position: relative;
  min-height: 3.25rem !important;
  border: 1px solid oklch(88% 0.07 86 / 0.45) !important;
  border-radius: 999px !important;
  padding: 0.76rem 1.55rem !important;
  color: var(--color-black) !important;
  background: linear-gradient(135deg, var(--color-gold-soft), var(--color-gold-2)) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow:
    0 14px 36px oklch(4% 0.01 78 / 0.28),
    inset 0 1px 0 oklch(98% 0.01 86 / 0.5) !important;
  cursor: pointer;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    filter 180ms var(--ease-out);
}

.ali-contact .wpforms-submit:hover,
.ali-contact .wpforms-submit:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 18px 46px oklch(4% 0.01 78 / 0.34),
    0 0 0 5px oklch(77% 0.12 83 / 0.1),
    inset 0 1px 0 oklch(98% 0.01 86 / 0.58) !important;
}

.ali-contact .wpforms-confirmation-container-full,
.ali-contact .wpforms-confirmation-container {
  margin: 0 !important;
  border: 1px solid var(--color-line-strong) !important;
  border-radius: 1rem !important;
  padding: 1rem !important;
  color: var(--color-gold-soft) !important;
  background: oklch(77% 0.12 83 / 0.08) !important;
}

@media (min-width: 900px) {
  .ali-contact__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr);
  }
}