/* ============================================================
   SITE-WIDE CONTACT FORM 7 STYLING
   Matches the dark hero-form-card theme. Uses Bootstrap-style
   classes (form-control, bg-sz-gold-gradient) from the CF7 form
   markup, since CF7 forms don't use the theme's own .hf-field
   markup. Loaded on every page via functions.php (szuae_base_assets),
   so any CF7 form anywhere on the site picks this up automatically -
   no per-page/per-template CSS needed.
   ============================================================ */
.wpcf7-form .form-control{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:14px;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.wpcf7-form .form-control::placeholder{
  color:rgba(255,255,255,.5);
}
.wpcf7-form .form-control:focus{
  outline:none;
  border-color:#C7A44D;
  background:rgba(255,255,255,.08);
}
.wpcf7-form textarea.form-control{
  resize:vertical;
  min-height:100px;
}

/* Phone field: this site uses the "intl-tel-input" plugin (flag +
   dial-code dropdown, confirmed via DevTools - markup is
   .intl-tel-input > .flag-container > .selected-flag containing
   .iti-flag / .selected-dial-code ("+971") / .iti-arrow, plus the
   actual <input> which already has class "form-control" so it's
   covered by the rule above). The black text people were seeing is
   NOT the typed number - it's the "+971" dial-code label the plugin
   renders next to the flag, which sits OUTSIDE .form-control, so it
   needs its own override. The plugin's own CSS sets this for a
   light theme by default; !important wins regardless of load order. */
.wpcf7-form .intl-tel-input .selected-dial-code,
.wpcf7-form .intl-tel-input .iti-arrow{
  color:#fff !important;
}
.wpcf7-form .intl-tel-input .flag-container,
.wpcf7-form .intl-tel-input .selected-flag{
  background:transparent !important;
}

/* Consent text ("By clicking, you agree to our...") - was text-black
   on a dark form, now visible. NOTE: CF7's wpautop runs on the saved
   form content and can split a multi-line paragraph into several
   separate <p> tags if there are line breaks in the admin Form tab
   (causing the sentence/links/comma to stack on separate lines
   instead of flowing as one line) - and the <a> tags can carry the
   "text-black" class directly on themselves, not just on a wrapping
   <p>, so a plain ".text-black a" descendant selector won't always
   match them. This handles both: it re-flows every <p> inside the
   consent column into one inline block, and colors the links by
   their own classes rather than relying on an ancestor. */
.wpcf7-form .col-md-12:has(> p a.text-decoration-none){
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px;
  margin-bottom:16px;
}
.wpcf7-form .col-md-12:has(> p a.text-decoration-none) p{
  display:inline;
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:12px;
}
.wpcf7-form .text-black{
  color:rgba(255,255,255,.6) !important;
  font-size:12px;
}
.wpcf7-form .text-black br{
  display:none;
}
.wpcf7-form a.text-black,
.wpcf7-form a.text-decoration-none,
.wpcf7-form .text-black a{
  color:#C7A44D !important;
  text-decoration:underline;
}

/* Submit button - gold gradient to match brand */
.wpcf7-form .bg-sz-gold-gradient{
  background:linear-gradient(90deg, #C7A44D, #E4C878);
  background-size:200% 100%;
  background-position:left;
  border:none;
  color:#111 !important;
  font-weight:700;
  transition:background-position .3s cubic-bezier(.2,.8,.2,1);
}
.wpcf7-form .bg-sz-gold-gradient.bg-to-right:hover{
  background-position:right;
}

/* Hide the honeypot field (anti-spam) */
.wpcf7-form span[class*="honeypot"],
.wpcf7-form input[name*="honeypot"]{
  display:none !important;
}

/* CF7 validation/error styling to match dark theme */
.wpcf7-form .wpcf7-not-valid-tip{
  color:#ff6b6b;
  font-size:12px;
  margin-top:-10px;
  margin-bottom:10px;
}
.wpcf7-form .wpcf7-response-output{
  border-radius:6px;
  color:#fff;
  font-size:13px;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid{
  border-color:#ff6b6b;
}