/* =========================================================================
   Service Details page — extends landing.css (same design tokens/theme)
   ========================================================================= */

/* Body gets top padding because the navbar is fixed + always "scrolled" here */
.svc-hero { padding-top: 92px; }

/* ---- Not found state ---- */
.svc-missing {
  min-height: 70vh; display: flex; align-items: center; text-align: center;
  padding: 120px 0; background: linear-gradient(180deg, var(--ocean-50), #fff);
}
.svc-missing .container { max-width: 560px; }
.svc-missing i { font-size: 3rem; color: var(--ocean-300); margin-bottom: 18px; }
.svc-missing h1 { font-size: 2rem; color: var(--ocean-900); }
.svc-missing p { color: var(--muted); font-size: 1.05rem; margin-bottom: 28px; }

/* =========================================================================
   HERO
   ========================================================================= */
.svc-hero {
  position: relative; color: #fff; overflow: hidden;
  padding-bottom: 56px; min-height: 440px; display: flex; align-items: flex-end;
}
.svc-hero-bg { position: absolute; inset: 0; z-index: 0; }
.svc-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,36,63,0.55) 0%, rgba(6,36,63,0.30) 35%, rgba(6,36,63,0.88) 100%);
}
.svc-hero .container { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 8px; }

.svc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.86rem; margin-bottom: 22px; color: rgba(255,255,255,0.75); }
.svc-breadcrumb a { color: rgba(255,255,255,0.85); transition: color .2s; }
.svc-breadcrumb a:hover { color: #fff; }
.svc-breadcrumb i { font-size: 0.62rem; opacity: 0.6; }
.svc-breadcrumb span { color: #fff; font-weight: 600; }

.svc-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.svc-hero-tags .svc-cat {
  display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #fff;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(31,130,200,0.5); border: 1px solid rgba(255,255,255,0.25); margin: 0;
}
.svc-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 14px; letter-spacing: -0.025em; text-shadow: 0 4px 24px rgba(6,26,46,0.4); }
.svc-hero-sub { font-size: 1.12rem; color: rgba(255,255,255,0.9); max-width: 640px; margin: 0 0 22px; }
.svc-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.svc-hero-meta span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.92); }
.svc-hero-meta i { color: var(--ocean-300); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.svc-body-section { padding: 64px 0 96px; }
.svc-layout { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.svc-main { min-width: 0; }

.svc-block { margin-bottom: 48px; }
.svc-block:last-child { margin-bottom: 0; }
.svc-block h2 { font-size: 1.5rem; color: var(--ocean-900); margin-bottom: 20px; }
.svc-prose { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.75; }

/* ---- Gallery ---- */
.svc-gallery { margin-bottom: 48px; }
.svc-gallery-main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/10; }
.svc-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease); }
.svc-gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; }
.svc-thumb {
  border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0;
  background: none; aspect-ratio: 1; transition: border-color .25s, transform .25s var(--ease);
}
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.svc-thumb:hover { transform: translateY(-2px); }
.svc-thumb.active { border-color: var(--ocean-500); }

/* ---- Highlights ---- */
.svc-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.svc-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; color: var(--ink-soft); }
.svc-highlights li i { color: var(--ocean-500); margin-top: 3px; flex-shrink: 0; }

