/* =========================================================
   CONTACT FIX CSS
   Load this file AFTER styles.css.
   It force-styles only the Contact + Booking component.
   ========================================================= */

body .contact-shell,
body .contact-shell * {
  box-sizing: border-box !important;
}

body .contact-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 120px 24px 118px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(19, 183, 165, 0.18), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(8, 120, 164, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #eef9fb 100%) !important;
  overflow: hidden !important;
  color: #16323f !important;
}

body .contact-shell::before {
  content: "" !important;
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  top: 46px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(8,120,164,.22), transparent) !important;
  display: block !important;
}

body .contact-shell-container {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

body .contact-shell-heading {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(280px, .28fr) !important;
  gap: 28px !important;
  align-items: end !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
}

body .contact-shell-heading > div {
  display: block !important;
}

body .contact-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 38px !important;
  margin: 0 0 18px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(8, 120, 164, 0.14) !important;
  border-radius: 999px !important;
  color: #075b82 !important;
  background: rgba(232, 248, 251, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

body .contact-shell-heading h2 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #16323f !important;
  font-size: clamp(38px, 5vw, 78px) !important;
  line-height: .96 !important;
  letter-spacing: -0.075em !important;
  font-weight: 900 !important;
}

body .contact-shell-heading p {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #637986 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
}

body .contact-booking-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, .94fr) minmax(420px, 1.06fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .contact-panel {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: clamp(30px, 4vw, 52px) !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 48px !important;
  overflow: hidden !important;
  box-shadow:
    0 42px 120px rgba(13, 86, 117, 0.16),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body .contact-panel::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  right: -125px !important;
  top: -125px !important;
  width: 350px !important;
  height: 350px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

body .contact-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  z-index: -1 !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 34px !important;
  pointer-events: none !important;
}

body .contact-panel-info {
  color: #16323f !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,250,253,.91)) !important;
}

body .contact-panel-info::before {
  background: radial-gradient(circle, rgba(19,183,165,.28), rgba(8,120,164,.08) 52%, transparent 72%) !important;
}

body .booking-panel-clean {
  color: #ffffff !important;
  background:
    linear-gradient(145deg, rgba(8,120,164,.98), rgba(19,183,165,.90)),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.30), transparent 36%) !important;
}

body .booking-panel-clean::before {
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,.08) 48%, transparent 72%) !important;
}

body .booking-panel-clean .contact-pill {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.14) !important;
}

