/* Book for free Resources — consistent CF7 fields */
.ekit-form .wpcf7,
.wpcf7 {
  font-family: inherit;
}

.wpcf7 form p {
  margin: 0 0 18px;
}

.wpcf7 form p:last-of-type {
  margin-bottom: 8px;
}

.wpcf7 form label {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.wpcf7 form label br {
  display: none;
}

.wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  color: #1f2937;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  border: 1px solid #d7dbe2;
  border-radius: 6px;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.wpcf7 select {
  padding-right: 42px;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  border: 1px solid #d7dbe2 !important;
  cursor: pointer;
  height: 46px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  height: 46px;
}

.wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #e31c23;
  box-shadow: 0 0 0 3px rgba(227, 28, 35, 0.12);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #9ca3af;
}

.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 46px;
  margin-top: 8px;
  padding: 0 28px;
  border: 0;
  border-radius: 6px;
  background: #1f2933;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(31, 41, 51, 0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
  background: #e31c23;
}

.wpcf7 form.submitting .wpcf7-submit {
  opacity: 0.7;
  pointer-events: none;
}

/* Mobile number: the dialling code sits beside the number rather than above it,
   so the pair reads as one field. The code column is wide enough for the
   default ("Kuwait +965"); longer names ellipsis when the select is closed and
   show in full once it is open. Below 420px there is no room for two columns,
   so they stack.

   The wrap class is named alongside .reg-phone because the theme lays every
   field out with .ekit-wid-con .ekit-form form label span (0,2,3), which
   outranks a two-class selector and would keep this display:block. */
.wpcf7 .wpcf7-form-control-wrap.reg-phone {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 8px;
  /* The 20px the controls below no longer carry. Every field on the site is
     spaced by that margin rather than by the paragraph, which is set to 0 on
     these pages, so the row needs it back to keep the rhythm. Checked: 20px on
     all 14 form pages. */
  margin-bottom: 20px;
}

/* Both controls carry the 20px bottom margin the theme puts on every field, and
   inside a grid that margin sits within the track — so the row came out 20px
   taller than the ones above it and ate its own spacing. The margin below the
   row belongs to the <p>, as it does for every other field.

   Five classes because the rule adding it is written per page
   (.elementor-216 .elementor-element.elementor-element-62aa2ab .ekit-form …),
   so its selector cannot be named here. Leaving the two to stretch keeps them
   the same height as each other whatever that page sets. */
.wpcf7 .wpcf7-form-control-wrap.reg-phone > .wpcf7-form-control.reg-phone__code,
.wpcf7 .wpcf7-form-control-wrap.reg-phone > .wpcf7-form-control.reg-phone__number {
  margin-bottom: 0;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  .wpcf7 .wpcf7-form-control-wrap.reg-phone {
    grid-template-columns: minmax(0, 1fr);
  }
}