/* Booking popup (inc/booking.php): a native popover. Desktop: centred 520px modal. Mobile (<782px): bottom sheet. */

.lk-booking { position: fixed; inset: 0; width: 520px; max-width: calc(100% - 32px); height: fit-content; max-height: calc(100dvh - 32px); margin: auto;
  overflow-y: auto; padding: 32px 36px 24px; border-radius: var(--radius-panel); background: var(--surface); color: var(--text);
  border: 1px solid rgba(239,184,11,0.45); box-shadow: 0 0 0 6px rgba(239,184,11,0.06), 0 0 60px rgba(239,184,11,0.14), 0 24px 70px rgba(0,0,0,0.6);
  box-sizing: border-box; font-family: var(--font-body); }
.lk-booking:popover-open { display: flex; flex-direction: column; gap: 24px; animation: lk-booking-in .22s ease-out; }
.lk-booking::backdrop { background: rgba(5,5,6,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lk-booking:popover-open::backdrop { animation: lk-booking-fade .22s ease-out; }
html:has(.lk-booking:popover-open) { overflow: hidden; }
.lk-booking p, .lk-booking h2 { margin: 0; }

.lk-booking-grab { display: none; }
.lk-booking-head { display: flex; flex-direction: column; gap: 24px; }
.lk-booking-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lk-booking-text { display: flex; flex-direction: column; gap: 10px; }
.lk-booking-text h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.lk-booking-text p:last-child { font-size: 16px; line-height: 1.6; color: var(--muted); }
.lk-booking-info { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--line); }
.lk-booking-info p { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text); }
.lk-booking-info p.is-muted { color: var(--muted); }
.lk-booking-info .lk-icon { color: var(--gold); }
.lk-booking-foot { display: flex; flex-direction: column; gap: 4px; }
.lk-booking-actions { display: flex; gap: 12px; }
.lk-booking-actions .lk-btn-primary { flex-grow: 1; }
.lk-booking-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.lk-booking-ask a { display: inline-flex; align-items: center; min-height: 48px; color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lk-booking-ask a:hover { color: var(--gold-bright); }

@keyframes lk-booking-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes lk-booking-fade { from { opacity: 0; } }
@keyframes lk-booking-up { from { transform: translateY(100%); } }

@media (max-width: 781px) {
  .lk-booking { inset: auto 0 0; width: 100%; max-width: none; max-height: 100dvh; margin: 0;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-panel) var(--radius-panel) 0 0; border-bottom: 0;
    box-shadow: 0 0 60px rgba(239,184,11,0.12), 0 -18px 50px rgba(0,0,0,0.5); }
  .lk-booking:popover-open { gap: 20px; animation-name: lk-booking-up; }
  .lk-booking-grab { display: block; width: 40px; height: 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.24); align-self: center; }
  .lk-booking-head { gap: 16px; margin-top: -6px; }
  .lk-booking .lk-tile { width: 44px; height: 44px; }
  .lk-booking-text h2 { font-size: 24px; }
  .lk-booking-info p { font-size: 15px; }
  .lk-booking-foot { gap: 2px; }
  .lk-booking-actions { flex-direction: column; gap: 10px; }
  .lk-booking-actions .lk-btn { width: 100%; }
  .lk-booking-actions .lk-btn-primary { height: 56px; font-size: 17px; }
  .lk-booking-ask { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-booking:popover-open, .lk-booking:popover-open::backdrop { animation: none; }
}

/* A booking link inside running text, rendered as a popup button (inc/booking.php): it keeps the look of a link. */
:where(button[popovertarget="lk-booking"]:not([class])) { padding: 0; border: 0; background: none; font: inherit; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }