/* ==========================================================================
   Smyle Dental — Gravity Forms
   The booking dialog and the Contact form are real Gravity Forms markup, so
   this restyles the plugin's own classes rather than a bespoke form. Loading
   it after the plugin's gravity-theme stylesheet on the WordPress build keeps
   the same result; nothing here depends on the plugin CSS being present.
   Scoped to .gform_wrapper so nothing leaks into the rest of the page.
   ========================================================================== */

.gform_wrapper.gravity-theme { margin: 0; }
.gform_wrapper.gravity-theme form { margin: 0; }

/* GF ships a description column and a honeypot; neither is wanted here. */
.gform_wrapper.gravity-theme .gform_validation_errors,
.gform_wrapper.gravity-theme .gfield--type-honeypot,
.gform_wrapper.gravity-theme .gform_hidden { display: none; }

/* ------------------------------------------------------------- the rows -- */
.gform_wrapper.gravity-theme .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}
.gform_wrapper.gravity-theme .gfield { margin: 0; min-width: 0; }

/* ------------------------------------------------------------- the label -- */
.gform_wrapper.gravity-theme .gfield_label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(20, 24, 29, .6);
  margin: 0 0 6px;
  padding: 0;
}
/* The required marker is carried by the label; GF's red asterisk is louder
   than this form needs. */
.gform_wrapper.gravity-theme .gfield_required { color: var(--yellow-deep); font-weight: 800; }
.gform_wrapper.gravity-theme .gfield_required_asterisk { padding-left: 3px; }

/* Sub-labels sit under First/Last and the two email boxes. */
.gform_wrapper.gravity-theme .gform-field-label--type-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(20, 24, 29, .42);
  margin: 5px 0 0;
}

/* ------------------------------------------------------------- controls -- */
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
  width: 100%;
  border: 1.5px solid rgba(20, 24, 29, .16);
  border-radius: 10px;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.gform_wrapper.gravity-theme textarea { min-height: 84px; resize: vertical; display: block; }
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
  outline: 0;
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(255, 217, 0, .3);
}

/* --------------------------------------------------- two-column complexes -- */
.gform_wrapper.gravity-theme .gform-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gform_wrapper.gravity-theme .gform-grid-col { min-width: 0; }

/* ---------------------------------------------------------------- consent -- */
/* GF prints a "Consent" field label above the checkbox as well as the inline
   agreement text. Only the inline text is wanted, so the field label is hidden
   from sight but left in the accessibility tree. */
.gform_wrapper.gravity-theme .gfield--type-consent > .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 2px;
}
.gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
  width: auto;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.gform_wrapper.gravity-theme .gfield_consent_label {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(20, 24, 29, .7);
  line-height: 1.45;
  margin: 0;
}

/* ----------------------------------------------------------------- submit -- */
.gform_wrapper.gravity-theme .gform_footer {
  margin: 18px 0 0;
  padding: 0;
}
.gform_wrapper.gravity-theme .gform_button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 15px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .16s ease-out, transform .16s var(--e-out);
}
.gform_wrapper.gravity-theme .gform_button:hover {
  background: var(--yellow-deep);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------- errors -- */
/* House rule: red text only. No summary panel at the top of the form and no
   boxed message under the field. The extra .gravity-theme in the selector is
   what outranks the plugin's own boxed styling. */
.gform_wrapper.gravity-theme .gfield_error .gfield_label { color: #C0392B; }
.gform_wrapper.gravity-theme .gfield_error input[type="text"],
.gform_wrapper.gravity-theme .gfield_error input[type="email"],
.gform_wrapper.gravity-theme .gfield_error input[type="tel"],
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea { border-color: #C0392B; }
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
  background: none;
  border: 0;
  padding: 6px 0 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #C0392B;
}

/* ------------------------------------------------------------ confirmation -- */
.gform_confirmation_wrapper { text-align: center; padding: 22px 0 8px; }
.gform_confirmation_wrapper .tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E6F6EC;
  color: #0F7B3F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 16px;
}
.gform_confirmation_wrapper h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.gform_confirmation_wrapper .sub {
  font-size: 15px;
  color: rgba(20, 24, 29, .66);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 560px) {
  .gform_wrapper.gravity-theme .gform-grid-row { grid-template-columns: 1fr; }
}