/**
 * ==================================================
 * CONTACT PAGE
 * ==================================================
 *
 * Presentation overrides for the Elementor + WPForms
 * Contact page. This file is loaded only on the
 * configured Hubungi Kami page.
 */

/* ==================================================
 * PAGE CONTENT
 * ==================================================
 */

.wpforms-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  color: var(--ik-color-text);
  font-family: inherit;
  font-size: var(--ik-font-size-sm);
  line-height: var(--ik-line-height-normal);
}

/* Keep Elementor/WPForms content aligned with the site's typography. */
.wpforms-container p,
.wpforms-container label,
.wpforms-container input,
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container button {
  font-family: inherit;
}

/* ==================================================
 * WPForms HEADER / PAGE INTRO
 * ==================================================
 */

.wpforms-head-container {
  margin: 0 0 var(--ik-space-2xl);
  padding: 0;
}

.wpforms-head-container .wpforms-title {
  margin: 0 0 var(--ik-space-sm);
  color: var(--ik-color-heading);
  font-size: clamp(30px, 3vw, 36px);
  font-weight: var(--ik-font-weight-bold);
  line-height: var(--ik-line-height-tight);
  letter-spacing: -0.02em;
}

.wpforms-head-container .wpforms-description {
  margin: 0;
  max-width: 760px;
  color: var(--ik-color-text);
  font-size: var(--ik-font-size-sm);
  font-weight: var(--ik-font-weight-normal);
  line-height: var(--ik-line-height-relaxed);
}

/* ==================================================
 * FIELD LAYOUT
 * ==================================================
 */

.wpforms-container .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: var(--ik-space-lg);
}

.wpforms-container .wpforms-field {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Hidden WPForms/anti-spam fields must remain untouched functionally. */
.wpforms-container .wpforms-field[style*="position: absolute"] {
  position: absolute !important;
}

/* ==================================================
 * LABELS
 * ==================================================
 */

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
  color: var(--ik-color-heading);
}

.wpforms-container .wpforms-field-label {
  display: block;
  margin: 0 0 var(--ik-space-sm);
  font-size: 15px;
  font-weight: var(--ik-font-weight-semibold);
  line-height: var(--ik-line-height-normal);
}

.wpforms-container .wpforms-required-label {
  color: var(--ik-color-primary);
  font-weight: var(--ik-font-weight-semibold);
}

/* ==================================================
 * INPUTS / SELECT / TEXTAREA
 * ==================================================
 */

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  background: var(--ik-color-card);
  border: 1px solid var(--ik-color-border);
  border-radius: var(--ik-radius-sm);
  color: var(--ik-color-text);
  font-size: var(--ik-font-size-sm);
  font-weight: var(--ik-font-weight-normal);
  line-height: var(--ik-line-height-normal);
  box-shadow: none;
  transition:
    border-color var(--ik-transition),
    box-shadow var(--ik-transition),
    background-color var(--ik-transition);
}

.wpforms-container .wpforms-field textarea {
  min-height: 132px;
  resize: vertical;
}

.wpforms-container .wpforms-field input::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
  color: var(--ik-color-muted);
  opacity: 1;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
  outline: none;
  border-color: var(--ik-color-primary);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.wpforms-container .wpforms-field select {
  min-height: 48px;
  padding-right: 40px;
  cursor: pointer;
}

/* ==================================================
 * FIELD DESCRIPTION / ERRORS
 * ==================================================
 */

.wpforms-container .wpforms-field-description {
  margin: var(--ik-space-xs) 0 0;
  color: var(--ik-color-muted);
  font-size: var(--ik-font-size-xs);
  line-height: var(--ik-line-height-normal);
}

.wpforms-container .wpforms-error {
  margin: var(--ik-space-xs) 0 0;
  color: var(--ik-color-danger);
  font-size: var(--ik-font-size-xs);
  line-height: var(--ik-line-height-normal);
}

/* ==================================================
 * SUBMIT BUTTON
 * ==================================================
 */

.wpforms-container .wpforms-submit-container {
  margin-top: var(--ik-space-lg);
  padding: 0;
}

.wpforms-container button.wpforms-submit,
.wpforms-container input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--ik-space-lg);
  background: var(--ik-color-primary) !important;
  border: 1px solid var(--ik-color-primary) !important;
  border-radius: var(--ik-radius-sm) !important;
  color: #fff !important;
  font-size: var(--ik-font-size-sm) !important;
  font-weight: var(--ik-font-weight-semibold) !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background-color var(--ik-transition),
    border-color var(--ik-transition),
    transform var(--ik-transition);
}

.wpforms-container button.wpforms-submit:hover,
.wpforms-container input[type="submit"]:hover {
  background: var(--ik-color-primary-hover) !important;
  border-color: var(--ik-color-primary-hover) !important;
  color: #fff !important;
}

.wpforms-container button.wpforms-submit:focus-visible,
.wpforms-container input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18) !important;
}

/* ==================================================
 * MOBILE
 * ==================================================
 */

@media (max-width: 767px) {
  .wpforms-container {
    max-width: 100%;
  }

  .wpforms-head-container {
    margin-bottom: var(--ik-space-xl);
  }

  .wpforms-head-container .wpforms-title {
    font-size: 30px;
  }

  .wpforms-container .wpforms-field-container {
    gap: var(--ik-space-lg);
  }

  .wpforms-container .wpforms-submit-container {
    margin-top: var(--ik-space-md);
  }

  .wpforms-container button.wpforms-submit,
  .wpforms-container input[type="submit"] {
    width: 100%;
  }
}