/* ==========================================================================
   CONTACT-US CSS - Contact Form Styling với Retail Design System
   ========================================================================== */

/* Contact Us Container */
.contact-us {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  margin: 0 auto;
  padding: var(--Space-5, 20px) var(--Space-10, 40px);
}

/* Title Container */
.contact-us-title-container {
  display: flex;
  padding: var(--Space-4, 16px) 0px var(--Space-8, 32px) 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--Space-2, 8px);
  align-self: stretch;
}

.contact-us-title {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: 40px;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  color: var(--On-background-Brand-Default, #231f20);
  margin-bottom: var(--Space-5, 20px);
  text-align: center;
}

.contact-us-title i {
  color: var(--Background-Brand-Primary, #520f09);
  margin-right: var(--Space-2, 8px);
}

.contact-us-subtitle {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Regular, 400);
  color: var(--On-background-Global-Default, #8f888a);
  text-align: center;
  line-height: 150%;
  margin: 0;
}

/* Success Message */
.contact-us-successfully-text {
  text-align: center;
  margin: var(--Space-5, 20px) 0;
}

#contactUsSuccessFully {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Strong, 600);
}

/* Form Container */
.contact-us-form-container {
  margin-top: var(--Space-2, 8px);
}

.form-horizontal {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
}

/* Form Groups */
.form-horizontal .form-group {
}

/* Labels */
.form-horizontal .col-form-label {
}

/* Error Labels */
.form-horizontal .text-danger {
}

.form-horizontal .text-danger i {
}

/* Input Fields */
.form-horizontal .form-control {
  display: flex;
  padding: var(--Space-3, 12px) var(--space-spacer-1-rem, 16px);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: var(--Radius-sm, 4px);
  border: 1px solid var(--On-background-Global-Secondary, #bbb3b5);
}

.form-horizontal .form-control:focus {
}

.form-horizontal .form-control::placeholder {
}

/* Textarea Specific */
.form-horizontal textarea.form-control {
}

/* Submit Button */
.form-horizontal .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacers-1-5, 6px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--Background-Brand-Primary, #520f09);
  color: var(--On-background-Brand-Primary, #fefdf9);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  text-transform: uppercase;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  border-radius: var(--Radius-sm, 4px);
  margin-top: var(--Space-6, 24px);
}

.form-horizontal .btn:hover {
  background: var(--Background-Brand-Primary-Hover, #63160f);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(82, 15, 9, 0.3);
}

.form-horizontal .btn:active {
}

/* Company Address */
.contact-us .row > div:last-child {
}

.contact-us .row > div:last-child p {
}

.contact-us .row > div:last-child b {
}

/* Mobile Responsive */
@media (max-width: 575px) {
  .contact-us {
    padding: var(--Space-3, 12px) var(--Space-4, 16px);
  }

  .contact-us-title-container {
    margin-bottom: var(--Space-3, 12px);
  }

  .contact-us-title {
    font-size: 24px;
    margin-bottom: var(--Space-3, 12px);
  }

  .contact-us-subtitle {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .contact-us-form-container {
    margin-top: var(--Space-1-5, 6px);
  }

  .form-horizontal .col-form-label {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .form-horizontal .form-control {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .form-horizontal .btn {
    font-size: var(--Body-Size-Medium, 18px);
  }

  #contactUsSuccessFully {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .form-horizontal .text-danger {
    font-size: var(--Body-Size-Small, 16px);
  }
}

/* Tablet Responsive */
@media (min-width: 576px) and (max-width: 991px) {
  .contact-us {
    padding: var(--Space-4, 16px) var(--Space-5, 20px);
  }

  .contact-us-title {
    font-size: 32px;
  }

  .contact-us-subtitle {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .contact-us-form-container {
    margin-top: var(--Space-2, 8px);
  }

  .form-horizontal .col-form-label {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .form-horizontal .form-control {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .form-horizontal .btn {
    font-size: var(--Body-Size-Medium, 18px);
  }
}

/* Desktop Responsive */
@media (min-width: 992px) {
  .contact-us {
    padding: var(--Space-5, 20px) var(--Space-10, 40px);
  }

  .contact-us-title {
    font-size: 40px;
    margin-bottom: var(--Space-4, 16px);
  }

  .contact-us-subtitle {
    font-size: var(--Body-Size-Large, 20px);
  }

  .contact-us-form-container {
    margin-top: var(--Space-2-5, 10px);
  }

  .form-horizontal {
    margin: 0 auto;
  }

  .form-horizontal .col-form-label {
    font-size: var(--Body-Size-Large, 20px);
  }

  .form-horizontal .form-control {
    font-size: var(--Body-Size-Large, 20px);
  }

  .form-horizontal .btn {
    font-size: var(--Body-Size-Large, 20px);
  }
}

/* Accessibility & Focus States */
.form-horizontal .form-control:focus,
.form-horizontal .btn:focus {
}

/* Form Validation States */
.form-horizontal .form-control.is-invalid {
}

.form-horizontal .form-control.is-valid {
}

/* Loading State */
.form-horizontal .btn:disabled {
}