body .contact-panel h3 {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: clamp(30px, 3.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
}

body .contact-panel-info h3 {
  color: #16323f !important;
}

body .booking-panel-clean h3 {
  color: #ffffff !important;
}

body .contact-panel p {
  display: block !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  max-width: 680px !important;
  font-size: 16px !important;
  line-height: 1.76 !important;
  font-weight: 500 !important;
}

body .contact-panel-info p {
  color: #637986 !important;
}

body .booking-panel-clean p {
  color: rgba(255,255,255,.84) !important;
}

body .contact-methods {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}

body .contact-method {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(8,120,164,.08) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow:
    0 16px 44px rgba(13,86,117,.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body .contact-method:hover {
  transform: translateX(8px) scale(1.01) !important;
  background: #ffffff !important;
  box-shadow:
    0 24px 72px rgba(13,86,117,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body .contact-method-icon {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0878a4, #13b7a5) !important;
  box-shadow: 0 16px 38px rgba(8,120,164,.22) !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

body .contact-method strong {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #16323f !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

body .contact-method a,
body .contact-method span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #637986 !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

body .contact-note {
  display: block !important;
  margin: auto 0 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(19,183,165,.18) !important;
  border-radius: 24px !important;
  color: #075b82 !important;
  background: linear-gradient(135deg, rgba(232,248,251,.98), rgba(255,255,255,.88)) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
}

body .booking-clean-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

body .booking-form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .booking-clean-form label {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

body .booking-clean-form label > span {
  display: block !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body .booking-clean-form input,
body .booking-clean-form select,
body .booking-clean-form textarea {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 20px !important;
  outline: none !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 38px rgba(4,42,58,.08) !important;
  backdrop-filter: blur(10px) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  appearance: auto !important;
}

body .booking-clean-form textarea {
  min-height: 118px !important;
  padding-top: 16px !important;
  resize: vertical !important;
}

body .booking-clean-form input::placeholder,
body .booking-clean-form textarea::placeholder {
  color: rgba(255,255,255,.62) !important;
}

body .booking-clean-form select option {
  color: #16323f !important;
  background: #ffffff !important;
}

body .booking-clean-form input:focus,
body .booking-clean-form select:focus,
body .booking-clean-form textarea:focus {
  border-color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.23) !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

body .booking-submit-clean {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 58px !important;
  margin: 8px 0 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #075b82 !important;
  background: #ffffff !important;
  box-shadow:
    0 18px 42px rgba(4,42,58,.18),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body .booking-submit-clean:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 26px 66px rgba(4,42,58,.22),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body .keep-book-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 4px 0 28px !important;
}

body .keep-book-grid div {
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 16px 40px rgba(4,42,58,.09) !important;
}

body .keep-book-grid strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
}

body .keep-book-grid span {
  display: block !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

@media (max-width: 980px) {
  body .contact-shell-heading,
  body .contact-booking-grid {
    grid-template-columns: 1fr !important;
  }

  body .contact-panel {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  body .contact-shell {
    padding: 76px 18px !important;
  }

  body .contact-shell-container {
    width: 100% !important;
  }

  body .contact-panel {
    padding: 26px !important;
    border-radius: 32px !important;
  }

  body .booking-form-row,
  body .keep-book-grid {
    grid-template-columns: 1fr !important;
  }

  body .contact-method {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  body .contact-method-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }

  body .booking-submit-clean {
    width: 100% !important;
  }
}


/* =========================================================
   V12 Contact typography + icon alignment fix
   ========================================================= */

/* Make the section heading visually consistent with other website sections */
body .contact-shell-heading {
  margin-bottom: 34px !important;
}

body .contact-shell-heading h2 {
  font-size: clamp(32px, 4.2vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  font-weight: 850 !important;
}

body .contact-shell-heading p {
  max-width: 460px !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
  color: #637986 !important;
}

/* Reduce card title size so Contact section does not overpower the rest of the page */
body .contact-panel h3 {
  font-size: clamp(28px, 3.1vw, 44px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
  font-weight: 850 !important;
}

body .contact-panel p {
  font-size: 15.5px !important;
  line-height: 1.72 !important;
}

/* Slightly reduce card height and spacing to match the website rhythm */
body .contact-panel {
  min-height: 560px !important;
  padding: clamp(28px, 3.4vw, 46px) !important;
  border-radius: 42px !important;
}

body .contact-panel::after {
  border-radius: 30px !important;
}

/* Fix contact icon overlap by using stable text badges instead of special symbols */
body .contact-method-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 19px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0878a4, #13b7a5) !important;
  box-shadow: 0 16px 38px rgba(8,120,164,.22) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
  transform: none !important;
}

body .contact-method {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 80px !important;
}

/* Keep form fields elegant but less oversized */
body .booking-clean-form input,
body .booking-clean-form select,
body .booking-clean-form textarea {
  min-height: 56px !important;
  border-radius: 18px !important;
}

body .booking-clean-form textarea {
  min-height: 108px !important;
}

body .booking-submit-clean {
  min-height: 56px !important;
  padding: 0 26px !important;
}

/* Mobile typography tuning */
@media (max-width: 760px) {
  body .contact-shell-heading h2 {
    font-size: 38px !important;
  }

  body .contact-panel h3 {
    font-size: 32px !important;
  }

  body .contact-method {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  body .contact-method-icon {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   V13 Contact SVG icon balance fix
   ========================================================= */

/* Use SVG icon badges and protect them from generic span rules */
body .contact-method .contact-method-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0878a4, #13b7a5) !important;
  box-shadow: 0 16px 38px rgba(8,120,164,.22) !important;
  overflow: hidden !important;
  transform: none !important;
  line-height: 0 !important;
  text-align: center !important;
}

body .contact-method .contact-method-icon svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
}

body .contact-method {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
}

body .contact-method > div:not(.contact-method-icon) {
  display: block !important;
  min-width: 0 !important;
}

@media (max-width: 760px) {
  body .contact-method {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  body .contact-method .contact-method-icon {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 17px !important;
  }

  body .contact-method .contact-method-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
}