/* Unique World Holidays — Contact Us page, Section 2 (image panel + gradient
   panel: badge, heading, description, Contact Form 7). Same-to-same
   replacement for the Elementor containers it used to be (post 540,
   container b041b18: a 1260px-boxed row of two equal-width panels —
   5772292 image panel, cba33fd navy-to-grey gradient panel — with a
   heading/heading/text-editor/ElementsKit-CF7-widget stack inside; that
   widget was itself just a styled wrapper around Contact Form 7's own
   [contact-form-7] shortcode) — see partials/contact-form-section.php for
   the full context. .gsap-fade-in is this project's existing reusable
   scroll-reveal utility (see assets/js/animations.js) — not a new
   animation system. Values below are pixel-matched to the live page's
   computed CSS (wp-content/uploads/elementor/css/post-540.css), including
   resolving Elementor's global color/typography references.

   Section is edge-to-edge (width:100%, no max-width) — container b041b18's
   "Boxed Width: 1260px" setting was actually INACTIVE (its own Content
   Width was set to "Full", confirmed against the live page: the image
   panel touches the viewport edge with no gutter at any width tested),
   so it isn't reproduced here; only the Map section (25f60ad) is
   genuinely boxed to 1260px. */

.uwh-contact-form-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
}

.uwh-contact-form-image-panel {
  flex: 1 1 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 2px 0 6px 0.5px rgba(0, 0, 0, 0.5);
}

.uwh-contact-form-content-panel {
  flex: 1 1 0;
  background: linear-gradient(120deg, #13294b 0%, #43597a 100%);
  box-shadow: 2px 0 6px 0.5px rgba(0, 0, 0, 0.5);
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* ---- Badge ("Your Next Holiday") ----
   font-family is Cinzel, not the Poppins the old Elementor heading widget
   declared — that widget rendered as an <h2>, and the site-wide h1-h6 rule
   (functions.php, font-family: "Cinzel", serif !important) always wins
   regardless of what any individual widget/element sets, confirmed by
   comparing against the live page directly. This <span> isn't an h1-h6
   tag so that rule wouldn't reach it — Cinzel is set explicitly here
   instead, to reproduce the same actually-rendered result. */
.uwh-contact-form-badge {
  display: inline-block;
  width: fit-content;
  font-family: "Cinzel", serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
  color: #13294b;
  background: #feae02 !important;
  padding: 10px 20px;
  border-radius: 50px;
  box-shadow: 0 0 7px 0.3px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

/* ---- Heading ("Send us a message") ----
   font-family intentionally omitted, same reasoning as the hero title in
   contact-hero-section.css — this renders as a real <h2>, so the site-wide
   h1-h6 Cinzel rule (functions.php) always wins over the Poppins the old
   Elementor heading widget declared; confirmed against the live page. */
.uwh-contact-form-heading {
  margin: 0 0 20px;
  font-size: 42px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.2;
  color: #ffffff;
}

/* ---- Description ---- */
.uwh-contact-form-description {
  margin: 0 0 10px;
  max-width: 521px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #f4f6ef;
}

/* ---- Contact Form 7 embed ----
   Selectors target CF7's own markup directly (.wpcf7-form, standard field/
   label/submit classes) instead of the old ElementsKit wrapper's
   ".ekit-form" class — CF7 itself renders unchanged, only styled here. */
.uwh-contact-form-embed .wpcf7-form {
  text-align: left;
}

.uwh-contact-form-embed .wpcf7-form label {
  display: block;
  margin-bottom: 4px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #f4f6ef;
}

.uwh-contact-form-embed .wpcf7-form label span {
  color: #777777;
}

.uwh-contact-form-embed
  .wpcf7-form
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.uwh-contact-form-embed .wpcf7-form select {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background-color: #f4f6ef;
  color: #000000;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}

.uwh-contact-form-embed .wpcf7-form textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background-color: #f4f6ef;
  color: #000000;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  resize: vertical;
}

.uwh-contact-form-embed
  .wpcf7-form
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover,
.uwh-contact-form-embed .wpcf7-form textarea:hover,
.uwh-contact-form-embed .wpcf7-form select:hover,
.uwh-contact-form-embed
  .wpcf7-form
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.uwh-contact-form-embed .wpcf7-form textarea:focus,
.uwh-contact-form-embed .wpcf7-form select:focus {
  background-color: #ffffff;
  outline: none;
}

.uwh-contact-form-embed
  .wpcf7-form
  input:not([type="submit"]):not([type="checkbox"]):not(
    [type="radio"]
  )::placeholder,
.uwh-contact-form-embed .wpcf7-form textarea::placeholder {
  font-size: 14px;
  color: #a0a0a0;
}

.uwh-contact-form-embed .wpcf7-form input[type="submit"] {
  font-family: "Roboto", sans-serif;
  background: #feae02 !important;
  color: #13294b;
  border: none;
  border-radius: 30px;
  padding: 10px 30px;
  box-shadow: 0 0 6px 0.5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.uwh-contact-form-embed .wpcf7-form input[type="submit"]:hover {
  background-color: #d5c712;
  color: #ffffff;
}

.uwh-contact-form-embed .wpcf7-acceptance {
  display: block;
  margin: 6px 0 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .uwh-contact-form-section {
    flex-direction: column;
  }

  .uwh-contact-form-image-panel {
    min-height: 400px;
  }

  .uwh-contact-form-content-panel {
    padding: 35px;
  }

  .uwh-contact-form-heading {
    font-size: 32px;
  }
}

@media (max-width: 782px) {
  .uwh-contact-form-image-panel {
    min-height: 320px;
  }

  .uwh-contact-form-content-panel {
    padding: 40px 20px;
  }

  .uwh-contact-form-heading {
    font-size: 24px;
  }
}