/* ═══════════════════════════════════════════════════════════════
   CONTACT US — PAGE-SPECIFIC STYLES
   Reuses every design token, color, font, spacing unit, border
   radius, shadow and button style already defined in style.css.
   Nothing here redefines the header, footer, or brand tokens —
   only new sections unique to this page (hero, info/form, map).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   CONTACT HERO
   Same treatment as the homepage hero:
   full-bleed image, dark overlay, slow zoom,
   fade-up heading, nav sits on top of it.
═══════════════════════════════════════ */
.cu-hero {
  position: relative;
  min-height: clamp(340px, 46vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cu-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cu-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: en-hero-zoom 14s ease-out both;
}

.cu-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,20,0.42) 0%, rgba(10,12,20,0.62) 100%);
}

.cu-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 160px) var(--gutter) 60px;
  text-align: center;
}

.cu-hero-title {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 60px);
  color: var(--white);
  line-height: 1.1;
}

/* ═══════════════════════════════════════
   CONTACT INFO + ENQUIRY FORM
═══════════════════════════════════════ */
.cu-section {
  background: var(--cream-1);
  /* BUG FIX (see chat - "contact form ki width sahi karo... page
     completely responsive hona chaiaya"): every other section on the
     site uses var(--gutter) for its side padding, which the rest of
     style.css already shrinks at each breakpoint (100px desktop down
     to 26px on phones - see style.css's ":root { --gutter: ... }"
     media queries). This was hardcoded to a flat 60px on every screen
     size instead, so on tablet/phone it never shrank along with
     everything else - eating an extra ~34px of padding per side out of
     a ~360-440px viewport and squeezing the form/info columns narrower
     than intended. Matches .en-why's identical background + vertical
     rhythm elsewhere in style.css, just with the responsive gutter. */
  padding: 60px var(--gutter) 60px;
}

.cu-grid {
  max-width: 1400px;
  margin: 0 auto;
  /* padding: 0 var(--gutter); */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: stretch;
}

/* ── Info column ──
   Stretched to match the form card's height; the list
   spreads out evenly so both columns end at the same line. */
.cu-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cu-info-lead {
  font-family: 'Mulish', sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: #6E6D68;
  max-width: 480px;
  margin: 8px 0 0;
}

.cu-info-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  /* justify-content: space-between; */
}

.cu-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cu-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E8E2D9;
  color: #C99A2E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: en-icon-float 4.2s ease-in-out infinite;
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
  will-change: transform;
}

.cu-info-item:hover .cu-info-icon {
  animation-play-state: paused;
  background: #C99A2E;
  color: var(--white);
  transform: translateY(-3px) scale(1.06);
}

.cu-info-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}

.cu-info-label {
  font-family: 'Mulish', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #C99A2E;
}

.cu-info-text a,
.cu-info-text span:not(.cu-info-label) {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.5;
  max-width: 320px;
}

.cu-info-text a {
  transition: color 0.3s;
}

.cu-info-text a:hover {
  color: var(--gold-dark);
}

/* ── Form column (mirrors the homepage booking-widget card) ── */
.cu-form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 36px 38px;
  box-shadow: 0 20px 50px rgba(30,20,10,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cu-form-title {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 32px;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.cu-form-sub {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid-gray);
  margin-bottom: 16px;
}

.cu-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cu-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 16px;
  margin-bottom: 18px;
}

.cu-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.cu-field-full {
  grid-column: 1 / -1;
}

/* Labels are visually hidden on every field (placeholder / inline
   text carries the meaning instead), but remain in the DOM for
   screen readers. */
.cu-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cu-field input,
.cu-field select,
.cu-field textarea {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid #DFDAD2;
  border-radius: 8px;
  padding: 0 16px;
  height: 46px;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cu-field textarea {
  resize: none;
  height: auto;
  min-height: 96px;
  padding: 14px 16px;
  font-family: 'Mulish', sans-serif;
  line-height: 1.2;
}

.cu-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

.cu-field input::placeholder,
.cu-field textarea::placeholder {
  color: #9B9B9B;
}

.cu-field input:focus,
.cu-field select:focus,
.cu-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,167,109,0.16);
}

.cu-field input:not([type="date"]):invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(178,58,58,0.5);
}

/* Date inputs get their red "needs attention" state from JS instead
   (added on blur, once the user has actually interacted with the
   field) — native :invalid:not(:placeholder-shown) never clears for
   empty required date fields in most browsers, which caused a
   permanent red border even before the user touched the form. */
.cu-field input[type="date"].cu-field-invalid {
  border-color: rgba(178,58,58,0.5);
}

/* ── Check-In / Check-Out — custom calendar picker ──
   Same gold-themed calendar (.en-dp-panel and friends) used on the
   homepage's Quick Enquiry widget — those styles live once in
   style.css and are simply reused here. Only the trigger box is
   styled on this page, so it matches every other bordered field in
   this form. Past dates are always disabled and check-out can never
   land before check-in (logic lives in assets/js/contact.js). */
.cu-dp-field { position: relative; }

.cu-dp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #DFDAD2;
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cu-dp-trigger svg { flex-shrink: 0; color: var(--mid-gray); }

.cu-dp-display {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--charcoal);
}

