/* ==========================================================================
   ATHLI — Contact Form 7

   The plugin's own stylesheet is dequeued. These rules do two things: undo the
   wrappers Contact Form 7 puts around each control so the design's own
   .form-grid / .field layout is untouched, and restyle its messages so they
   read like the rest of the site rather than like a plugin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The plumbing the plugin's own stylesheet would otherwise have hidden.
   Without these the accessibility announcement and the hidden form fields
   would print as visible text in the middle of the card.
   -------------------------------------------------------------------------- */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}

.wpcf7 .hidden-fields-container { display: none; }

/* The message only appears once there is something to say. */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
  display: none;
}

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

/* Each control arrives inside a <span>. It has to behave like the input it
   wraps, or the field's flex column collapses around it. */
.field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* The plugin's own form element must not introduce spacing of its own. */
.form-card .wpcf7 { margin: 0; }
.form-card .wpcf7-form { margin: 0; }

/* Validation message under a field — quiet, in the accent, matching the
   small print it sits next to. */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--accent);
}

.field input.wpcf7-not-valid,
.field select.wpcf7-not-valid,
.field textarea.wpcf7-not-valid {
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Where the message appears.

   The design reserves a slot between the button and the small print, so the
   layout does not jump when a message arrives. Contact Form 7 always prints
   its message last, so the form is laid out as a column and the message is
   ordered back into that slot. The empty placeholder holds the space until
   there is something to say, then steps aside.
   -------------------------------------------------------------------------- */
.form-card .wpcf7-form {
  display: flex;
  flex-direction: column;
}

.form-card .wpcf7-form > .form-grid            { order: 1; }
.form-card .wpcf7-form > button[type="submit"] { order: 2; }
.form-card .wpcf7-form > .form-status          { order: 3; }
.form-card .wpcf7-form > .wpcf7-response-output { order: 4; }
.form-card .wpcf7-form > .form-note            { order: 5; }

.wpcf7 form.sent .form-status,
.wpcf7 form.invalid .form-status,
.wpcf7 form.unaccepted .form-status,
.wpcf7 form.failed .form-status,
.wpcf7 form.aborted .form-status,
.wpcf7 form.spam .form-status,
.wpcf7 form.payment-required .form-status {
  display: none;
}

/* The message itself, wearing the design's own type and colour. */
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--off-white);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: rgba(var(--ink-rgb), 0.22);
  background: var(--white);
  color: var(--ink);
}

/* The form card on the forest band sits on a light card, so the tokens above
   already resolve correctly — but the spinner does not, and it is not part of
   the design in the first place. */
.wpcf7-spinner { display: none !important; }

/* While a submission is in flight the button should read as busy rather than
   simply stop responding. */
.wpcf7 form.submitting button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Phone field country code picker (see js/phone-field.js).
   Closed, the picker shows only the code (+971); the real <select> sits
   invisibly on top of it, so opening it gives the device's own list of
   "Country (+code)" options. Code box and number share one row.
   -------------------------------------------------------------------------- */
.phone-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.phone-row input { flex: 1 1 auto; min-width: 0; }

.phone-code {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 92px;
  padding: 0 34px 0 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--off-white);
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.phone-code::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.field .phone-code select.phone-code__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.phone-code:focus-within {
  border-color: var(--forest);
  background: var(--white);
}