/* =====================================================
   Palmer Industries — Contact Form
   Brand: Refined architectural luxury
   Palette: #87D2D2 teal, #2C2C2C charcoal, white
   Fonts: ITC Avant Garde Gothic + Jost
   ===================================================== */

:root {
  --pi-teal:       #87D2D2;
  --pi-teal-dark:  #6abfbf;
  --pi-charcoal:   #2C2C2C;
  --pi-black:      #1a1a1a;
  --pi-border:     rgba(0, 0, 0, 0.18);
  --pi-muted:      rgba(0, 0, 0, 0.50);
  --pi-bg:         #ffffff;
  --pi-surface:    #f7f7f5;
  --pi-error:      #c0392b;
  --pi-radius:     0px;
  --pi-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --pi-font-body:  "ITC Avant Garde Gothic", "Avant Garde", Futura, sans-serif;
  --pi-font-ui:    "Jost", "ITC Avant Garde Gothic", sans-serif;
}

/* ── Container ─────────────────────────────────────── */
.contact-us-forms-container .contact-form-container.container {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* ── Field wrapper ─────────────────────────────────── */
.contact-us-forms-container .contact-form-container .field {
  margin-bottom: 28px;
  position: relative;
}

/* ── All text inputs, selects, textareas ───────────── */
.contact-us-forms-container .contact-form-container .wpcf7 input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.contact-us-forms-container .contact-form-container .wpcf7 select,
.contact-us-forms-container .contact-form-container .wpcf7 textarea {
  width: 100%;
  background: var(--pi-bg);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  color: var(--pi-charcoal);
  font-family: var(--pi-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding: 14px 16px;
  margin-bottom: 0;
  transition: border-color var(--pi-transition), box-shadow var(--pi-transition), background var(--pi-transition);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.contact-us-forms-container .contact-form-container .wpcf7 input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
.contact-us-forms-container .contact-form-container .wpcf7 select:focus,
.contact-us-forms-container .contact-form-container .wpcf7 textarea:focus {
  border-color: var(--pi-teal);
  box-shadow: 0 0 0 3px rgba(135, 210, 210, 0.12);
  background: #fff;
}

.contact-us-forms-container .contact-form-container .wpcf7 input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):hover,
.contact-us-forms-container .contact-form-container .wpcf7 select:hover,
.contact-us-forms-container .contact-form-container .wpcf7 textarea:hover {
  border-color: rgba(0, 0, 0, 0.38);
}

/* ── Placeholders ──────────────────────────────────── */
.contact-us-forms-container .contact-form-container .field ::placeholder,
.contact-us-forms-container .contact-form-container .custom-input::placeholder {
  color: var(--pi-muted) !important;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--pi-font-body);
  letter-spacing: 0.03em;
}

/* ── Textarea ──────────────────────────────────────── */
.contact-us-forms-container .contact-form-container .wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* ── Select dropdown ───────────────────────────────── */
.contact-us-forms-container .contact-form-container .dropdown-field,
.contact-us-forms-container .contact-form-container .wpcf7 select {
  border: 1px solid var(--pi-border) !important;
  border-radius: var(--pi-radius) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C2C2C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ── Checkbox field row ────────────────────────────── */
.contact-us-forms-container .contact-form-container .checkbox-field {
  width: 100%;
  border: 1px solid var(--pi-border);
  background: var(--pi-bg);
  padding: 14px 16px;
  margin-bottom: 0;
  border-radius: var(--pi-radius);
  gap: unset !important;
  display: flex;
  align-items: center;
}

.contact-us-forms-container .contact-form-container .field.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-us-forms-container .contact-form-container .field.checkbox label {
  margin-bottom: 0;
  font-family: var(--pi-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pi-charcoal);
}

.contact-us-forms-container .contact-form-container .field.checkbox .wpcf7-checkbox {
  display: flex;
  gap: 12px;
}

.contact-us-forms-container .contact-form-container .field.checkbox .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Radio buttons ─────────────────────────────────── */
.contact-us-forms-container .contact-form-container .field.radio.radio-field.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contact-us-forms-container .contact-form-container .checklabel {
  width: auto;
  margin-right: 10%;
}

.contact-us-forms-container .contact-form-container .radio-options {
  display: flex;
  gap: 48px;
}

.contact-us-forms-container .contact-form-container .checkbox-label {
  float: left;
  width: 40%;
}

.contact-us-forms-container .contact-form-container input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--pi-bg);
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 0;
  position: relative;
  transition: border-color var(--pi-transition);
}

