/* Sticky Note — portable styles */
.sticky-note {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: #FFF9C4;
  color: #333;
  padding: 14px 16px 12px 16px;
  border: 2px dashed var(--highlight-color, #F4A261);
  border-radius: 8px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  font-size: 0.95rem;
  line-height: 1.45;
}

.sticky-note strong { color: var(--primary-color, #EA5E3D); }

.sticky-note__actions {
  margin-top: 8px;
  text-align: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.sticky-note__btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease;
  will-change: transform;
}

.sticky-note__btn:hover { transform: translateY(-1px); }

.sticky-note__btn--book {
  background-color: var(--primary-color, #EA5E3D);
  color: #fff;
}
.sticky-note__btn--book:hover { background-color: var(--highlight-color, #F4A261); }

.sticky-note__btn--contact {
  background-color: var(--accent-color, #2A9D8F);
  color: #fff;
}
.sticky-note__btn--contact:hover { background-color: var(--highlight-color, #F4A261); }

.sticky-note__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #444;
}
.sticky-note__close:hover { background: rgba(0,0,0,0.06); }

.sticky-note.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: rotate(-2deg) translateY(6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

@media (max-width: 480px) {
  .sticky-note {
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
  }
}

:root { --sticky-note-maxw: 270px; }
.sticky-note { max-width: min(var(--sticky-note-maxw), 92vw) !important; }

:root { --sticky-note-bottom: 24px; }

.sticky-note{bottom:var(--sticky-note-bottom)!important}

/* === Sticky Note: Glass pill CTA for Ghost Story === */
.sticky-note__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  min-height:34px;
  line-height:1;
  border-radius:9999px;
  background: rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#213b33;
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  margin: 2px 0 10px 0;
}
.sticky-note__ghost:hover{ background: rgba(255,255,255,.38); }
.sticky-note__ghost:focus-visible{ outline:2px solid #c8a97e; outline-offset:2px; border-color:#c8a97e; }
.sticky-note.is-hidden .sticky-note__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  min-height:34px;
  line-height:1;
  border-radius:9999px;
  background: rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#213b33;
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  margin: 2px 0 10px 0;
}


/* === Sticky Note CTA: contact-green tint + glow on hover === */
:root { --contact-green: #1b5445; } /* fallback if not already defined */

.sticky-note__ghost{
  background: rgba(27, 84, 69, 0.12);           /* subtle green tint */
  border-color: rgba(27, 84, 69, 0.28);
  color: var(--contact-green);
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}

.sticky-note__ghost:hover{
  background: rgba(27, 84, 69, 0.22);
  box-shadow: 0 0 0 2px rgba(27, 84, 69, 0.12) inset,
              0 0 22px rgba(27, 84, 69, 0.45),
              0 6px 14px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.sticky-note__ghost:active{
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(27, 84, 69, 0.18) inset,
              0 2px 10px rgba(0,0,0,.06);
}



/* === Center sticky-note ghost pill & tighten spacing === */
.sticky-note__ghost{
  display: flex;                /* block-level for centering */
  width: max-content;
  margin: 0 auto 6px auto;      /* center + small bottom gap */
}

.sticky-note__ghost + *{
  margin-top: 6px !important;   /* reduce space to the next element (pink text) */
}



/* Robust centering + tighter spacing for the ghost pill */
.sticky-note__ghost{
  align-self: center;        /* handles flex parent */
  margin: 0 auto 4px auto;   /* small bottom gap */
}
/* If a paragraph follows the pill, keep it close */
.sticky-note__ghost + p{ margin-top: 4px !important; }



/* === Ghost pill: ~60% height + strong centering === */
.sticky-note__ghost{
  padding: 3px 12px !important;   /* was 6px */
  min-height: 20px !important;    /* ~60% of ~34px */
  line-height: 1.1 !important;
  display: block !important;
  width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;  /* horizontal center */
  margin-bottom: 6px !important;  /* tight gap to text */
}
/* Safety: if container is flex, keep it centered */
.sticky-note { align-items: center; }