/* ---- Included / not included ---- */
.svc-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.svc-incl, .svc-excl { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.svc-incl li, .svc-excl li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.98rem; color: var(--ink-soft); }
.svc-incl li i { color: #1ba94c; margin-top: 4px; }
.svc-excl li { color: var(--muted); }
.svc-excl li i { color: #d14d4d; margin-top: 4px; }

/* ---- Packages ---- */
.svc-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.svc-pkg {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.svc-pkg:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc-pkg.is-popular { border-color: var(--ocean-400); box-shadow: var(--shadow-md); }
.svc-pkg-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-cta); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 5px 16px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: var(--shadow-glow);
}
.svc-pkg h3 { font-size: 1.2rem; color: var(--ocean-900); margin-bottom: 6px; }
.svc-pkg-price { font-size: 1.9rem; font-weight: 800; color: var(--ocean-700); letter-spacing: -0.02em; margin-bottom: 10px; }
.svc-pkg-price small { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.svc-pkg-desc { color: var(--muted); font-size: 0.92rem; margin: 0 0 16px; }
.svc-pkg-feats { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.svc-pkg-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.svc-pkg-feats li i { color: var(--ocean-500); margin-top: 3px; font-size: 0.85rem; }
.svc-pkg .btn { margin-top: auto; }

/* ---- Block subtitle ---- */
.svc-block-sub { color: var(--muted); font-size: 0.95rem; margin: -12px 0 20px; }

/* ---- Offer banner ---- */
.svc-offer {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
  padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.95rem; color: #0f7a3d;
  background: #e7f8ee; border: 1px solid #b6e6c8;
}
.svc-offer i { color: #1ba94c; }

/* ---- Schedule ---- */
.svc-schedule { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.svc-slot {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  background: var(--ocean-50); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.svc-slot.has-offer { border-color: #b6e6c8; background: #f1fbf5; }
.svc-slot > i { width: 38px; height: 38px; border-radius: 10px; background: var(--ocean-100); color: var(--ocean-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-slot-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ocean-900); font-size: 0.95rem; }
.svc-slot-time { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.svc-slot-extra { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 6px; }
.svc-slot-extra i, .svc-slot-promo i { margin-right: 4px; }
.svc-slot-promo { display: block; font-size: 0.84rem; color: #1ba94c; font-weight: 600; margin-top: 6px; }
.svc-slot-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; color: #0f7a3d; background: #d8f3e2; padding: 3px 9px; border-radius: var(--radius-pill); }

/* ---- Data tables (group pricing, activities) ---- */
.svc-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.svc-table { width: 100%; border-collapse: collapse; }
.svc-table th, .svc-table td { padding: 14px 18px; text-align: left; font-size: 0.95rem; }
.svc-table thead th { background: var(--ocean-50); color: var(--ocean-900); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; }
.svc-table tbody tr + tr { border-top: 1px solid var(--line); }
.svc-table tbody tr:hover { background: var(--ocean-50); }
.svc-table td i { color: var(--ocean-500); margin-right: 8px; }
.svc-table .ta-r { text-align: right; }
.svc-table .ta-c { text-align: center; }
.svc-table .fw { font-weight: 700; color: var(--ocean-800); }
.svc-table .muted { color: var(--muted); }
.svc-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--ocean-100); color: var(--ocean-700); font-size: 0.8rem; font-weight: 700; }

/* ---- Add-ons (upgrades / extras) ---- */
.svc-addons { display: grid; gap: 12px; }
.svc-addon {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.svc-addon-name { display: block; font-weight: 700; color: var(--ocean-900); font-size: 0.95rem; }
.svc-addon-desc { display: block; font-size: 0.84rem; color: var(--muted); margin-top: 2px; }
.svc-addon-price { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: var(--ocean-700); background: var(--ocean-100); padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.svc-addon-price.alt { color: #0e6aa8; background: #e3f1fb; }

/* ---- Two-col lists ---- */
.svc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.svc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.svc-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.98rem; color: var(--ink-soft); }
.svc-list li i { color: var(--ocean-500); margin-top: 4px; flex-shrink: 0; }

/* =========================================================================
   STICKY BOOKING SIDEBAR
   ========================================================================= */
.svc-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.svc-booking {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-md);
}
.svc-booking-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.svc-booking-price .lbl { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); width: 100%; }
.svc-booking-price .amt { font-size: 2.4rem; font-weight: 800; color: var(--ocean-700); letter-spacing: -0.02em; line-height: 1; }
.svc-booking-price .unit { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.svc-booking-meta { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 13px; }
.svc-booking-meta li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--ink-soft); }
.svc-booking-meta li i { width: 20px; text-align: center; color: var(--ocean-500); }
.svc-book-btn { margin-bottom: 10px; }
.svc-book-btn i { font-size: 1.15rem; }
.svc-booking-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.8rem; color: var(--muted); margin: 16px 0 0; }
.svc-booking-note i { color: #1ba94c; }

.svc-meet { background: var(--ocean-50); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.svc-meet h3 { font-size: 1.05rem; color: var(--ocean-900); margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.svc-meet h3 i { color: var(--ocean-500); }
.svc-meet p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 12px; }
.svc-meet-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ocean-600); font-size: 0.92rem; }
.svc-meet-link:hover { color: var(--ocean-500); }
.svc-meet-link i { font-size: 0.78rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .svc-layout { grid-template-columns: 1fr; gap: 0; }
  .svc-side { position: static; margin-bottom: 40px; }
  .svc-gallery-thumbs { grid-template-columns: repeat(5, 1fr); }

  /* Put the booking card (with its meeting-point block) right after the
     photo/gallery on mobile, instead of at the very bottom of the page,
     which is where .svc-side naturally lands once the two-column desktop
     layout collapses to one column and follows plain DOM order.
     .svc-main is unwrapped (display: contents) so its children — the
     gallery, then every description/itinerary/includes block — share one
     ordering context with .svc-side as siblings of .svc-layout, without
     touching the HTML the desktop 2-column grid depends on.
     .svc-layout's own `gap` is zeroed here because every piece already
     manages its own spacing via margin-bottom (.svc-gallery, .svc-block,
     and .svc-side above) — keeping both would double the whitespace at
     the gallery→card and card→description junctions. */
  .svc-main { display: contents; }
  .svc-gallery { order: 1; }
  .svc-side { order: 2; }
  .svc-main > *:not(.svc-gallery) { order: 3; }
}
@media (max-width: 640px) {
  .svc-hero { min-height: 380px; padding-bottom: 36px; }
  .svc-hero-meta { gap: 10px 18px; }
  .svc-highlights, .svc-incl-grid, .svc-two-col { grid-template-columns: 1fr; }
  .svc-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .svc-body-section { padding: 44px 0 72px; }
  .svc-block { margin-bottom: 38px; }
  .svc-block h2 { font-size: 1.3rem; }
}

/* =========================================================================
   BOOKING MODAL
   ========================================================================= */

/* This landing page does NOT load Bootstrap, but booking.js toggles the
   Bootstrap `.d-none` class to switch between the form step / confirmation
   step and to show/hide the inline error. Define it here so those toggles
   actually hide the element (without it, the "Request sent!" confirmation
   and the empty error bar render on top of the form). */
.d-none { display: none !important; }

.bk-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.bk-modal.is-open { display: flex; }
.bk-modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 36, 63, 0.55); backdrop-filter: blur(2px);
}
.bk-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 32px; margin: auto;
}
.bk-modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: var(--ocean-50); color: var(--ocean-900);
  font-size: 1rem; cursor: pointer; transition: background .2s;
}
.bk-modal-close:hover { background: var(--ocean-100); }

.bk-step h3 { font-size: 1.4rem; color: var(--ocean-900); margin: 0 0 6px; padding-right: 32px; }
.bk-sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 22px; }