.contact-us-forms-container .contact-form-container input[type="radio"]:hover {
  border-color: var(--pi-teal);
}

.contact-us-forms-container .contact-form-container input[type="radio"]:checked {
  background-image: url('https://dev.palmerindustries.com/wp-content/plugins/custom-elementor-widgets/assets/images/on.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  border-color: var(--pi-teal);
  background-color: rgba(135, 210, 210, 0.08);
}

.contact-us-forms-container .contact-form-container input[type="radio"] + label {
  position: relative;
  padding-left: 4px;
  cursor: pointer;
  display: inline-block;
  font-family: var(--pi-font-body);
  color: var(--pi-muted);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: color var(--pi-transition);
}

.contact-us-forms-container .contact-form-container input[type="radio"]:checked + label {
  color: var(--pi-charcoal);
}

/* Legacy pseudo-element radio (checkbox-label context) */
.contact-us-forms-container .contact-form-container .checkbox-label input[type="radio"] + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  width: 22px;
  height: 22px;
  transition: border-color var(--pi-transition), background var(--pi-transition);
}

.contact-us-forms-container .contact-form-container .checkbox-label input[type="radio"]:checked + label::before {
  background-color: white;
  border: 2px solid var(--pi-teal) !important;
  background-image: url('https://dev.palmerindustries.com/wp-content/plugins/custom-elementor-widgets/assets/images/on.png');
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-us-forms-container .contact-form-container .checkbox-label span.firstcontact-radio-btn {
  display: flex !important;
  gap: 32px;
}

.contact-us-forms-container .contact-form-container .checkbox-label span.firstcontact-radio-btn span.wpcf7-list-item {
  margin: 0;
}

/* ── Submit button ─────────────────────────────────── */
.contact-us-forms-container .contact-form-container .submit-contact-btn,
.contact-us-forms-container .contact-form-container button#submit_main_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--pi-teal) !important;
  color: var(--pi-black) !important;
  border: 1px solid transparent;
  border-radius: var(--pi-radius);
  padding: 14px 40px;
  font-family: var(--pi-font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--pi-transition), box-shadow var(--pi-transition), transform var(--pi-transition);
  width: auto;
  min-width: 180px;
}

.contact-us-forms-container .contact-form-container .submit-contact-btn:hover,
.contact-us-forms-container .contact-form-container button#submit_main_btn:hover {
  background-color: var(--pi-teal-dark) !important;
  box-shadow: 0 4px 16px rgba(135, 210, 210, 0.30);
  transform: translateY(-1px);
}

.contact-us-forms-container .contact-form-container .submit-contact-btn:active,
.contact-us-forms-container .contact-form-container button#submit_main_btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.contact-us-forms-container .contact-form-container .hnice-icon-chevron-right {
  color: var(--pi-black) !important;
}

/* ── File upload ───────────────────────────────────── */
.contact-us-forms-container .contact-form-container .field.file.upload-field,
.contact-us-forms-container .contact-form-container .upload-field {
  margin-top: 0;
}

.contact-us-forms-container .contact-form-container .uploadfFile-box {
  width: 100%;
  min-width: 280px;
  max-width: 420px;
  margin-top: 8px;
  border: 1px dashed rgba(0, 0, 0, 0.20);
  transition: border-color var(--pi-transition), background var(--pi-transition);
}

.contact-us-forms-container .contact-form-container .uploadfFile-box.drag-over {
  border: 1.5px dashed var(--pi-teal);
  background-color: rgba(135, 210, 210, 0.06);
}

