@import url('../../../styles/forms.css');

.user main .section.contact-us-container {
  margin: auto;
  padding-top: 0;
}

.contact-us .contactus-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-space-16);
}

.contact-us .contactus-container form > .communication-channel label{
  padding: var(--space-space-20) 0 var(--space-space-20) 0;
}

.contact-us .contactus-container form > .communication-channel .radio-button-wrapper {
  display: flex;
  padding-bottom: var(--space-space-12);
  gap: var(--space-space-32);
}

.contact-us .contactus-container form > .communication-channel .radio-button-wrapper > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: var(--space-space-8);
}

.contact-us .contactus-container form > .communication-channel .radio-button-wrapper > div > .communication-option {
  height: var(--grid-3-gutters);
  width: var(--grid-3-gutters);
}

.contact-us .contactus-container form .input-phone-prefix label{
  transform: translateY(75%);
  top: 0;
}

.prefix-inputcode .input-wrapper input {
  padding: var(--space-space-19) var(--space-space-12) var(--space-space-4) var(--space-space-54);
}

.contact-us .prefix-inputcode .input-wrapper input {
  padding: var(--space-space-19) var(--space-space-12) var(--space-space-4) var(--space-space-54);
}

.contact-us .contactus-container form .input-phone-prefix input {
  padding-top: var(--space-space-6);
}

.contact-us .contactus-container form .input-phone-prefix input,
.contact-us .contactus-container form .dropdown .custom-select {
  height: var(--space-space-52);
  background-color: var(--color-neutral-white);
}

.contact-us .contactus-container form textarea.message {
  height: 100%;
  min-height: var(--space-space-110);
  width: 100%;
}

.section.contact-us-container .default-content-wrapper {
  text-align: center;
}

.prefix-inputcode .input-coutrycode {
  top: var(--space-space-20);
}

html[dir='rtl'] .prefix-inputcode .input-coutrycode {
  right: var(--space-space-16);
}

@media (width >=768px) {
  .user main .section.contact-us-container {
    padding-top: var(--space-space-6x);
  }

  .contact-us-container .default-content-wrapper h3 {
    margin: 0;
    padding-top: var(--space-space-4x);
    padding-bottom: var(--space-space-6x);
    border-bottom: none;
    font: var(--type-details-8-font);
  }
}

@media (width <=768px) {
  .contact-us-container .default-content-wrapper h3 {
    border-bottom: none;
    font: var(--type-details-6-font);
  }
}

/* bat specific code goes here */

/* Always keep .bat scope for brand specific override 
Example:
.bat h2 {
  color: var(--color-token);
}
*/

.bat.user .section.contact-us-container {
  padding-top: var(--space-space-32);
  padding-bottom: var(--space-space-32);
  margin: 0;
}

.bat.user .section.contact-us-container h3 {
  padding: 0;
  margin: 0 0 var(--space-space-48);
  font: var(--type-details-semibold-8-font);
  color: var(--color-secondary-a);
}

.bat .contact-us .contactus-container form {
  gap: var(--space-space-48);
}

.bat .contact-us p.section-subhead,
.bat .contact-us label.section-head {
  margin-bottom: var(--space-space-16);
  margin-top: 0;
  padding: 0;
  color: var(--color-text-main);
}

.bat .contact-us .contactus-container form .radio-button-wrapper {
  display: flex;
  gap: var(--space-space-24);
  padding-bottom: 0;
}

.bat .contact-us .contactus-container form .radio-button-wrapper .radio-wrapper {
  display: flex;
  gap: var(--space-space-8);
  margin: 0;
}

.bat .contact-us .input-field-wrapper input {
  max-width: 100%;
}

/* stylelint-disable no-descending-specificity */

.bat .contact-us .input-field-wrapper:not(.no-transition) textarea~label {
  transform: translateY(-50%);
  font-size: var(--font-size-2);
  position: absolute;
  top: 1.5rem;
  padding: 0 var(--space-space-16);
  color: var(--color-secondary-b);
}

.bat .contact-us .input-field-wrapper span.textarea-maxleng{
  position: absolute;
  right: 0.5rem;
  top: 8.8rem;
  font-size: var(--font-size-2);
  color: var(--color-text-light);
}

html[dir='rtl'] .bat .contact-us .input-field-wrapper span.textarea-maxleng {
  left: 0.5rem;
  right: unset;
}

.bat .contact-us .contact-flex-items > div:not(.input-wrapper),
.bat .contact-us .contact-flex-items.radio {
  display: flex;
  gap: var(--space-space-16) var(--space-space-12);
  flex-flow: column wrap;
}

.bat .contact-us .contact-flex-items.radio > div:not(.input-wrapper) {
  gap: 0;
}

.bat .contact-us .contact-flex-items.radio,
.bat .contact-blocks:has(.contact-flex-items.radio) {
  gap: var(--space-space-24);
}

.bat .contact-us .contact-flex-items .input-field-wrapper,
.bat .contact-us .contact-flex-items.radio .input-wrapper {
  flex: 1;
  max-width: 100%;
  width: 100%;
  flex-basis: calc(50% - var(--space-space-16));
}

.bat .contact-us .input-field-wrapper.full-width {
  width: 100%;
  max-width: 100%;
}

.bat .contact-us .contact-blocks{
  display: flex;
  flex-direction: column;
  gap: var(--space-space-16);
}

.bat .contact-us .input-field-wrapper .select-selected,
.bat .contact-us .input-field-wrapper textarea {
  border: 1px solid var(--color-disabled-default-text);
}

.bat .contact-us .input-field-wrapper.dropdown::after {
  top: 5.7rem;
  background-image: url('/icons/chevron-down-blue.svg');
}

.bat .contact-us form textarea.message {
  padding-top: var(--space-space-30);
}

.bat .contact-us form textarea.message::placeholder {
  color: var(--color-text-light);
}

.bat .contactus-container .contact-us button {
  margin: 0;
}

.bat .prefix-inputcode .input-coutrycode {
  position: absolute;
  left: var(--space-space-12);
  right: unset;
  color: var(--color-text-light);
  top: 2.2rem;
  direction: ltr;
  display: none;
}

html[dir='rtl'] .bat .prefix-inputcode .input-coutrycode {
  left: unset;
  right: var(--space-space-16);
}

.bat .prefix-inputcode input:focus ~ span.input-coutrycode,
.bat .prefix-inputcode.show span.input-coutrycode {
  display: block;
}

.bat .prefix-inputcode .input-wrapper input {
  padding-left: var(--space-space-48);
}

html[dir='rtl'] .bat .prefix-inputcode .input-wrapper input {
  padding-right: var(--space-space-48);
  text-align: end;
}

@media screen and (width >= 768px) {
  .bat .contact-us .contact-flex-items > div:not(.input-wrapper),
  .bat .contact-us .contact-flex-items.radio {
    flex-direction: row;
  }

  .bat .contact-us .contactus-container button {
    max-width: calc(50% - var(--space-space-6));
  }

  .bat .contact-us .input-field-wrapper {
    max-width: calc(50% - var(--space-space-6));
  }
}