/* =============================================================================
   SevenLakes — Premium Booking / Contact component
   Self-contained, namespaced styles (sl-*). Safe to load site-wide.
   The site ships a *precompiled* Tailwind build, so this component never relies
   on utility classes — every style it needs lives here.
   ============================================================================= */

/* Design tokens live on :root so BOTH the page CTA buttons (.sl-cta, which sit
   in the page body) and the modal (.sl-contact-root) can resolve them. */
:root {
  --sl-ocean-1: #0ea5e9;
  --sl-ocean-2: #0284c7;
  --sl-ocean-3: #0369a1;
  --sl-ink: #0f172a;
  --sl-ink-soft: #334155;
  --sl-muted: #64748b;
  --sl-line: #e2e8f0;
  --sl-gold: #f59e0b;
  --sl-emerald: #10b981;
  --sl-radius: 24px;
  --sl-radius-sm: 14px;
  --sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.sl-contact-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above the site nav (z-50) and any floating UI */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sl-contact-root *,
.sl-contact-root *::before,
.sl-contact-root *::after {
  box-sizing: border-box;
}

.sl-contact-root.is-open {
  display: flex;
}

/* ----------------------------------------------------------------- backdrop */
.sl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 30, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.sl-contact-root.is-active .sl-backdrop {
  opacity: 1;
}

/* -------------------------------------------------------------------- panel */
.sl-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--sl-radius);
  box-shadow:
    0 2px 8px rgba(2, 8, 23, 0.06),
    0 24px 70px -12px rgba(2, 8, 23, 0.45);
  overflow: hidden;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.34s var(--sl-ease), opacity 0.28s ease;
}
.sl-contact-root.is-active .sl-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* subtle ocean glow at the top of the panel */
.sl-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: radial-gradient(
    120% 100% at 50% 0%,
    rgba(14, 165, 233, 0.14),
    rgba(14, 165, 233, 0) 70%
  );
  pointer-events: none;
}

/* ---------------------------------------------------------- drag handle (mobile) */
.sl-handle {
  display: none;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.4);
  margin: 10px auto 2px;
  flex: none;
}

/* ------------------------------------------------------------------- header */
.sl-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 14px;
  flex: none;
}
.sl-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.sl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sl-ocean-2);
}
.sl-title {
  margin: 8px 0 0;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sl-ink);
}
.sl-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  max-width: 100%;
  padding: 8px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(2, 132, 199, 0.12));
  border: 1px solid rgba(2, 132, 199, 0.22);
  color: var(--sl-ocean-3);
  font-size: 13px;
  font-weight: 600;
}
.sl-tour-chip svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.sl-tour-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-close {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: var(--sl-ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sl-close:hover {
  background: rgba(15, 23, 42, 0.12);
  transform: rotate(90deg);
}
.sl-close:focus-visible {
  outline: 2px solid var(--sl-ocean-2);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------- body */
.sl-body {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 22px 6px;
}
.sl-step {
  animation: sl-step-in 0.32s var(--sl-ease) both;
}
@keyframes sl-step-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sl-step[data-dir="back"] {
  animation-name: sl-step-in-back;
}
@keyframes sl-step-in-back {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------- form fields */
.sl-field {
  margin-top: 16px;
}
.sl-field:first-child {
  margin-top: 6px;
}
.sl-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-ink);
  margin-bottom: 7px;
}
.sl-label .sl-req {
  color: var(--sl-ocean-2);
}
.sl-input,
.sl-select,
.sl-textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--sl-ink);
  background: #fff;
  border: 1.5px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.sl-input:focus,
.sl-select:focus,
.sl-textarea:focus {
  outline: none;
  border-color: var(--sl-ocean-1);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}
.sl-input::placeholder,
.sl-textarea::placeholder {
  color: #94a3b8;
}
.sl-textarea {
  resize: vertical;
  min-height: 76px;
}
.sl-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
/* date input — keep native picker, normalise look */
.sl-input[type="date"] {
  min-height: 48px;
}
.sl-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sl-muted);
}
.sl-error-text {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  display: none;
}
.sl-field.has-error .sl-input { border-color: #dc2626; }
.sl-field.has-error .sl-error-text { display: block; }

/* --------------------------------------------------------- travellers stepper */
.sl-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--sl-line);
  border-radius: 999px;
  padding: 5px;
  background: #fff;
}
.sl-stepper button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.08);
  color: var(--sl-ocean-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.1s ease;
}
.sl-stepper button:hover:not(:disabled) { background: rgba(2, 132, 199, 0.16); }
.sl-stepper button:active:not(:disabled) { transform: scale(0.9); }
.sl-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.sl-stepper button:focus-visible { outline: 2px solid var(--sl-ocean-2); outline-offset: 2px; }
.sl-stepper output {
  min-width: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--sl-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- pickup pill group */
.sl-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.sl-pill {
  position: relative;
}
.sl-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sl-pill label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sl-ink-soft);
  background: #fff;
  border: 1.5px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.sl-pill label:hover { border-color: rgba(2, 132, 199, 0.45); }
