/* =====================================================================
   Samaah — Contact Form 7 styling (matches the static .form markup)
   Loaded only when CF7 is active (see inc/enqueue.php).
   ===================================================================== */

/* Card wrapper rendered by the Contact widget */
.form-card { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.form-card h3 { margin-bottom: 1.25rem; }
.form-card .wpcf7 { display: block; }

/* The glass card look comes from the widget wrapper; the form itself is a plain grid */
.wpcf7 .form,
.wpcf7 form.wpcf7-form {
  display: grid; gap: 1.1rem; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.wpcf7 .form > .hidden-fields-container,
.wpcf7 .form > [style*="display: none"] { display: none; }

.wpcf7 .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.wpcf7 .form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }

.wpcf7-form-control-wrap { display: block; position: relative; }

/* Labels */
.wpcf7 .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.wpcf7 .field label .muted { font-weight: 400; }

/* Inputs — identical to .field input/textarea/select in main.css */
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
.wpcf7 textarea,
.wpcf7 select {
  width: 100%; padding: .9rem 1.1rem; border-radius: 14px; border: 1.5px solid rgba(27,21,48,.14);
  background: var(--bg); font: inherit; color: var(--ink); transition: border-color .3s, box-shadow .3s;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.wpcf7 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem;
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input:not([type=submit]):focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 4px rgba(108,63,214,.15); }
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--ink-soft); opacity: .75; }

/* Invalid field */
.wpcf7 .wpcf7-not-valid { border-color: #B42318; }
.wpcf7-not-valid-tip { display: block; margin-top: .4rem; font-size: .82rem; font-weight: 500; color: #B42318; }
.use-floating-validation-tip .wpcf7-not-valid-tip { position: static; border: 0; background: transparent; padding: 0; width: auto; }

/* Submit: inherits .btn / .btn--primary from main.css (classes added via the form tag) */
.wpcf7 .wpcf7-submit { cursor: pointer; font: inherit; border: 0; -webkit-appearance: none; appearance: none; }
.wpcf7 .wpcf7-submit.btn { font-family: var(--font-display); font-weight: 600; }
.wpcf7 form.submitting .wpcf7-submit { opacity: .7; pointer-events: none; }

/* Spinner (sits next to the button) */
.wpcf7 .wpcf7-spinner { margin: 0; flex: 0 0 auto; }

/* Response message */
.wpcf7 form .wpcf7-response-output {
  margin: 0; padding: 1rem 1.25rem; border: 0; border-radius: 14px;
  background: var(--pink-200); color: var(--violet-700); font-weight: 500; font-size: .95rem;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { background: #E3F6EA; color: #146C43; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { background: #FDE8E6; color: #B42318; }

/* Small note under the submit button */
.wpcf7 .form__hint,
.form-card .form__hint { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.form-card .form-card__note { margin-top: 1rem; }

/* Placeholder when no form is selected in the widget */
.form-card .form__note.is-visible { display: block; }

@media (max-width: 640px) {
  .wpcf7 .form__row { grid-template-columns: 1fr; }
}