.bk-field { margin-bottom: 18px; }
.bk-field label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--ocean-900); margin-bottom: 8px; }
.bk-optional { font-weight: 400; color: var(--muted); }
.bk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bk-select, .bk-field input[type="text"], .bk-field input[type="tel"], .bk-field input[type="email"], .bk-field textarea {
  width: 100%; border: 1px solid var(--ocean-200); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 0.95rem; font-family: inherit; color: var(--ocean-900);
  background: #fff; transition: border-color .2s;
}
.bk-select:focus, .bk-field input:focus, .bk-field textarea:focus {
  outline: none; border-color: var(--ocean-400);
}
.bk-field textarea { resize: vertical; }

/* Select2 override: match the .bk-select field look above */
.bk-field .select2-container { display: block; }
.bk-field .select2-container--default .select2-selection--single {
  height: auto; min-height: 46px; display: flex; align-items: center;
  border: 1px solid var(--ocean-200); border-radius: var(--radius-sm);
  padding: 0 40px 0 14px; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.bk-field .select2-container--default.select2-container--open .select2-selection--single,
.bk-field .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ocean-400); box-shadow: 0 0 0 3px rgba(67, 163, 230, 0.15);
}
.bk-field .select2-selection__rendered {
  padding: 0; font-size: 0.95rem; font-family: inherit; color: var(--ocean-900);
  line-height: 1.3; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-field .select2-selection__arrow {
  height: 100%; top: 0; right: 12px; width: 20px;
  display: flex; align-items: center; justify-content: center;
}
.bk-field .select2-selection__arrow b {
  border-color: var(--ocean-600) transparent transparent transparent;
  border-width: 6px 5px 0 5px; margin: 0;
}
.bk-field .select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--ocean-600) transparent;
  border-width: 0 5px 6px 5px;
}
/* The dropdown panel is appended to .bk-modal-dialog (our dropdownParent),
   not inside .bk-field, so it needs its own top-level rules here. */