.sl-pill input:checked + label {
  border-color: var(--sl-ocean-1);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(2, 132, 199, 0.1));
  color: var(--sl-ocean-3);
}
.sl-pill input:focus-visible + label {
  outline: 2px solid var(--sl-ocean-2);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- step 2 summary */
.sl-summary {
  margin-top: 8px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  overflow: hidden;
  background: rgba(248, 250, 252, 0.7);
}
.sl-summary-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--sl-line);
}
.sl-summary-row:first-child { border-top: none; }
.sl-summary-key {
  flex: none;
  width: 116px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sl-muted);
  padding-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.sl-summary-val {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--sl-ink);
  word-break: break-word;
}
.sl-summary-val.is-empty { color: #94a3b8; font-weight: 500; }
.sl-edit {
  margin-top: 14px;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--sl-ocean-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}
.sl-edit:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- footer */
.sl-footer {
  flex: none;
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.6);
}
.sl-actions {
  display: flex;
  gap: 10px;
}
.sl-actions .sl-btn { flex: 1 1 auto; }
.sl-actions .sl-btn--back { flex: 0 0 auto; min-width: 96px; }

/* in-modal buttons */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  padding: 13px 20px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--sl-ease), box-shadow 0.2s ease,
    background 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.sl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.32);
}
.sl-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sl-ocean-1) 0%, var(--sl-ocean-2) 55%, var(--sl-ocean-3) 100%);
  box-shadow: 0 10px 24px -8px rgba(2, 132, 199, 0.6);
}
.sl-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(2, 132, 199, 0.7);
}
.sl-btn--primary:active:not(:disabled) { transform: translateY(0); }
.sl-btn--primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}
.sl-btn--back {
  color: var(--sl-ink-soft);
  background: #fff;
  border-color: var(--sl-line);
}
.sl-btn--back:hover { background: #f8fafc; }
.sl-btn .sl-wa-icon { width: 19px; height: 19px; }

/* ----------------------------------------------------------- trust section */
.sl-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.sl-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sl-ink-soft);
}
.sl-trust-item .sl-check { color: var(--sl-emerald); }
.sl-trust-item .sl-stars { color: var(--sl-gold); letter-spacing: 1px; }
.sl-trust-sep { color: var(--sl-line); }

/* =================================================================== mobile */
@media (max-width: 640px) {
  .sl-contact-root {
    align-items: flex-end;
    padding: 0;
  }
  .sl-panel {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 28px 28px 0 0;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 0.42s var(--sl-ease), opacity 0.2s ease;
    opacity: 1;
  }
  .sl-contact-root.is-active .sl-panel {
    transform: translateY(0);
  }
  .sl-handle { display: block; }
  .sl-header { padding-top: 8px; }
  .sl-title { font-size: 20px; }
}

/* ===================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sl-backdrop,
  .sl-panel,
  .sl-step,
  .sl-btn,
  .sl-close {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .sl-panel { transform: none !important; }
}

/* ============================================ page CTA buttons (sl-cta) ====
   These replace the old WhatsApp anchors in the page. They are <button>s and
   open the modal. Variants cover dark (hero) and light sections.
   ========================================================================= */
.sl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.18s var(--sl-ease), box-shadow 0.22s ease,
    background 0.22s ease, color 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.sl-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(14, 165, 233, 0.6);
}
.sl-cta svg { flex: none; }

/* sizes */
.sl-cta--lg { padding: 16px 30px; font-size: 16px; }
.sl-cta--md { padding: 13px 26px; font-size: 14px; }
.sl-cta--block { width: 100%; }

