/* ==========================================================================
   #servicesModal — services page modal forms (CF7)
   Matches images/form.png (form state) and images/response-message.png
   (success state, toggled by the .form-sent class the page script adds
   on wpcf7mailsent).

   Every rule is scoped under #servicesModal so nothing here can leak into
   other forms on the site. Colors sampled from the mockups.
   ========================================================================== */

#servicesModal {
   --sm-accent: #0173ff;
   --sm-accent-hover: #0161d8;
   --sm-ink: #030303;          /* headings / field text            */
   --sm-body: #3f3f44;         /* labels, checkbox text            */
   --sm-placeholder: #55565c;
   --sm-panel: #fcfcff;        /* form panel + field fill          */
   --sm-border: #e9e9f2;       /* field borders                    */
   --sm-error: #d63638;
   --sm-pill: 100rem;
}

/* --------------------------------------------------------------------------
   Modal shell
   -------------------------------------------------------------------------- */

#servicesModal .modal-content {
   border: 0;
   border-radius: 24px;
   background: #fff;
   box-shadow: 0 24px 64px rgba(3, 22, 52, 0.24);
}

/* Header becomes a centered stack: icon on top, title under it.
   The Bootstrap close button is lifted out of the flow to the corner. */
#servicesModal .modal-header {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   border: 0;
   padding: 44px 56px 0;
}

#servicesModal .modal-header .btn-close {
   position: absolute;
   top: 20px;
   right: 24px;
   margin: 0;
   padding: 8px;
   z-index: 2;
}

#servicesModal .wm-modal-icon img {
   display: block;
   width: 56px;
   height: auto;
   filter: drop-shadow(0 10px 22px rgba(1, 115, 255, 0.35));
}

#servicesModal .modal-title {
   margin: 0;
   font-size: 30px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.01em;
   color: var(--sm-ink);
   text-align: center;
}

/* Leading words of the title ("Discuss Your …") — span added by the page
   script when it injects the form title. */
#servicesModal .modal-title .wm-title-accent {
   color: var(--sm-accent);
}

#servicesModal .modal-body {
   padding: 30px 56px 44px;
}

/* Loading spinner shown while the form is being fetched */
#servicesModal .wm-modal-loading .spinner-border {
   color: var(--sm-accent);
}

/* "Form could not be loaded" style errors */
#servicesModal .modal-body .alert {
   border-radius: 14px;
   font-size: 14px;
   text-align: center;
}

/* --------------------------------------------------------------------------
   Form panel (the soft off-white rounded card the fields sit on)
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7 {
   max-width: 500px;
   margin: 0 auto;
   background: var(--sm-panel);
   border-radius: 16px;
   padding: 26px 44px 26px;
}

/* --------------------------------------------------------------------------
   Field layout — 2 columns, textarea / acceptance / submit span both.
   Works with CF7's default <p> wrapping as well as custom wrappers.
   (:has() is supported by all evergreen browsers; without it the layout
   degrades to two equal columns.)
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7-form {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
}

#servicesModal .wpcf7-form > * {
   margin: 0;
   min-width: 0;
}

/* wpautop leftovers — keep empty paragraphs from creating ghost grid gaps */
#servicesModal .wpcf7-form > *:empty {
   display: none;
}

#servicesModal .wpcf7-form > *:has(.wpcf7-textarea),
#servicesModal .wpcf7-form > *:has(.wpcf7-acceptance),
#servicesModal .wpcf7-form > *:has(.wpcf7-checkbox),
#servicesModal .wpcf7-form > *:has(.wpcf7-radio),
#servicesModal .wpcf7-form > *:has(.wpcf7-submit),
#servicesModal .wpcf7-form > .wpcf7-response-output {
   grid-column: 1 / -1;
}

#servicesModal .wpcf7-form > *:has(.wpcf7-acceptance) {
   margin-top: 6px;
}

#servicesModal .wpcf7-form > *:has(.wpcf7-submit) {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 4px;
}

#servicesModal .wpcf7-form-control-wrap {
   display: block;
   width: 100%;
}

