/* ─────────────────────────────────────────────────────────────
   AAA Mobile Massage Costa Rica — online booking
   Header floater (the two BOOK ONLINE buttons), the booking form and the
   "Book Online" button. Loaded with booking.js on every page that has the
   site header. Colours are the site's own (index.html / aaa-service.css).
   ───────────────────────────────────────────────────────────── */

/* ── HEADER FLOATER — the two BOOK ONLINE buttons sit in the fixed header, between the gold
   spa strip and the menu. Once the page is scrolled the gold strip hides and the buttons
   shrink (.is-compact, set by booking.js). The body padding makes room for the extra row. ── */
body { padding-top: 62px; }
header#site-header { background: rgba(27,56,41,.97); }
.bookbar {
  display: flex; justify-content: center; gap: 10px;
  margin: 0 -32px; padding: 8px 16px; height: 62px; box-sizing: border-box;
  background: #10261b; border-bottom: 1px solid rgba(201,168,76,.28);
}
.bookbtn {
  flex: 1 1 0; max-width: 430px; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px; border-radius: 12px; line-height: 1.25;
  transition: transform .18s, filter .18s;
}
.bookbtn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.bookbtn-mobile { background: linear-gradient(135deg, var(--gold, #c9a84c), var(--gold-lt, #e8c97a)); color: var(--forest, #1b3829); }
.bookbtn-spa { background: var(--cream, #faf7f2); color: var(--forest, #1b3829); }
.bb-ico { font-size: 22px; line-height: 1; flex: none; }
.bb-txt { min-width: 0; }
.bb-txt b { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.bb-txt small { display: block; font-size: 12px; font-weight: 500; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-short { display: none; }
header.is-compact .promo-bar { display: none; }
header.is-compact .bookbar { height: 48px; padding: 6px 16px; }
header.is-compact .bb-txt small { display: none; }
@media (max-width: 860px) { .bookbar { margin: 0 -16px; } }
@media (max-width: 700px) {
  body { padding-top: 54px; }
  .bookbar, header.is-compact .bookbar { height: 54px; padding: 7px 10px; gap: 8px; }
  .bookbtn { justify-content: center; gap: 7px; padding: 0 8px; border-radius: 999px; }
  .bb-ico { font-size: 17px; }
  .bb-txt small, .bb-long { display: none; }
  .bb-short { display: inline; }
  .bb-txt b { font-size: 12.5px; letter-spacing: .6px; }
}

/* ── "BOOK ONLINE" BUTTON — the main button of every page; WhatsApp and phone come second ── */
.btn-online {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold, #c9a84c); color: var(--forest, #1b3829) !important;
  padding: 15px 26px; border-radius: 12px; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 24px rgba(201,168,76,.45); transition: all .3s cubic-bezier(.4,0,.2,1);
}
.btn-online:hover { background: var(--gold-lt, #e8c97a); transform: translateY(-2px); }
.hero-cta-row .btn-online { border-radius: 50px; padding: 14px 26px; }
.spa-btns .btn-online { flex: 1 1 100%; padding: 12px 22px; border-radius: 10px; font-size: 14.5px; box-shadow: 0 3px 14px rgba(201,168,76,.35); }
.bookbtn, .btn-online, .ob-send { text-decoration: none; }
.book-tip { margin: -28px 0 30px; font-size: 14px; color: rgba(255,255,255,.72); }
.book-row { margin-top: 24px; text-align: center; }

/* ── BOOKING FORM — opens from any Book Online button; the request goes to WhatsApp ── */
html.ob-open, html.ob-open body { overflow: hidden; }
.ob-sheet {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6,16,11,.72);
}
.ob-sheet[hidden] { display: none; }
.ob-box {
  position: relative; width: 100%; max-width: 540px; max-height: calc(100% - 28px); overflow-y: auto;
  overscroll-behavior: contain; border-radius: 20px 20px 0 0; padding: 22px 20px 0; outline: 0;
  background: #12281d; color: #f3ede1; color-scheme: dark;
  font-family: 'DM Sans', sans-serif; line-height: 1.5; text-align: left;
}
.ob-box * { box-sizing: border-box; }
.ob-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold, #c9a84c); margin: 0 0 4px; padding-right: 48px;
}
.ob-box h2 {
  font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(24px, 6vw, 30px); color: #fff; margin: 0 0 6px; padding-right: 48px;
}
.ob-intro { font-size: 14.5px; color: #cfd8cf; margin: 0 0 16px; }
.ob-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
  font: 400 24px/1 'DM Sans', sans-serif; cursor: pointer; padding: 0;
}
.ob-where, .ob-spas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ob-where button, .ob-spas button {
  font: 700 14.5px/1.25 'DM Sans', sans-serif; color: #fff; cursor: pointer; text-align: center;
  padding: 11px 8px; border-radius: 12px; background: transparent; border: 1.5px solid rgba(255,255,255,.3);
}
.ob-where button small, .ob-spas button small { display: block; font-size: 12px; font-weight: 500; color: #cfd8cf; }
.ob-where button[aria-pressed="true"], .ob-spas button[aria-pressed="true"], .ob-types button[aria-pressed="true"] {
  background: var(--gold, #c9a84c); border-color: var(--gold, #c9a84c); color: var(--forest, #1b3829);
}
.ob-where button[aria-pressed="true"] small, .ob-spas button[aria-pressed="true"] small { color: var(--forest, #1b3829); }
.ob-info {
  font-size: 14px; color: #f3ede1; background: rgba(255,255,255,.07); border-left: 3px solid var(--gold, #c9a84c);
  border-radius: 8px; padding: 10px 13px; margin: 0 0 16px;
}
.ob-info a { color: var(--gold-lt, #e8c97a); font-weight: 700; text-decoration: underline; white-space: nowrap; }
.ob-field, .ob-fields label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; color: #cfd8cf; }
.ob-field { margin-bottom: 14px; }
.ob-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ob-fields-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
.ob-box input, .ob-box select, .ob-box textarea {
  width: 100%; min-width: 0; font: 400 16px/1.4 'DM Sans', sans-serif; color: #fff;
  background: #0d1f16; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 10px 12px;
}
.ob-box textarea { display: block; resize: vertical; }
.ob-box ::placeholder { color: #8fa397; opacity: 1; }
.ob-box [aria-invalid="true"] { border-color: var(--gold, #c9a84c); box-shadow: 0 0 0 1px var(--gold, #c9a84c); }
.ob-box :focus-visible { outline: 2px solid var(--gold-lt, #e8c97a); outline-offset: 2px; }
.ob-label { font-size: 13.5px; font-weight: 700; color: #cfd8cf; margin: 0 0 6px; }
.ob-hint { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #cfd8cf; margin: 0; }
p.ob-hint { margin: -4px 0 8px; }
.ob-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ob-types button {
  flex: 1 1 auto; font: 700 14px/1.2 'DM Sans', sans-serif; color: #fff; cursor: pointer; white-space: nowrap;
  padding: 10px 13px; border-radius: 999px; background: transparent; border: 1.5px solid rgba(255,255,255,.3);
}
.ob-types.is-missing button, .ob-spas.is-missing button { border-color: var(--gold, #c9a84c); }
.ob-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); }
.ob-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 14.5px;
}
.ob-list b { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ob-list small { display: block; font-size: 12px; font-weight: 500; color: #cfd8cf; }
.ob-rm {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent;
  color: #fff; cursor: pointer; font: 400 18px/1 'DM Sans', sans-serif; padding: 0;
}
.ob-empty { color: #cfd8cf; font-size: 14.5px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.ob-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 18px; font-weight: 700; }
.ob-total b { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700; color: var(--gold-lt, #e8c97a); font-variant-numeric: tabular-nums; text-align: right; }
.ob-total b small { display: block; font: 500 12.5px/1.3 'DM Sans', sans-serif; color: #cfd8cf; }
.ob-gap { height: 18px; }
.ob-loc[hidden], .ob-loc-more[hidden], .ob-field[hidden], .ob-info[hidden], .ob-list[hidden], .ob-empty[hidden],
.ob-total[hidden], .ob-gap[hidden], .ob-spa-pick[hidden] { display: none; }
.ob-foot {
  position: sticky; bottom: 0; margin: 0 -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #12281d; border-top: 1px solid rgba(255,255,255,.2);
}
.ob-note { font-size: 13.5px; color: #cfd8cf; margin: 0 0 10px; }
.ob-note.warn { color: var(--gold-lt, #e8c97a); font-weight: 700; }
.ob-send {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 15px 18px; border-radius: 999px; background: #25D366; color: #fff !important;
  font-weight: 700; font-size: 15px; letter-spacing: .8px; text-transform: uppercase;
}
.ob-send:hover { background: #1eb85a; }
.ob-send svg { width: 27px; height: 27px; flex-shrink: 0; filter: drop-shadow(0 2px 5px rgba(0,0,0,.32)); }
@media (min-width: 640px) { .ob-sheet { align-items: center; } .ob-box { border-radius: 16px; max-height: calc(100% - 48px); } }
@media (prefers-reduced-motion: no-preference) { .ob-box { animation: ob-in .22s ease-out; } }
@keyframes ob-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }