/* Punta Cana Select - sitewide contact dock. See pcs-contact-dock.php.
   Everything is scoped under .pcs-cd. Bump PCS_CONTACT_DOCK_VERSION on change. */

.pcs-cd {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Above page content and the Blocksy header; below the cookie banner
     (2147483600) and the tawk.to window, which must be able to cover it. */
  z-index: 9990;
  font-family: var(--font-body, "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif);
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
}
.pcs-cd *,
.pcs-cd *::before,
.pcs-cd *::after { box-sizing: border-box; }

/* The live chat window is open: tawk.to's own minimise control owns the corner. */
.pcs-cd.is-chat-open { visibility: hidden; }

/* ---- trigger ----------------------------------------------------------- */
.pcs-cd .pcs-cd__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: var(--pcs-navy, #0A2E4D);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: var(--pcs-shadow-md, 0 6px 18px rgba(0, 0, 0, 0.12));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease-out, opacity 200ms ease, padding 160ms ease-out;
}
.pcs-cd .pcs-cd__trigger:hover { background: #0D3A60; color: #FFFFFF; }
.pcs-cd .pcs-cd__trigger:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--pcs-navy, #0A2E4D);
}
.pcs-cd__trigger-icon { display: inline-flex; }
.pcs-cd__trigger-icon--close { display: none; }
.pcs-cd.is-open .pcs-cd__trigger-icon--open { display: none; }
.pcs-cd.is-open .pcs-cd__trigger-icon--close { display: inline-flex; }
.pcs-cd__icon { display: block; width: 22px; height: 22px; flex: none; }

/* Unread reply from live chat: a dot plus text in the panel, never colour alone. */
.pcs-cd.has-unread .pcs-cd__trigger::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--pcs-amber, #C97824);
}

/* ---- panel ------------------------------------------------------------- */
.pcs-cd__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 268px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--pcs-border, #DDE5EA);
  border-radius: var(--radius-card, 14px);
  background: #FFFFFF;
  color: var(--pcs-text, #1E2933);
  box-shadow: 0 12px 32px rgba(8, 52, 76, 0.16);
}
.pcs-cd__panel[hidden] { display: none; }
.pcs-cd__panel:not([hidden]) { animation: pcs-cd-in 160ms ease-out both; }
@keyframes pcs-cd-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.pcs-cd .pcs-cd__title {
  margin: 0;
  padding: 6px 10px 6px;
  color: var(--pcs-muted, #61707C);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pcs-cd .pcs-cd__list { margin: 0; padding: 0; list-style: none; }
.pcs-cd .pcs-cd__li { margin: 0; padding: 0; list-style: none; }
.pcs-cd .pcs-cd__li + .pcs-cd__li { border-top: 1px solid #EEF2F4; }

.pcs-cd .pcs-cd__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-button, 9px);
  background: transparent;
  color: var(--pcs-navy, #0A2E4D);
  font: inherit;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease-out;
}
.pcs-cd .pcs-cd__item:hover { background: var(--pcs-offwhite, #F7F9F8); color: var(--pcs-navy, #0A2E4D); }
.pcs-cd .pcs-cd__item:focus-visible {
  outline: 2px solid var(--pcs-navy, #0A2E4D);
  outline-offset: -2px;
  background: var(--pcs-offwhite, #F7F9F8);
}
.pcs-cd__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--pcs-border, #DDE5EA);
  border-radius: 10px;
  color: var(--pcs-navy, #0A2E4D);
  background: #FFFFFF;
}
/* WhatsApp brand green is allowed on WhatsApp affordances only (tokens.css).
   Darkened from #25D366 so the glyph reads at 3:1 on white. */
.pcs-cd__badge--whatsapp { color: #128C4A; }
.pcs-cd__text { display: flex; flex-direction: column; min-width: 0; }
.pcs-cd__label { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--pcs-navy, #0A2E4D); }
.pcs-cd__detail { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--pcs-muted, #61707C); white-space: nowrap; }
.pcs-cd .pcs-cd__status {
  margin: 0;
  padding: 0 10px;
  color: var(--pcs-text, #1E2933);
  font-size: 13px;
  line-height: 1.4;
}
.pcs-cd .pcs-cd__status:not(:empty) { padding: 8px 10px 6px; border-top: 1px solid #EEF2F4; }
.pcs-cd__item[aria-busy="true"] { cursor: progress; }

/* ---- compact state ----------------------------------------------------- */
/* Once the visitor scrolls, the label folds away and the trigger becomes a
   square, so it does not sit on body copy, form fields or calendar cells.
   The accessible name is unchanged: the label is clipped, not removed.
   Phones are compact from the start - see the mobile block. */
.pcs-cd.is-compact:not(.is-open) .pcs-cd__trigger { padding: 0; gap: 0; }
.pcs-cd.is-compact:not(.is-open) .pcs-cd__trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cart page only (.pcs-cd--cart): compact from the start, not just after scrolling. Same
   square as the scrolled state everywhere else; phones are already square. */
.pcs-cd--cart:not(.is-open) .pcs-cd__trigger { padding: 0; gap: 0; }
.pcs-cd--cart:not(.is-open) .pcs-cd__trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
  .pcs-cd { right: 8px; bottom: 10px; }
  /* Phones: always the 44px square. A labelled pill is 114px wide and, at 360px, sat on the
     Resorts search field and on form inputs before the visitor had scrolled at all. The
     accessible name is still "Contact": the label is clipped, not removed. */
  .pcs-cd .pcs-cd__trigger { min-width: 44px; min-height: 44px; padding: 0; gap: 0; }
  .pcs-cd .pcs-cd__trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pcs-cd.is-scrolling:not(.is-open) .pcs-cd__trigger { opacity: 0.55; }
  .pcs-cd__panel { width: 264px; }
  /* Product pages: the fixed booking bar (about 84px tall, z-index 9999) ends 72px short of the
     right edge. The 44px trigger sits inside that slot and the panel opens clear of
     the bar, so neither ever covers "Select a Date". */
  .pcs-cd--booking-bar .pcs-cd__panel { bottom: calc(100% + 40px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 170px); }
  /* The booking drawer owns the screen while it is open. */
  body.pcs-drawer-scroll-lock .pcs-cd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pcs-cd .pcs-cd__trigger,
  .pcs-cd .pcs-cd__item { transition: none; }
  .pcs-cd__panel:not([hidden]) { animation: none; }
}

@media print { .pcs-cd { display: none !important; } }