/* ==========================================================================
   SAJ Get In Touch — Elementor widget additions
   get-in-touch.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it:
     1. Style-tab hooks (background layers as custom properties)
     2. Feature counts other than three
     3. The Contact Form 7 form, drawn like the original fields
        a. any form          b. the design template (icons, floating labels)
        c. button            d. validation + response messages
     4. Editor notice
     5. Responsive (original breakpoints) + reduced motion
   Every rule is scoped to .get-in-touch-section, and the form rules to its
   .get-in-touch__cf7 container, so Contact Form 7 forms elsewhere on the
   site keep their own look. Image URLs are relative to this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Style-tab hooks
   Same three background layers as get-in-touch.css (white glow, gradient),
   with an optional Media Library image between them. The widget prints
   --git-bg-image inline; the Style tab sets the others.
   -------------------------------------------------------------------------- */
.get-in-touch-section[data-get-in-touch-widget] {
  background-image:
    var(--git-bg-glow, radial-gradient(55% 40% at 50% 18%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%)),
    var(--git-bg-image, none),
    var(--git-bg-base, linear-gradient(180deg, var(--git-bg-top, #F2F8FF) 0%, var(--git-sky) 55%, var(--git-bg-bottom, #E3EFFC) 100%));
  background-position: center, var(--git-bg-position, center center), center;
  background-size: auto, var(--git-bg-size, cover), auto;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   2. Feature counts other than three
   Fewer cards use fewer columns at the original card width; more wrap into
   new rows of three. Tablet (2 + 1, odd last card centred) and phone rules
   in get-in-touch.css already work for any count.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .get-in-touch-section[data-get-in-touch-widget] .get-in-touch__features {
    grid-template-columns: repeat(var(--git-feature-cols, 3), minmax(0, 1fr));
    max-width: calc(1020px * var(--git-feature-cols, 3) / 3);
  }
}

/* Library icons are filled, the original icons are stroked line art */
.get-in-touch-section .get-in-touch__feature-icon--custom svg {
  fill: currentColor;
  stroke: none;
}

.get-in-touch-section .get-in-touch__feature-icon--custom i {
  font-size: 28px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   3a. Contact Form 7 — any form
   The selector list matches Saj_Dental_Get_In_Touch_Widget::FIELDS. It
   outranks Elementor's kit form-field rules (0,3,1); the widget's own Style
   controls start with {{WRAPPER}} and outrank this.
   -------------------------------------------------------------------------- */
.get-in-touch-section .get-in-touch__cf7 {
  position: relative;
  --git-control-pad: 0 18px;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form {
  position: relative;
  margin: 0;
}

/* Default Contact Form 7 templates wrap each field in a <p> */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form > p {
  margin: 0 0 var(--git-fields-row-gap, 14px);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form label {
  display: block;
  color: var(--git-label-static, var(--git-navy-text));
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form label > br {
  display: none;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form-control-wrap {
  display: block;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form label > .wpcf7-form-control-wrap {
  margin-top: 8px;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"], [type="file"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]), select, textarea) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--git-field-h);
  margin: 0;
  padding: var(--git-control-pad);
  border: var(--git-field-border-width, 1.5px) solid var(--git-field-border, var(--git-border));
  border-radius: var(--git-field-radius);
  background-color: var(--git-field-bg, rgba(255, 255, 255, 0.8));
  box-shadow: none;
  color: var(--git-field-color, var(--git-navy));
  font: 500 1rem/1.3 var(--git-font-body);
  text-align: start;
  /* transparent outline: visible focus ring in Windows high-contrast mode */
  outline: 2px solid transparent;
  outline-offset: 2px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input, textarea)::placeholder {
  color: var(--git-field-placeholder, var(--git-muted));
  opacity: 1;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form textarea.wpcf7-form-control {
  height: auto;
  min-height: var(--git-textarea-h, 140px);
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}

/* Selects: the original chevron, drawn as a background on plain forms.
   ".wpcf7-form-control" lifts these variants above the base field rule. */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form select.wpcf7-form-control {
  padding-right: 52px;
  background-image: url("../images/get-in-touch-select-chevron.svg");
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  cursor: pointer;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form select option {
  color: var(--git-navy);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form select:is([multiple], [size]:not([size="1"])) {
  height: auto;
  padding: 10px 14px;
  background-image: none;
}

/* Hover / focus (original values) */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"], [type="file"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]), select, textarea):hover {
  border-color: var(--git-field-border-hover, rgba(31, 111, 214, 0.3));
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"], [type="file"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]), select, textarea):focus {
  border-color: var(--git-field-border-focus, var(--git-blue-bright));
  background-color: var(--git-field-bg-focus, #FFFFFF);
  box-shadow: 0 0 0 4px rgba(42, 132, 240, 0.12);
}

/* Contact Form 7 marks invalid controls with .wpcf7-not-valid (wins over
   focus, as the original's .is-invalid does) */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-not-valid.wpcf7-form-control:is(input, select, textarea) {
  border-color: rgba(194, 54, 47, 0.6);
  box-shadow: 0 0 0 4px rgba(194, 54, 47, 0.08);
}

/* Checkboxes, radios, acceptance, files */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-list-item {
  margin: 0 18px 6px 0;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--git-body);
  font-weight: 500;
  cursor: pointer;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-list-item-label::before,
.get-in-touch-section .get-in-touch__cf7 .wpcf7-list-item-label::after {
  content: none;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--git-blue);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form input[type="file"] {
  max-width: 100%;
  color: var(--git-body);
  font: 500 0.9375rem/1.4 var(--git-font-body);
}

/* --------------------------------------------------------------------------
   3b. The design template (see Content → Contact Form in the widget)
   Uses the original classes, so get-in-touch.css already provides the grid,
   label position, icon box, chevron and button row. Added here: icons as
   masks (Contact Form 7 templates cannot contain SVG), the original control
   padding, and floating labels driven by .is-filled (set by the script) —
   without the script the labels simply stay raised.
   -------------------------------------------------------------------------- */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__fields {
  gap: var(--git-fields-row-gap, 14px) var(--git-fields-col-gap, 18px);
  margin: 0;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field {
  --git-control-pad: 22px 18px 6px 62px;
}

/* Contact Form 7's auto-paragraphs inside the design rows: layout-neutral,
   so icon / label / control / button / spinner sit as in the original */
.get-in-touch-section .get-in-touch__cf7 :is(.get-in-touch__field, .get-in-touch__actions) > p:not([class]) {
  display: contents;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field label {
  display: block;
  margin: 0;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field label > .wpcf7-form-control-wrap {
  margin-top: 0;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field select.wpcf7-form-control {
  padding-right: 52px;
  background-image: none;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field textarea.wpcf7-form-control {
  padding-top: 30px;
  padding-bottom: 6px;
}

/* Filled + valid: the original's .is-valid border */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field.is-filled :is(input, select, textarea):not(:focus):not(.wpcf7-not-valid) {
  border-color: rgba(31, 111, 214, 0.32);
}

/* Fields without an icon span */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:not(:has(.get-in-touch__field-icon)) {
  --git-control-pad: 22px 18px 6px 18px;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:not(:has(.get-in-touch__field-icon)) .get-in-touch__label {
  left: 18px;
}

/* Icons + chevron: original boxes, drawn with the original paths */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon,
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__chevron {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--git-icon) center / contain no-repeat;
  mask: var(--git-icon) center / contain no-repeat;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon {
  color: var(--git-field-icon, #5D7396);
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:focus-within .get-in-touch__field-icon {
  color: var(--git-field-icon-focus, var(--git-blue-bright));
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon--user { --git-icon: url("../images/get-in-touch-field-user.svg"); }
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon--email { --git-icon: url("../images/get-in-touch-field-email.svg"); }
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon--phone { --git-icon: url("../images/get-in-touch-field-phone.svg"); }
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon--subject { --git-icon: url("../images/get-in-touch-field-subject.svg"); }
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon--message { --git-icon: url("../images/get-in-touch-field-message.svg"); }
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__chevron { --git-icon: url("../images/get-in-touch-chevron.svg"); }

/* Labels: resting (placeholder position). z-index: the label precedes the
   control here, and Contact Form 7's wrap is position: relative, so the
   field's translucent background would otherwise paint over it. */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__label {
  z-index: 1;
  color: var(--git-label, var(--git-muted));
}

/* Raised: focused, filled, autofilled, or no script */
.get-in-touch-section .get-in-touch__cf7:not(.is-enhanced) .get-in-touch__label,
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:focus-within .get-in-touch__label,
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field.is-filled .get-in-touch__label {
  top: 16px;
  transform: translateY(-50%) scale(0.78);
  color: var(--git-label-active, var(--git-blue));
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:has(:autofill) .get-in-touch__label {
  top: 16px;
  transform: translateY(-50%) scale(0.78);
  color: var(--git-label-active, var(--git-blue));
}

.get-in-touch-section .get-in-touch__cf7:not(.is-enhanced) .get-in-touch__field--textarea .get-in-touch__label,
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field--textarea:focus-within .get-in-touch__label,
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field--textarea.is-filled .get-in-touch__label {
  top: 14px;
}

/* An empty select shows nothing under its label, like the original's
   blank first option (the label option stays readable in the list). */
.get-in-touch-section .get-in-touch__cf7.is-enhanced .get-in-touch__field--select:not(.is-filled) select {
  color: transparent;
}

/* Invalid (the original's .is-invalid) */
.get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:has(.wpcf7-not-valid) :is(.get-in-touch__field-icon, .get-in-touch__label) {
  color: var(--git-error);
}

/* --------------------------------------------------------------------------
   3c. Submit button (any Contact Form 7 submit inside the widget)
   An <input> cannot hold the original arrow <svg>, so the arrow is a
   background layer on the right; the extra right padding keeps the
   original label → 14px → 22px arrow spacing.
   -------------------------------------------------------------------------- */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 0 calc(var(--git-submit-pad-x, 40px) + var(--git-submit-arrow-space, 36px)) 0 var(--git-submit-pad-x, 40px);
  border: 0;
  border-radius: 999px;
  background-color: var(--git-orange);
  background-image:
    var(--git-submit-arrow, url("../images/get-in-touch-submit-arrow.svg")),
    var(--git-submit-bg, linear-gradient(135deg, #FF7A30, var(--git-orange) 55%, #F25A14));
  background-position: right var(--git-submit-pad-x, 40px) center, center;
  background-repeat: no-repeat;
  background-size: 22px 22px, 100% 100%;
  color: #FFFFFF;
  font: 600 1.0625rem/1 var(--git-font-body);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  box-shadow: 0 14px 28px -16px rgba(242, 90, 20, 0.8);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.35s var(--git-ease), box-shadow 0.35s ease, filter 0.35s ease, background-position 0.35s var(--git-ease);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(0.96);
  box-shadow: 0 20px 32px -16px rgba(232, 84, 15, 0.85);
  background-image:
    var(--git-submit-arrow, url("../images/get-in-touch-submit-arrow.svg")),
    var(--git-submit-bg-hover, var(--git-submit-bg, linear-gradient(135deg, #FF7A30, var(--git-orange) 55%, #F25A14)));
  background-position: right calc(var(--git-submit-pad-x, 40px) - 4px) center, center;
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit:active {
  transform: translateY(0);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--git-navy);
  outline-offset: 4px;
}

/* Sending (the original's [disabled] look) */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form.submitting .wpcf7-submit {
  cursor: progress;
  opacity: 0.85;
}

/* Disabled by Contact Form 7 (e.g. an unticked acceptance box) */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  filter: none;
}

/* Contact Form 7's spinner: no reserved gap beside the button while idle */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-spinner {
  display: none;
  margin: 0 0 0 16px;
  vertical-align: middle;
  background-color: var(--git-navy);
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block;
}

.get-in-touch-section .get-in-touch__cf7 .get-in-touch__actions .wpcf7-spinner {
  margin: 0;
}

/* --------------------------------------------------------------------------
   3d. Validation + response messages
   -------------------------------------------------------------------------- */
.get-in-touch-section .get-in-touch__cf7 .wpcf7-not-valid-tip {
  display: block;
  margin: 6px 0 0;
  padding-left: 4px;
  color: var(--git-tip-color, var(--git-error));
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Warnings and errors (validation, acceptance, spam, failed sending) */
.get-in-touch-section .get-in-touch__cf7 .wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--git-response-border, rgba(194, 54, 47, 0.3));
  border-radius: var(--git-response-radius, 16px);
  background: var(--git-response-bg, #FFF5F4);
  color: var(--git-response-color, var(--git-error));
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Sent: the original success message */
.get-in-touch-section .get-in-touch__cf7 .wpcf7 form.sent .wpcf7-response-output {
  display: flex;
  align-items: center;
  gap: 14px;
  border-color: var(--git-success-border, rgba(31, 111, 214, 0.22));
  background: var(--git-success-bg, linear-gradient(135deg, #EEF6FF, #F7FBFF));
  color: var(--git-success-color, var(--git-navy));
}

.get-in-touch-section .get-in-touch__cf7 .wpcf7 form.sent .wpcf7-response-output::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--git-success-icon, var(--git-blue));
  -webkit-mask: url("../images/get-in-touch-success.svg") center / contain no-repeat;
  mask: url("../images/get-in-touch-success.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   4. Editor notice (only printed in the Elementor editor)
   -------------------------------------------------------------------------- */
.get-in-touch-section .get-in-touch__notice {
  padding: 18px 20px;
  border: 1.5px dashed rgba(31, 111, 214, 0.4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--git-navy-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.get-in-touch-section .get-in-touch__notice a {
  color: var(--git-blue);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Responsive (original breakpoint) + reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .get-in-touch-section .get-in-touch__cf7 .wpcf7-form textarea.wpcf7-form-control {
    min-height: var(--git-textarea-h, 150px);
  }

  .get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit {
    width: 100%;
  }

  .get-in-touch-section .get-in-touch__cf7 .get-in-touch__fields {
    gap: var(--git-fields-row-gap, 12px) var(--git-fields-col-gap, 18px);
  }

  .get-in-touch-section .get-in-touch__cf7 .get-in-touch__actions .wpcf7-spinner {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .get-in-touch-section .get-in-touch__cf7 .wpcf7-form :is(input, select, textarea),
  .get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit,
  .get-in-touch-section .get-in-touch__cf7 .get-in-touch__field-icon {
    transition: none !important;
  }

  .get-in-touch-section .get-in-touch__cf7 .wpcf7-form .wpcf7-submit:hover {
    transform: none;
    background-position: right var(--git-submit-pad-x, 40px) center, center;
  }

  .get-in-touch-section .get-in-touch__cf7 .get-in-touch__field:focus-within .get-in-touch__field-icon {
    transform: none;
  }
}