/* Visible labels (if a form uses them instead of placeholders) */
#servicesModal .wpcf7-form label {
   display: block;
   font-size: 13px;
   color: var(--sm-body);
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7-form .wpcf7-text,
#servicesModal .wpcf7-form .wpcf7-number,
#servicesModal .wpcf7-form .wpcf7-date,
#servicesModal .wpcf7-form .wpcf7-select,
#servicesModal .wpcf7-form .wpcf7-textarea {
   display: block;
   width: 100%;
   min-height: 30px;
   padding: 5px 16px;
   background: var(--sm-panel);
   border: 1px solid var(--sm-border);
   border-radius: var(--sm-pill);
   font-size: 13px;
   line-height: 1.4;
   color: var(--sm-ink);
   appearance: none;
   -webkit-appearance: none;
   outline: none;
   box-shadow: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#servicesModal .wpcf7-form .wpcf7-text::placeholder,
#servicesModal .wpcf7-form .wpcf7-number::placeholder,
#servicesModal .wpcf7-form .wpcf7-textarea::placeholder {
   color: var(--sm-placeholder);
   opacity: 1;
}

#servicesModal .wpcf7-form .wpcf7-text:focus,
#servicesModal .wpcf7-form .wpcf7-number:focus,
#servicesModal .wpcf7-form .wpcf7-date:focus,
#servicesModal .wpcf7-form .wpcf7-select:focus,
#servicesModal .wpcf7-form .wpcf7-textarea:focus {
   border-color: var(--sm-accent);
   box-shadow: 0 0 0 3px rgba(1, 115, 255, 0.12);
}

#servicesModal .wpcf7-form .wpcf7-textarea {
   /* explicit height: CF7's [textarea] tag defaults to rows="10", and the
      rows attribute would otherwise win over any min-height */
   height: 72px;
   min-height: 72px;
   border-radius: 14px;
   padding: 12px 16px;
   resize: vertical;
}

#servicesModal .wpcf7-form .wpcf7-select {
   padding-right: 40px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355565c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2l4.5 4.5L10.5 2'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
   background-size: 12px 8px;
}

/* --------------------------------------------------------------------------
   Acceptance checkbox — round, blue ring, blue fill when checked
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7-acceptance .wpcf7-list-item {
   display: block;
   margin: 0;
}

#servicesModal .wpcf7-acceptance .wpcf7-list-item label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   font-size: 13px;
   color: var(--sm-body);
}

#servicesModal .wpcf7-acceptance input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;
   flex: none;
   width: 17px;
   height: 17px;
   margin: 0;
   border: 1.5px solid var(--sm-accent);
   border-radius: 50%;
   background: transparent center / 10px no-repeat;
   cursor: pointer;
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#servicesModal .wpcf7-acceptance input[type="checkbox"]:checked {
   background-color: var(--sm-accent);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

#servicesModal .wpcf7-acceptance input[type="checkbox"]:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(1, 115, 255, 0.25);
}

/* Optional checkbox / radio groups on other forms — keep them tidy */
#servicesModal .wpcf7-checkbox .wpcf7-list-item,
#servicesModal .wpcf7-radio .wpcf7-list-item {
   display: inline-flex;
   align-items: center;
   margin: 0 16px 6px 0;
}

#servicesModal .wpcf7-checkbox .wpcf7-list-item label,
#servicesModal .wpcf7-radio .wpcf7-list-item label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   font-size: 13px;
   color: var(--sm-body);
}

/* --------------------------------------------------------------------------
   Submit button — solid blue pill, centered
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7-form .wpcf7-submit {
   display: inline-block;
   border: 0;
   cursor: pointer;
   background: var(--sm-accent);
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   padding: 10px 30px;
   border-radius: var(--sm-pill);
   transition: background-color 0.15s ease, transform 0.1s ease;
}

#servicesModal .wpcf7-form .wpcf7-submit:hover {
   background: var(--sm-accent-hover);
   color: #fff;
}

#servicesModal .wpcf7-form .wpcf7-submit:active {
   transform: translateY(1px);
}

#servicesModal .wpcf7-form .wpcf7-submit:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(1, 115, 255, 0.3);
}

#servicesModal .wpcf7-form .wpcf7-submit:disabled {
   opacity: 0.65;
   cursor: default;
}

/* CF7 hides the idle spinner with visibility:hidden, so it still reserves
   24px next to the submit button and would drag it off-center in the
   flex-centered row. Collapse it until CF7 marks the form as submitting. */
#servicesModal .wpcf7-form:not(.submitting) .wpcf7-spinner {
   display: none;
}

