/* ==========================================================================
   Phase A — Conversion enhancements (additive only, no existing rules touched)
   - Floating WhatsApp button (desktop hover label, mobile compact)
   - Sticky mobile booking bar (shows after hero scroll)
   - Hero urgency pill
   - Hero trust strip
   ========================================================================== */

:root {
  --pa-wa-green: #25D366;
  --pa-wa-green-dark: #128C7E;
  --pa-luxury-navy: #0a1628;
  --pa-luxury-navy-2: #050b14;
  --pa-urgent: #e53935;
}

/* ─────────────────────────  Floating WhatsApp  ───────────────────────── */
/* Hard-disabled: site already has its own "Chat with us" floating button. */
.pa-fab-wa { display: none !important; }

/* ─────────  Crisp-icon override for ALL inline floating WhatsApp buttons  ───────── */
/* Letting the browser render the SVG natively (no GPU compositing) for sharpest
   icon edges. Animations are still off, but transform/backface tricks were causing
   sub-pixel softness on some displays — removed them entirely. */
.wa-float,
.float-wa,
.wa-float-btn,
#floating-whatsapp-btn {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  will-change: auto !important;
}
/* Pulse animation removed — was creating a soft halo that read as "blur".
   Buttons are now clean static green circles. If you ever want the pulse back,
   replace this rule with the previous version (it lived in the file's git history). */
.wa-float::before,
.float-wa::before,
.wa-float-btn::before,
#floating-whatsapp-btn::before {
  display: none !important;
  animation: none !important;
}
.wa-float svg,
.float-wa svg,
.wa-float-btn svg,
#floating-whatsapp-btn svg,
#floating-whatsapp-btn .wa-icon svg {
  shape-rendering: geometricPrecision;
}

/* ════════════════════════════════════════════════════════════════════════════
   Universal WhatsApp button look: green circle, white icon, crisp at all sizes.
   Forces consistent branding across every floating WA button on every page.
   ════════════════════════════════════════════════════════════════════════════ */

/* Green button background, white text/icon — forced everywhere.
   Explicitly disable any animation and use a single sharp drop shadow only. */
.wa-float,
.float-wa,
.wa-float-btn,
#floating-whatsapp-btn {
  background: #25D366 !important;
  color: #ffffff !important;
  animation: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  filter: none !important;
}
/* Also kill the inline .wa-pulse companion span that some buttons rely on */
.wa-pulse,
#floating-whatsapp-btn .wa-pulse {
  display: none !important;
  animation: none !important;
}
.wa-float:hover,
.float-wa:hover,
.wa-float-btn:hover,
#floating-whatsapp-btn:hover {
  background: #1da851 !important;
  color: #ffffff !important;
}

/* Force the SVG to inherit white and be properly sized.
   Bigger icon = more pixels for the inner phone-receiver detail =
   sharper rendering. image-rendering hint helps WebKit/Chromium pick the
   crispest scaling path. */
.wa-float svg,
.float-wa svg,
.wa-float-btn svg {
  width: 38px !important;
  height: 38px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.wa-float svg *,
.float-wa svg *,
.wa-float-btn svg * {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Index "Chat with us" button: keep the icon container, force its SVG white */
#floating-whatsapp-btn .wa-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #ffffff !important;
}
#floating-whatsapp-btn .wa-icon svg {
  width: 32px !important;
  height: 32px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
#floating-whatsapp-btn .wa-icon svg * {
  fill: #ffffff !important;
  stroke: none !important;
}
#floating-whatsapp-btn .wa-label {
  color: #ffffff !important;
}
/* Stop the inline #floating-whatsapp-btn .wa-pulse element from re-blurring the icon */
#floating-whatsapp-btn .wa-pulse {
  animation: none !important;
  display: none !important;
}
@keyframes pa-wa-float-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.pa-fab-wa--legacy-styles-do-not-use {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  background: var(--pa-wa-green);
  color: #fff !important;
  border-radius: 999px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(37,211,102,.40), 0 2px 6px rgba(0,0,0,.15);
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Pulse ring lives on a pseudo-element so the icon never repaints with the animation */
.pa-fab-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: pa-pulse-ring 2.6s ease-out infinite;
}
.pa-fab-wa:hover {
  background: var(--pa-wa-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,211,102,.50), 0 4px 8px rgba(0,0,0,.20);
}
.pa-fab-wa:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.pa-fab-wa svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  shape-rendering: geometricPrecision;
}

.pa-fab-wa-label {
  display: none;
  white-space: nowrap;
  padding: 0 14px 0 10px;
  font-family: inherit;
}
.pa-fab-wa-label .pa-fab-line1 { display: block; font-size: 13px; font-weight: 700; }
.pa-fab-wa-label .pa-fab-line2 { display: block; font-size: 11px; font-weight: 500; opacity: .94; margin-top: 2px; letter-spacing: .2px; }

@media (hover: hover) and (min-width: 769px) {
  .pa-fab-wa:hover .pa-fab-wa-label,
  .pa-fab-wa:focus .pa-fab-wa-label { display: inline-block; }
}

@keyframes pa-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width: 768px) {
  .pa-fab-wa {
    bottom: 84px;          /* sit above sticky mobile booking bar */
    right: 16px;
    padding: 12px;
  }
  .pa-fab-wa svg { width: 24px; height: 24px; }
}

/* ─────────────────────────  Sticky Mobile CTA  ───────────────────────── */
.pa-mobile-cta { display: none; }

@media (max-width: 768px) {
  .pa-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9997;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .pa-mobile-cta.is-visible { transform: translateY(0); }
  .pa-mobile-cta a {
    flex: 1;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    transition: transform .12s ease;
  }
  .pa-mobile-cta a:active { transform: scale(.97); }
  .pa-mobile-cta-wa   { background: var(--pa-wa-green); color: #fff !important; box-shadow: 0 2px 8px rgba(37,211,102,.30); }
  .pa-mobile-cta-book { background: var(--pa-luxury-navy); color: #fff !important; box-shadow: 0 2px 8px rgba(10,22,40,.35); }
  .pa-mobile-cta a svg { width: 20px; height: 20px; }

  /* push body content up so the sticky bar doesn't hide it on long pages */
  body.pa-has-mobile-cta { padding-bottom: 80px !important; }
}

/* ─────────────────────────  Hero urgency pill  ───────────────────────── */
.pa-hero-urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 7px 16px;
  background: rgba(229,57,53,.96);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(229,57,53,.35), 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.pa-hero-urgency::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: pa-blink 1.6s infinite;
}
@keyframes pa-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  50%      { opacity: .55; box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

/* ─────────────────────────  Hero trust strip  ───────────────────────── */
.pa-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  margin: 18px auto 0;
  padding: 0 14px;
  max-width: 720px;
  font-size: 13px;
  color: rgba(255,255,255,.95);
  font-weight: 500;
  letter-spacing: .25px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.pa-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.pa-trust-strip span::before {
  content: "✓";
  display: inline-block;
  width: 16px; height: 16px;
  line-height: 16px;
  text-align: center;
  background: rgba(37,211,102,.95);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  text-shadow: none;
}
@media (max-width: 600px) {
  .pa-trust-strip { gap: 8px 14px; font-size: 12px; }
}