.cu-dp-field.is-active .cu-dp-trigger,
.cu-dp-trigger:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,167,109,0.16);
}

.cu-dp-field.cu-field-invalid .cu-dp-trigger {
  border-color: rgba(178,58,58,0.5);
}

@media (max-width: 480px) {
  .cu-dp-field .en-dp-panel { width: 100%; }
}

/* Adults / Children stepper — styled as a single bordered field
   matching every other input, with the label inline on the left
   and the +/- controls grouped on the right. */
.cu-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 14px 0 16px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: var(--white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cu-stepper:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,167,109,0.16);
}

.cu-stepper-label {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: #9B9B9B;
}

.cu-stepper-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cu-stepper-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  background: var(--white);
  color: var(--charcoal);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cu-stepper-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  transform: translateY(-1px);
}

.cu-stepper-value {
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--charcoal);
  min-width: 14px;
  text-align: center;
}

/* Simple captcha — one row on desktop, clean stack on mobile */
.cu-captcha-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.cu-captcha-question {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--charcoal);
  white-space: nowrap;
  flex-shrink: 0;
}

.cu-captcha-input {
  flex: 0.5;
  min-width: 0;
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  padding: 0 16px;
  height: 46px;
  width: 100%;

}

.cu-captcha-refresh {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mid-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s ease, color 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.cu-captcha-refresh:hover {
  color: var(--gold-dark);
  background: rgba(201,167,109,0.12);
  transform: rotate(180deg);
}

.cu-form-status {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  /* margin-bottom: 14px; */
}

.cu-form-status.is-error { color: #B23A3A; }
.cu-form-status.is-success { color: #2E7D4F; }

.cu-submit {
  width: 100%;
  margin-top: auto;
  border-radius: 30px !important;
  padding: 16px !important;
  letter-spacing: 0.12em !important;
  box-shadow: 0 12px 28px rgba(201,167,109,0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  background: linear-gradient(180deg, #C9A76D, #E3CEA9);
}

.cu-submit:hover {
  box-shadow: 0 16px 34px rgba(201,167,109,0.36);
}

/* ═══════════════════════════════════════
   MAP
═══════════════════════════════════════ */
.cu-map {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  position: relative;
  overflow: hidden;
}

.cu-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(8%) contrast(0.97);
}

/* ═══════════════════════════════════════
   RESPONSIVE — CONTACT PAGE
   Same breakpoint scale as the homepage.
═══════════════════════════════════════ */
@media (max-width: 1600px) { .cu-grid { gap: 56px; } }
@media (max-width: 1440px) { .cu-form-card { padding: 38px; } }

@media (max-width: 1024px) {
  .cu-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .cu-form-card { padding: 34px; }
}

@media (max-width: 992px) {
  .cu-grid { grid-template-columns: 1fr; gap: 56px; }
  .cu-info-text a, .cu-info-text span:not(.cu-info-label) { max-width: 100%; }
}

@media (max-width: 768px) {
  .cu-hero-inner { padding-top: 120px; }
  .cu-form-card { padding: 28px; }
  .cu-form-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}

@media (max-width: 700px) {
  .cu-form-grid { grid-template-columns: 1fr; }
  .cu-field-stepper { grid-column: auto; }
}

@media (max-width: 576px) {
  .cu-form-card { padding: 24px 20px; border-radius: 14px; }
  .cu-captcha-row { gap: 8px; }
  .cu-captcha-question { font-size: 13px; }
  .cu-captcha-refresh { width: 34px; height: 34px; }
  .cu-map { height: 300px; }
}

@media (max-width: 430px) {
  .cu-hero-title { font-size: clamp(32px, 10vw, 44px); }
  .cu-info-list { gap: 22px; }
}

@media (max-width: 360px) {
  .cu-form-card { padding: 20px 16px; }
  .cu-captcha-row { gap: 6px; }
  .cu-captcha-question { font-size: 12px; }
  .cu-field input, .cu-field select { padding: 0 12px; }
  .cu-captcha-refresh { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cu-info-icon { animation: none; }
}

.captcha-input-fields {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* BUG FIX (see chat - "page completely responsive hona chaiaya"): the
   markup for this row uses class="captcha-input-fields" (see
   ui/contact.php), but the responsive gap/font-size tweaks above
   (@media 576px/360px) were written against .cu-captcha-row - a class
   nothing in the HTML actually has, so they never applied to any real
   element. Re-declaring the same tightening here, against the class
   that's actually on the page, so the captcha row doesn't stay at its
   full desktop gap/size once the form has already shrunk down for
   phones. */
@media (max-width: 576px) {
  .captcha-input-fields { gap: 8px; }
  .cu-captcha-question { font-size: 13px; }
  .cu-captcha-refresh { width: 34px; height: 34px; }
}

@media (max-width: 360px) {
  .captcha-input-fields { gap: 6px; }
  .cu-captcha-question { font-size: 12px; }
  .cu-captcha-refresh { width: 30px; height: 30px; }
}

/* Phone dial-code prefix (value comes from the DB — eagle_billcountry) */
.cu-phone-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cu-phone-code {
  flex-shrink: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--charcoal);
  background: var(--cream-1, #F4EFE6);
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.cu-phone-group input {
  flex: 1;
  min-width: 0;
}