#servicesModal .wpcf7-spinner {
   margin: 0 0 0 12px;
}

/* --------------------------------------------------------------------------
   Validation + response messages
   -------------------------------------------------------------------------- */

#servicesModal .wpcf7-not-valid-tip {
   font-size: 12px;
   color: var(--sm-error);
   margin: 4px 0 0 16px;
}

#servicesModal .wpcf7-form .wpcf7-not-valid {
   border-color: var(--sm-error);
}

#servicesModal .wpcf7-response-output {
   margin: 4px 0 0;
   padding: 10px 16px;
   border: 1px solid #f5c6c6;
   border-radius: 12px;
   background: #fdf0f0;
   color: #b32d2e;
   font-size: 13px;
   text-align: center;
}

#servicesModal .wpcf7-response-output:empty {
   display: none;
}

/* --------------------------------------------------------------------------
   Success state — response-message.png
   The page script adds .form-sent to #servicesModal on wpcf7mailsent:
   the header + form disappear and the thank-you panel takes over.
   -------------------------------------------------------------------------- */

#servicesModal .wm-modal-success {
   display: none;
}

#servicesModal.form-sent .modal-header,
#servicesModal.form-sent .modal-body {
   display: none;
}

#servicesModal.form-sent .wm-modal-success {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 56px 40px 44px;
   /* .modal-dialog-scrollable only makes .modal-body scroll, and that is
      hidden in this state — let the panel scroll itself on short viewports
      so the Close button can't get clipped out of reach */
   overflow-y: auto;
   max-height: 100%;
   min-height: 0;
}

#servicesModal .wm-success-icon img {
   display: block;
   width: 62px;
   height: auto;
   filter: drop-shadow(0 10px 22px rgba(1, 115, 255, 0.35));
}

#servicesModal .wm-success-title {
   margin: 18px 0 4px;
   font-size: 34px;
   font-weight: 600;
   line-height: 1.2;
   color: var(--sm-accent);
}

/* CF7's configured success message is copied in here by the page script. */
#servicesModal .wm-success-message {
   margin: 0;
   max-width: 420px;
   font-size: 15px;
   line-height: 1.55;
   color: #26262b;
   white-space: pre-line;
}

/* Static second paragraph ("… will get back to you within 24 hours …") —
   CF7 messages are single-line plain text, so the bold phrase has to live
   in the markup instead. */
#servicesModal .wm-success-note {
   margin: 20px 0 0;
   max-width: 420px;
   font-size: 15px;
   line-height: 1.55;
   color: #26262b;
}

#servicesModal .wm-success-note strong {
   font-weight: 700;
}

#servicesModal .wm-success-close {
   margin-top: 28px;
   display: inline-block;
   border: 0;
   cursor: pointer;
   background: var(--sm-accent);
   color: #fff;
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   padding: 10px 26px;
   border-radius: var(--sm-pill);
   transition: background-color 0.15s ease;
}

#servicesModal .wm-success-close:hover {
   background: var(--sm-accent-hover);
}

#servicesModal .wm-success-close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(1, 115, 255, 0.3);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {

   #servicesModal .modal-header {
      padding: 36px 24px 0;
      gap: 14px;
   }

   #servicesModal .modal-title {
      font-size: 24px;
   }

   #servicesModal .modal-body {
      padding: 22px 20px 32px;
   }

   #servicesModal .wpcf7 {
      padding: 20px;
   }

   #servicesModal .wpcf7-form {
      grid-template-columns: 1fr;
   }

   /* comfortable touch targets on phones */
   #servicesModal .wpcf7-form .wpcf7-text,
   #servicesModal .wpcf7-form .wpcf7-number,
   #servicesModal .wpcf7-form .wpcf7-date,
   #servicesModal .wpcf7-form .wpcf7-select {
      min-height: 40px;
      font-size: 16px; /* prevents iOS zoom-on-focus */
   }

   #servicesModal .wpcf7-form .wpcf7-textarea {
      height: 96px;
      font-size: 16px;
   }

   #servicesModal .wpcf7-form .wpcf7-submit {
      padding: 13px 32px;
   }

   #servicesModal.form-sent .wm-modal-success {
      padding: 44px 24px 36px;
   }

   #servicesModal .wm-success-title {
      font-size: 28px;
   }
}