.contact-us-forms-container .contact-form-container .upload-grey-box {
  padding: 20px 16px;
  background: var(--pi-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--pi-transition);
}

.contact-us-forms-container .contact-form-container .upload-grey-box:hover {
  background: rgba(135, 210, 210, 0.08);
}

.contact-us-forms-container .contact-form-container .custom-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pi-charcoal);
  font-family: var(--pi-font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.contact-us-forms-container .contact-form-container .upload-icon {
  width: 18px;
  height: 18px;
  background-image: url('https://dev.palmerindustries.com/wp-content/uploads/2025/03/Upload.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
}

.contact-us-forms-container .contact-form-container .custom-upload-btn {
  display: none;
}

.contact-us-forms-container .contact-form-container .file-info {
  color: var(--pi-muted);
  font-family: var(--pi-font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: none;
  cursor: pointer;
}

/* ── File list items ───────────────────────────────── */
.contact-us-forms-container .contact-form-container .file-list {
  padding: 0 16px;
}

.contact-us-forms-container .contact-form-container .file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  animation: pi-fadeIn 0.2s ease-out;
}

.contact-us-forms-container .contact-form-container .file-item:last-child {
  border-bottom: none;
}

.contact-us-forms-container .contact-form-container .file-name {
  color: var(--pi-charcoal);
  font-family: var(--pi-font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Validation ────────────────────────────────────── */
.cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
  background: transparent !important;
  color: var(--pi-error) !important;
  font-family: var(--pi-font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-top: 6px;
  display: block;
}

.wpcf7-form-control-wrap input.wpcf7-not-valid,
.wpcf7-form-control-wrap textarea.wpcf7-not-valid,
.wpcf7-form-control-wrap select.wpcf7-not-valid {
  border-color: var(--pi-error) !important;
}

.contact-us-forms-container .contact-form-container .wpcf7-form-control-wrap input,
.contact-us-forms-container .contact-form-container .wpcf7-form-control-wrap textarea {
  border: 1px solid var(--pi-border);
}

/* ── Recaptcha ─────────────────────────────────────── */
.recaptcha-col .rc-anchor {
  border: 1px solid var(--pi-border) !important;
  border-radius: 0 !important;
}

/* ── Pointer-events fix on upload box ─────────────── */
.uploadfFile-box * {
  pointer-events: none;
}
.uploadfFile-box .upload-grey-box,
.uploadfFile-box .custom-upload-label,
.uploadfFile-box .file-list,
.uploadfFile-box .file-item,
.uploadfFile-box .file-name {
  pointer-events: auto;
}

/* ── Animations ────────────────────────────────────── */
@keyframes pi-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-us-forms-container .contact-form-container .uploadfFile-box {
    max-width: 100%;
    min-width: unset;
  }

  .contact-us-forms-container .contact-form-container .submit-contact-btn,
  .contact-us-forms-container .contact-form-container button#submit_main_btn {
    width: 100%;
    min-width: unset;
  }

  .contact-us-forms-container .contact-form-container .checkbox-label {
    display: flex;
    padding-top: 10px;
    width: 100%;
  }

  .contact-us-forms-container .contact-form-container .field.radio.radio-field.checkbox-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-us-forms-container .contact-form-container .radio-options {
    gap: 24px;
    flex-wrap: wrap;
  }

  .contact-us-banner-grid .palmer-sink-leg-content {
    gap: 0;
  }
}

/* ── Tablet ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-us-forms-container .contact-form-container .uploadfFile-box {
    max-width: 100%;
    min-width: 250px;
  }

  .contact-us-forms-container .contact-form-container .submit-contact-btn,
  .contact-us-forms-container .contact-form-container button#submit_main_btn {
    min-width: 160px;
  }

  .contact-us-banner-grid .palmer-sink-leg-content
    .elementor-widget__width-inherit.elementor-widget.elementor-widget-heading
    .elementor-widget-container
    .elementor-heading-title {
      font-size: 1.5rem;
      line-height: normal;
    }
}