.bk-modal-dialog .select2-dropdown {
  background: #fff; border-color: var(--ocean-200); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-md); font-size: 0.92rem;
}
.bk-modal-dialog .select2-results { background: #fff; }
.bk-modal-dialog .select2-results__options { background: #fff; padding: 6px; }
.bk-modal-dialog .select2-results__option {
  padding: 10px 14px; color: var(--ocean-900); background: #fff;
}
.bk-modal-dialog .select2-results__option--highlighted[aria-selected] {
  background: var(--ocean-500); color: #fff;
}
.bk-modal-dialog .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background: var(--ocean-50); color: var(--ocean-900);
}
.bk-modal-dialog .select2-search--dropdown { padding: 8px; background: #fff; }
.bk-modal-dialog .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ocean-200); border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: inherit; font-size: 0.9rem;
}
.bk-modal-dialog .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--ocean-400); }

.bk-checks { display: flex; flex-direction: column; gap: 8px; }
.bk-check {
  display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-soft);
  cursor: pointer; padding: 8px 12px; border: 1px solid var(--ocean-100); border-radius: var(--radius-sm);
}
.bk-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ocean-500); }
.bk-check em { font-style: normal; color: var(--ocean-600); font-weight: 600; margin-left: 4px; }

.bk-hint { font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; }
.bk-hint.is-picked { color: var(--ocean-600); font-weight: 600; }

/* ---- Steppers (guest count + per-upgrade quantity) ---- */
.bk-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--ocean-200); border-radius: var(--radius-pill); overflow: hidden;
}
.bk-stepper-btn {
  width: 38px; height: 38px; border: none; background: var(--ocean-50); color: var(--ocean-700);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background .15s;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.bk-stepper-btn:hover { background: var(--ocean-100); }
.bk-stepper-btn:active { background: var(--ocean-200); }
.bk-stepper input[type="number"] {
  width: 48px; height: 38px; border: none; border-left: 1px solid var(--ocean-200); border-right: 1px solid var(--ocean-200);
  text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--ocean-900);
  appearance: textfield; -moz-appearance: textfield; background: #fff;
}
.bk-stepper input[type="number"]::-webkit-outer-spin-button,
.bk-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bk-stepper-sm .bk-stepper-btn { width: 30px; height: 30px; font-size: 0.95rem; }
.bk-stepper-sm input[type="number"] { width: 38px; height: 30px; font-size: 0.88rem; }

.bk-upgrade-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bk-upgrade-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--ocean-100); border-radius: var(--radius-sm);
}
.bk-upgrade-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-upgrade-name { font-size: 0.92rem; color: var(--ink-soft); }
.bk-upgrade-name em { font-style: normal; color: var(--ocean-600); font-weight: 600; margin-left: 4px; }
.bk-upgrade-desc { font-size: 0.78rem; line-height: 1.4; color: var(--ink-mute, #8a94a6); }
.bk-upgrade-desc i { color: var(--ocean-300); margin-right: 3px; }
.bk-upgrade-row .bk-stepper-sm { flex: none; }
.bk-upgrade-summary { font-size: 0.85rem; color: var(--ocean-600); font-weight: 600; margin: 4px 0 0; }

/* ---- Water-sport activities picker (checkbox reservation + duration) ---- */
.bk-activity-list { display: flex; flex-direction: column; gap: 10px; }
.bk-activity-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 15px; border: 1.5px solid var(--ocean-100); border-radius: 12px; background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.bk-activity-row:hover:not(.is-booked) { border-color: var(--ocean-300); box-shadow: 0 3px 10px rgba(6, 36, 63, 0.06); }
/* Selected state is driven by the .is-checked class (toggled in booking.js) so it
   works in every browser, not just those supporting :has(). */
.bk-activity-row.is-checked {
  border-color: var(--ocean-500); background: var(--ocean-50);
  box-shadow: inset 4px 0 0 var(--ocean-500), 0 4px 14px rgba(31, 130, 200, 0.14);
}
.bk-activity-select {
  display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; margin: 0; flex: 1 1 auto;
}
/* Native checkbox hidden; the custom circular tick shows selection. */
.bk-activity-select input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}

/* Left column: tick + title on one line, capacity chip beneath. */
.bk-activity-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.bk-activity-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bk-activity-tick {
  position: relative;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--ocean-300); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.62rem; transition: background .15s, border-color .15s, box-shadow .15s;
}
/* Selection is shown with a CSS-drawn checkmark so it renders reliably
   regardless of whether Font Awesome loaded. The <i> glyph is not used. */
