/* Parapet Contact Webform Styling */
.parapet-contact-webform {

  max-width: 600px;
  margin: 0 auto;
}

/* Form container for two-column layout */
.parapet-contact-webform .parapet-webform-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.parapet-contact-webform .parapet-webform-flex .parapet-webform-flex-item {
  flex: 1;
}

/* Alternative: Direct child targeting for flex items */
.parapet-contact-webform .parapet-webform-flex > .webform-element {
  flex: 1;
}

/* Style all form inputs */
.parapet-contact-webform input[type="text"],
.parapet-contact-webform input[type="email"],
.parapet-contact-webform input[type="tel"],
.parapet-contact-webform textarea {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 2px solid #666;
  background: transparent;
  font-size: 16px;
  color: #333;
  outline: none;
  box-sizing: border-box;
}

/* Input focus effects */
.parapet-contact-webform input:focus,
.parapet-contact-webform textarea:focus {
  border-bottom-color: #333;
}

/* Labels styling */
.parapet-contact-webform label {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: normal;
}

/* Textarea specific styling */
.parapet-contact-webform textarea {
  resize: vertical;
  min-height: 120px;
  border-bottom: 2px solid #666;
  margin-bottom: 30px;
}

/* Submit button styling */
.parapet-contact-webform .webform-button--submit {
  background-color: #1a365d;
  color: white;
  padding: 15px 40px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.parapet-contact-webform .webform-button--submit:hover {
  background-color: #2c5282;
}

/* Remove default webform styling */
.parapet-contact-webform .webform-element {
  margin-bottom: 25px;
}

.parapet-contact-webform .webform-element--error {
  margin-bottom: 25px;
}

/* Hide required asterisks if you don't want them */
.parapet-contact-webform .form-required {
  display: none;
}

/* Container elements should not have extra margin */
.parapet-contact-webform .parapet-webform-flex.webform-element {
  margin-bottom: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .parapet-contact-webform .parapet-webform-flex {
    flex-direction: column;
    gap: 0;
  }
  
  .parapet-contact-webform {
    padding: 20px;
  }
}

/* Container setup */
.parapet-webform-flex-item-telephone {
  position: relative;
  z-index: 1;
}

/* Style the intl-tel-input wrapper correctly */
.parapet-webform-flex-item-telephone .iti {
  width: 100%;
  position: relative;
}

/* Make sure the flag dropdown is clickable and positioned right */
.parapet-webform-flex-item-telephone .iti__flag-container {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
}

/* Push input content to the right so it doesn't overlap with flag */
.parapet-webform-flex-item-telephone input[type="tel"],
.parapet-webform-flex-item-telephone .iti__input {
  padding-left: 45px !important;
  height: 45px;
  line-height: 45px;
  width: 100%;
  font-size: 1rem;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}