/**
 * Appointment pre-screening form — conditional field layout.
 * Pairs with static/js/appointment-form-conditionals.js.
 * Brand accent comes from the theme root vars (--color-1 taupe).
 */

/* Cancer details: three fields side by side on desktop, stacked on mobile */
.gm-inline-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.gm-inline-fields .gm-inline-field {
  flex: 1 1 0;
  min-width: 180px;
}

.gm-inline-fields .gm-inline-field label {
  display: block;
  margin-bottom: 6px;
}

.gm-inline-fields .gm-inline-field input,
.gm-inline-fields .gm-inline-field select {
  width: 100%;
  box-sizing: border-box;
}

/* Checkbox rows that host an inline dropdown (Diabetes A1C, treatments) */
.wpcf7-list-item.gm-inline-host {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 6px;
}

.gm-inline-detail {
  align-items: center;
  max-width: 100%;
}

.gm-inline-detail .wpcf7-form-control-wrap {
  display: inline-block;
}

/* Compact inline dropdowns — don't let them render at full field size */
.wpcf7 .gm-inline-detail select.wpcf7-form-control {
  width: auto;
  min-width: 0;
  max-width: 100%; /* never cut off the question text */
  height: auto;
  margin: 0;
  padding: 8px 34px 8px 12px;
  font-size: 13px;
  line-height: 1.4;
}

/* Attestation: breathing room between question, sub-label, and the radios */
#surgery-attest-block > label {
  display: block;
  margin-bottom: 10px;
}

#surgery-attest-block .gm-sub-label {
  font-weight: normal;
  margin-bottom: 14px;
}

#surgery-attest-block .wpcf7-radio {
  display: block;
}

#surgery-attest-block .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin: 0 0 12px;
}

#surgery-attest-block .wpcf7-radio input[type="radio"] {
  margin-right: 10px;
}

/* Surgery list: breathing room under the question label */
#surgery-history-block .filed-form > label {
  display: block;
  margin-bottom: 14px;
}

.surgery-list-header,
.surgery-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.surgery-list-header {
  font-weight: 600;
  margin: 0 0 10px;
}

.surgery-row {
  position: relative;
  margin-bottom: 16px;
}

.surgery-list-header .sr-name,
.surgery-row .sr-name {
  flex: 2 1 220px;
}

.surgery-list-header .sr-year,
.surgery-row .sr-year {
  flex: 1 1 120px;
  max-width: 180px;
}

.surgery-row input {
  width: 100%;
  box-sizing: border-box;
}

/* Small square accent "remove row" control: an inline flex item after the
   year field, same height and border weight as the inputs beside it.
   Rows without one keep full-width fields. */
.wpcf7-form .surgery-row .remove-surgery-row {
  height: 50.2px; /* matches the theme's input height */
  min-height: 34px;
  line-height: 1;
  padding: 0;
}

.surgery-row .remove-surgery-row {
  flex: 0 0 34px;
  text-decoration: none;
  align-self: flex-start;
  width: 34px;
  min-width: 34px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 0;
  color: var(--color-1, #8e7a71);
  background: transparent;
  border: 2px solid var(--color-1, #8e7a71); /* same weight as the fields */
  cursor: pointer;
}

.surgery-row .remove-surgery-row:hover {
  background: var(--color-1, #8e7a71);
  color: #fff;
}

/* Brand-colored add button */
#add-surgery-row.add-surgery-row {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  background: var(--color-1, #8e7a71);
  color: #fff;
  border: 1px solid var(--color-1, #8e7a71);
  border-radius: 0; /* match the theme's square inputs/buttons */
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

#add-surgery-row.add-surgery-row:hover {
  background: var(--color-s1, #bcaca5);
  border-color: var(--color-s1, #bcaca5);
  color: #fff;
  text-decoration: none;
}

/* Inline requirement messages injected by the JS.
   Own class — CF7 6 deletes foreign .wpcf7-not-valid-tip elements.
   Mirrors the theme's span.wpcf7-not-valid-tip exactly (block, 10px below,
   #ff9696, inherited 16px font) so ours look identical to CF7's. */
.gm-not-valid-tip {
  display: block;
  margin-bottom: 10px;
  color: #ff9696;
}

.gm-not-valid-tip[aria-hidden="true"] {
  display: none;
}

/* Same gap between an invalid control and its message as the theme's
   .wpcf7-not-valid controls get (8px, overriding the generic 16px). */
.wpcf7-form .wpcf7-form-control.gm-not-valid {
  margin-bottom: 8px;
}

/* Date of Birth not MM/DD/YYYY yet — red box, same as the theme's
   .wpcf7-not-valid controls. The background beats the green "filled"
   inline style scripts.js sets on blur. */
.wpcf7-form-control-wrap[data-name="age"] .wpcf7-form-control.gm-not-valid {
  border: 2px solid red !important;
  border-radius: 0;
  background: var(--color-field-error) !important;
}

/* Prevent iOS zoom-on-focus in the dynamic inputs */
.surgery-row input {
  font-size: 16px;
}

@media (max-width: 767px) {
  /* Stack everything on mobile */
  .gm-inline-fields {
    flex-direction: column;
  }

  .wpcf7-list-item.gm-inline-host .gm-inline-detail {
    flex-basis: 100%;
  }

  .wpcf7 .gm-inline-detail select.wpcf7-form-control {
    width: 100%;
    max-width: 100%;
  }

  .surgery-list-header {
    display: none;
  }

  .surgery-row {
    flex-wrap: wrap;
  }

  .surgery-row .sr-name,
  .surgery-row .sr-year {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .surgery-row .remove-surgery-row {
    margin-left: auto;
  }
}