.bk-activity-tick i { display: none; }
.bk-activity-tick::after {
  content: ""; position: absolute;
  width: 5px; height: 9px; margin-top: -1px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4); transform-origin: center;
  opacity: 0; transition: opacity .12s, transform .12s;
}
.bk-activity-row.is-checked .bk-activity-tick {
  background: var(--ocean-500); border-color: var(--ocean-500);
  box-shadow: 0 0 0 4px rgba(31, 130, 200, 0.18);
}
.bk-activity-row.is-checked .bk-activity-tick::after { opacity: 1; transform: rotate(45deg) scale(1); }

.bk-activity-name { font-size: 0.95rem; font-weight: 600; color: var(--ocean-900); line-height: 1.2; min-width: 0; }
.bk-activity-row.is-checked .bk-activity-name { color: var(--ocean-600); }
.bk-activity-cap {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-left: 34px; /* align under the title (tick 22 + gap 12) */
  font-size: 0.72rem; font-weight: 600; color: var(--ocean-600);
  background: var(--ocean-50); border: 1px solid var(--ocean-100);
  padding: 2px 8px; border-radius: 999px;
}
.bk-activity-cap i { font-size: 0.68rem; }
.bk-activity-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.bk-select-sm {
  border: 1px solid var(--ocean-200); border-radius: var(--radius-sm); background: #fff;
  padding: 7px 10px; font-size: 0.85rem; font-family: inherit; color: var(--ocean-900);
}
.bk-select-sm:focus { outline: none; border-color: var(--ocean-400); }
.bk-select-sm:disabled { background: var(--ocean-50); color: var(--muted); cursor: not-allowed; }

/* Compact Select2 for the activity duration dropdown (overrides the taller,
   full-width .bk-field defaults so it fits neatly in the activity row). */
.bk-activity-controls .select2-container { flex: 0 0 auto; }
.bk-activity-controls .select2-container--default .select2-selection--single {
  min-height: 40px; padding: 0 30px 0 12px; border-radius: 8px;
}
.bk-activity-controls .select2-selection__rendered { font-size: 0.85rem; }
.bk-activity-controls .select2-selection__arrow { right: 8px; }
.bk-activity-row.is-booked .select2-container--default .select2-selection--single {
  opacity: 0.6;
}