/* primary — ocean gradient (works on dark & light) */
.sl-cta--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sl-ocean-1) 0%, var(--sl-ocean-2) 55%, var(--sl-ocean-3) 100%);
  box-shadow: 0 12px 30px -10px rgba(2, 132, 199, 0.7);
}
.sl-cta--primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 38px -10px rgba(2, 132, 199, 0.8);
}
.sl-cta--primary:active { transform: translateY(0) scale(0.99); }

/* glass — translucent, for use over the hero photo */
.sl-cta--glass {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sl-cta--glass:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* outline — teal outline for light sections */
.sl-cta--outline {
  color: var(--sl-ocean-3);
  background: #fff;
  border-color: rgba(2, 132, 199, 0.5);
}
.sl-cta--outline:hover {
  background: rgba(2, 132, 199, 0.06);
  border-color: var(--sl-ocean-2);
  transform: translateY(-1px);
}

/* link — inline text button (footer) */
.sl-cta--link {
  display: inline;
  padding: 0;
  font-weight: inherit;
  border-radius: 0;
  background: none;
  color: inherit;
  text-align: left;
  transition: color 0.18s ease;
}
.sl-cta--link:hover { color: #fff; }
.sl-cta--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 4px;
}

/* shimmer accent dot for primary CTAs */
.sl-cta--primary .sl-cta-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bbf7d0;
  box-shadow: 0 0 0 0 rgba(187, 247, 208, 0.7);
  animation: sl-pulse 2s infinite;
}
@keyframes sl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(187, 247, 208, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(187, 247, 208, 0); }
  100% { box-shadow: 0 0 0 0 rgba(187, 247, 208, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-cta--primary .sl-cta-pulse { animation: none; }
  .sl-cta:hover { transform: none !important; }
}

/* body scroll-lock helper (added to <html> while modal is open) */
.sl-scroll-locked { overflow: hidden !important; }

/* =========================================================== floating support
   Premium support button. It is a [data-contact-trigger] <button>, so it reuses
   the existing delegated open-logic and the same modal — no new modal, no JS dup.
   Hidden until ~400px scroll, fades in, pulses ONCE, then never animates again.
   Sits below the modal (z 2147483000) so the modal always covers it.
   ========================================================================= */
.sl-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2147482000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--sl-ocean-1) 0%, var(--sl-ocean-2) 55%, var(--sl-ocean-3) 100%);
  box-shadow: 0 12px 30px -10px rgba(2, 132, 199, 0.7);
  cursor: pointer;
  /* hidden initially, no layout shift (fixed + opacity/visibility) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s var(--sl-ease),
    box-shadow 0.25s ease, padding 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sl-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sl-fab:hover {
  /* slight expand + deeper shadow, no jumping */
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 40px -10px rgba(2, 132, 199, 0.85);
}
.sl-fab:active { transform: translateY(0) scale(0.99); }
.sl-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(14, 165, 233, 0.7);
}
.sl-fab .sl-fab-icon { width: 20px; height: 20px; flex: none; }
.sl-fab .sl-fab-label { white-space: nowrap; }

/* exactly ONE pulse on first appearance, then removed by JS */
@keyframes sl-fab-pulse-once {
  0%   { box-shadow: 0 12px 30px -10px rgba(2,132,199,.7), 0 0 0 0 rgba(14,165,233,.45); }
  70%  { box-shadow: 0 12px 30px -10px rgba(2,132,199,.7), 0 0 0 16px rgba(14,165,233,0); }
  100% { box-shadow: 0 12px 30px -10px rgba(2,132,199,.7), 0 0 0 0 rgba(14,165,233,0); }
}
.sl-fab.sl-fab--pulse { animation: sl-fab-pulse-once 1.1s ease-out 1; }

/* Mobile: circular, icon only, respect the iPhone safe-area */
@media (max-width: 640px) {
  .sl-fab {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: calc(16px + env(safe-area-inset-right));
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .sl-fab .sl-fab-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-fab { transition: opacity 0.2s ease; transform: none !important; }
  .sl-fab.sl-fab--pulse { animation: none; }
  .sl-fab:hover { transform: none !important; }
}

/* While the booking modal is open the modal adds .sl-scroll-locked to <html>.
   Hide the FAB completely: visibility:hidden also removes it from the tab order
   and the accessibility tree and blocks pointer events. Restored automatically
   when the class is removed on close. (visibility is not in the FAB transition,
   so this takes effect instantly.) */
.sl-scroll-locked .sl-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}