/* Status badge (Booked = red, Too long = amber). */
.bk-activity-booked {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; background: #b3261e; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.bk-activity-booked.is-toolong { background: #b7791f; }

/* Reserved for an overlapping time: muted card, struck-through name. */
.bk-activity-row.is-booked { background: #fdf5f5; border-color: #f3d6d6; box-shadow: none; }
.bk-activity-row.is-booked .bk-activity-select { cursor: not-allowed; }
.bk-activity-row.is-booked .bk-activity-name { color: #b3261e; text-decoration: line-through; }
.bk-activity-row.is-booked .bk-activity-cap { opacity: 0.6; }
.bk-activity-row.is-booked .bk-activity-tick { border-color: #e3b7b7; }
/* "Too long" is an amber warning, not a hard red "taken". */
.bk-activity-row.is-booked.is-toolong { background: #fdf6ec; border-color: #f0dcb8; }
.bk-activity-row.is-booked.is-toolong .bk-activity-name { color: #8a5a12; text-decoration: none; }
.bk-activity-row.is-booked.is-toolong .bk-activity-tick { border-color: #e6cf9e; }

.bk-total {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ocean-50); border-radius: var(--radius-sm); padding: 14px 16px;
  margin: 22px 0 16px; font-size: 0.95rem; color: var(--ocean-900);
}
.bk-total strong { font-size: 1.3rem; color: var(--ocean-600); }

.bk-error {
  background: #fdecec; color: #b3261e; border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px;
}

/* ---- Calendar (year grid, single-date pick) ---- */
.bk-cal-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 10px; font-weight: 700; color: var(--ocean-900);
}
.bk-cal-nav-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ocean-200);
  background: #fff; color: var(--ocean-600); cursor: pointer; transition: background .2s;
}
.bk-cal-nav-btn:hover { background: var(--ocean-50); }
.bk-cal-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bk-cal-nav-btn:disabled:hover { background: #fff; }

/* Single-month calendar (one month shown at a time; nav buttons change month). */
.bk-calendar-month {
  padding: 8px; border: 1px solid var(--ocean-100); border-radius: var(--radius-sm);
}
.bk-loading { color: var(--muted); font-size: 0.9rem; padding: 20px; text-align: center; }
.bk-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; padding-bottom: 4px;
}
.bk-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; border-radius: 8px; background: var(--ocean-50); color: var(--ocean-900);
  cursor: pointer; transition: background .15s, color .15s;
}
.bk-day:hover:not(.is-disabled) { background: var(--ocean-200); }
.bk-day.is-selected { background: var(--ocean-500); color: #fff; font-weight: 700; }
.bk-day.is-disabled { background: transparent; color: var(--ocean-200); cursor: not-allowed; text-decoration: line-through; }
.bk-month-empty { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 14px 8px 4px; }

/* Note under the time-slot dropdown: loading / places-left / fully-booked. */
.bk-slot-note { font-size: 0.82rem; margin: 6px 0 0; color: var(--muted); }
.bk-slot-note.is-full { color: #b3261e; font-weight: 600; }
.bk-slot-note.is-loading { color: var(--ocean-600); font-weight: 600; }
.bk-slot-note.is-loading::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  vertical-align: -1px; border: 2px solid var(--ocean-200); border-top-color: var(--ocean-500);
  border-radius: 50%; animation: bk-spin 0.7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* Promotion banner shown when the chosen time slot has an offer. */
.bk-slot-promo {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: #eafaf0; border: 1px solid #bfe9cf; color: #1ba94c;
  font-size: 0.85rem; font-weight: 600;
}
.bk-slot-promo i { color: #1ba94c; flex: none; }

/* Dim the time-slot control while its availability is loading. */
.bk-field .select2-container--disabled .select2-selection--single { opacity: 0.6; cursor: wait; }

/* ---- Beautified time-slot dropdown (Select2 custom templates) -------------- */

/* Dropdown rows: two-line card (name + clock/time), rounded, with room to breathe.
   The card carries its own padding; the wrapping Select2 option keeps a thin
   frame so hover-tint shows as a rounded pill inside the panel. */
.bk-slot-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; margin: -6px -8px;
  background: #fff; /* opaque so the Select2 option's own bg never bleeds through */
  transition: background .15s;
}
.bk-slot-opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-slot-opt-name { font-weight: 600; color: var(--ocean-900); line-height: 1.2; }
.bk-slot-opt-time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--muted);
}
.bk-slot-opt-time i { font-size: 0.72rem; opacity: 0.8; }

/* Currently selected slot: solid ocean tint + left accent + dark, fully-opaque
   text so it always reads clearly (this state can coexist with --highlighted, so
   it's defined FIRST and the highlight rule below overrides it on hover). */
.bk-modal-dialog .select2-results__option[aria-selected="true"] .bk-slot-opt {
  background: var(--ocean-100); box-shadow: inset 4px 0 0 var(--ocean-500);
}
.bk-modal-dialog .select2-results__option[aria-selected="true"] .bk-slot-opt-name {
  color: var(--ocean-900);
}
.bk-modal-dialog .select2-results__option[aria-selected="true"] .bk-slot-opt-time,
.bk-modal-dialog .select2-results__option[aria-selected="true"] .bk-slot-opt-time i {
  color: var(--ocean-700); opacity: 1;
}

/* Hover / keyboard highlight — solid ocean fill, white text. Placed AFTER the
   selected rule so an item that is both selected and hovered turns solid+white
   (never the pale-on-pale mix that made the row unreadable). */
.bk-modal-dialog .select2-results__option--highlighted .bk-slot-opt {
  background: var(--ocean-500); box-shadow: none;
}
.bk-modal-dialog .select2-results__option--highlighted .bk-slot-opt-name,
.bk-modal-dialog .select2-results__option--highlighted .bk-slot-opt-time,
.bk-modal-dialog .select2-results__option--highlighted .bk-slot-opt-time i {
  color: #fff; opacity: 1;
}

/* Fully-booked row: muted, struck-through name, red pill, not selectable. */
.bk-slot-opt.is-full { background: #fdf5f5; }
.bk-slot-opt.is-full .bk-slot-opt-name { color: #b3261e; text-decoration: line-through; }
.bk-slot-opt.is-full .bk-slot-opt-time { color: #c88; }
.bk-modal-dialog .select2-results__option[aria-disabled="true"] { cursor: not-allowed; }
/* A disabled (full) row must never take the hover highlight. */
.bk-modal-dialog .select2-results__option--highlighted[aria-disabled="true"] .bk-slot-opt {
  background: #fdf5f5; box-shadow: none;
}
.bk-modal-dialog .select2-results__option--highlighted[aria-disabled="true"] .bk-slot-opt-name {
  color: #b3261e;
}
.bk-modal-dialog .select2-results__option--highlighted[aria-disabled="true"] .bk-slot-opt-time,
.bk-modal-dialog .select2-results__option--highlighted[aria-disabled="true"] .bk-slot-opt-time i {
  color: #c88;
}
.bk-opt-badge {
  flex: none; align-self: center; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: #b3261e;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* Guest-count options: normal rows, plus an "over capacity" state (struck-through
   name + red "Only N left" badge) so the customer sees why a size can't be picked. */
.bk-guest-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.bk-guest-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-guest-opt.is-over .bk-guest-opt-name { color: #b3261e; text-decoration: line-through; opacity: 0.8; }
.bk-modal-dialog .select2-results__option[aria-disabled="true"] .bk-guest-opt.is-over { opacity: 0.95; }

/* ---- Phone field: country dialing-code picker + number ---------------------- */
.bk-phone-group { display: flex; align-items: stretch; gap: 8px; }
/* The Select2 country control sits at a fixed compact width; the number grows. */
.bk-phone-group .select2-container { display: block; flex: 0 0 128px; width: 128px !important; }
.bk-phone-group #bkPhoneNational { flex: 1 1 auto; min-width: 0; }
/* Trim the arrow gutter (the shared 40px is too wide here) so the dial code
   isn't clipped, and pull the caret in tight to the edge. */
.bk-phone-group .select2-container--default .select2-selection--single { padding: 0 26px 0 12px; }
.bk-phone-group .select2-selection__arrow { right: 8px; }

/* Closed country box: ISO code badge + dial code — plain text, consistent
   across platforms, never clipped. */
.bk-cc-sel { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bk-cc-sel .bk-cc-iso {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
  color: var(--ocean-700); background: var(--ocean-50);
  padding: 2px 5px; border-radius: 4px; flex: none;
}
.bk-cc-sel .bk-cc-dial { font-weight: 600; color: var(--ocean-900); white-space: nowrap; }

/* Dropdown rows: flag · name · dial. */
.bk-cc-opt { display: flex; align-items: center; gap: 10px; width: 100%; }
.bk-cc-opt .bk-cc-flag { font-size: 1.15rem; line-height: 1; flex: none; }
.bk-cc-opt .bk-cc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cc-opt .bk-cc-dial { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-modal-dialog .select2-results__option--highlighted .bk-cc-opt .bk-cc-dial { color: #fff; }
/* The country dropdown panel is wider than its 112px control so names fit. */
.bk-cc-dropdown { min-width: 260px; }

/* Closed control: compact "clock · name · time" line. */
.bk-slot-sel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.bk-slot-sel > i { color: var(--ocean-500); font-size: 0.85rem; flex: none; }
.bk-slot-sel-name { font-weight: 600; color: var(--ocean-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-slot-sel-time {
  margin-left: auto; flex: none; font-size: 0.8rem; color: var(--muted);
  padding-left: 10px;
}

/* Honeypot: pull it visually off-screen but keep it "rendered" so bots fill it. */
.bk-hp {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

/* Confirmation-screen summary (key/value rows). */
.bk-done-summary {
  text-align: left; margin: 4px 0 18px; padding: 14px 16px;
  background: var(--ocean-50); border-radius: var(--radius-sm);
}
.bk-done-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.9rem; }
.bk-done-row + .bk-done-row { border-top: 1px solid var(--ocean-100); }
.bk-done-row dt { color: var(--muted); margin: 0; }
.bk-done-row dd { margin: 0; font-weight: 600; color: var(--ocean-900); text-align: right; }
.bk-done-wa { background: #25d366 !important; border-color: #25d366 !important; }

.bk-done-icon { text-align: center; font-size: 3rem; color: #2e9e5b; margin-bottom: 14px; }
#bkStepDone { text-align: center; }
#bkStepDone .btn { margin-top: 10px; }

@media (max-width: 640px) {
  .bk-modal { padding: 0; }
  .bk-modal-dialog { border-radius: 0; min-height: 100vh; padding: 24px 18px; }
  .bk-field-row { grid-template-columns: 1fr; }
  .bk-day { font-size: 0.85rem; border-radius: 6px; }
}