/* ==========================================================================
   TGK v2: book-now.php (4-step booking)
   Inline app owns: #bk-step-tracker .step-track-item(.active/.completed) #st-item-N #st-num-N
   #step-panel-N .step-panel(.hidden) #offers-cards-container .offer-card(.selected)
   #pkg-options-container .bk-pkg(.is-selected) #bk-details-form #f-* #card-element
   #booking-express-checkout-* #card-errors #pay-opt-* #radio-* #sum-* #opt-*
   #btn-submit-booking #btn-submit-icon #btn-submit-text. Visuals only.
   ========================================================================== */

.tgk-booknow .bk-main { background: radial-gradient(80% 40% at 100% 0%, rgba(0, 51, 102, 0.28), transparent 60%), var(--tgk-color-ink); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

/* Stepper */
.tgk-booknow .step-track-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); counter-reset: none; }
.tgk-booknow .step-track-item {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.75rem 1rem;
  background: transparent; border: 0; border-bottom: 2px solid var(--tgk-color-line-strong); border-radius: 0; cursor: pointer;
  transition: border-color var(--tgk-dur-base), background-color var(--tgk-dur-base);
}
.tgk-booknow .step-track-item:hover { background: rgba(255, 255, 255, 0.03); }
.tgk-booknow .step-track-item:focus-visible { outline: 2px solid var(--tgk-color-orange); outline-offset: 2px; }
.tgk-booknow .step-track-item.active { background: linear-gradient(180deg, transparent, rgba(255, 103, 0, 0.08)); border-bottom-color: var(--tgk-color-orange); }
.tgk-booknow .step-track-item.completed { background: transparent; border-bottom-color: rgba(61, 214, 140, 0.6); }
.tgk-booknow .step-num {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: transparent; border: 1px solid var(--tgk-color-line-strong);
  font: 500 0.8125rem/1 var(--tgk-font-mono); color: var(--tgk-color-text-muted);
}
.tgk-booknow .step-track-item.active .step-num { background: var(--tgk-color-orange); border-color: var(--tgk-color-orange); color: var(--tgk-color-text-ink); box-shadow: 0 0 0 6px rgba(255, 103, 0, 0.15); }
.tgk-booknow .step-track-item.completed .step-num { background: rgba(61, 214, 140, 0.12); border-color: rgba(61, 214, 140, 0.5); color: var(--tgk-color-success); }
.tgk-booknow .step-lbl { font: 500 0.6875rem/1.3 var(--tgk-font-mono) !important; letter-spacing: 0.14em; color: var(--tgk-color-text-subtle); }
.tgk-booknow .step-track-item.active .step-lbl { color: var(--tgk-color-text); }
.tgk-booknow .step-track-item.completed .step-lbl { color: var(--tgk-color-text-muted); }
@media (max-width: 767px) {
  .tgk-booknow .step-track-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tgk-booknow .step-track-item { flex-direction: column; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.25rem; text-align: center; }
  .tgk-booknow .step-lbl { font-size: 0.5625rem !important; letter-spacing: 0.08em; }
}

/* Alert */
.tgk-booknow #bk-global-alert { font-size: 0.875rem !important; color: #FF8A8E !important; border-radius: var(--tgk-radius-md) !important; background: rgba(255, 90, 95, 0.08) !important; border-color: rgba(255, 90, 95, 0.3) !important; }

/* Step headers */
.tgk-booknow .step-panel .section-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem) !important; }
.tgk-booknow .step-panel > .flex > button, .tgk-booknow .step-panel > div > button[onclick^="navToStep"] {
  min-height: 44px; padding: 0 1.1rem !important; border-radius: var(--tgk-radius-sm) !important; background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--tgk-color-line-strong); font: 600 0.75rem/1 var(--tgk-font-body) !important; letter-spacing: 0.14em !important;
}
.tgk-booknow .step-panel > .flex > button:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08) !important; }

/* Offer cards (rendered by renderOfferCards) */
.tgk-booknow .offer-card { background: var(--tgk-color-ink-2); border: 1px solid var(--tgk-color-line); border-radius: var(--tgk-radius-lg); }
.tgk-booknow .offer-card:hover { transform: translateY(-4px); border-color: rgba(255, 103, 0, 0.35); box-shadow: var(--tgk-shadow-lg); }
.tgk-booknow .offer-card.selected { border-color: var(--tgk-color-orange); box-shadow: 0 0 0 1px var(--tgk-color-orange), 0 20px 50px -20px rgba(255, 103, 0, 0.45); }
.tgk-booknow .offer-card-img { height: 200px; }
.tgk-booknow .offer-card .rounded-full { font: 500 0.625rem/1 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; padding: 0.4rem 0.7rem !important; background: rgba(11, 15, 19, 0.7) !important; }
.tgk-booknow .offer-card .text-\[\#FF6700\].text-xs { font: 500 0.6875rem/1.2 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; }
.tgk-booknow .offer-card h3, .tgk-booknow .bk-pkg h3 { font-family: var(--tgk-font-display) !important; font-weight: 700 !important; font-size: 1.6rem !important; line-height: 1.02; letter-spacing: 0.01em !important; }
.tgk-booknow .offer-card p, .tgk-booknow .bk-pkg p { font-size: 0.875rem !important; color: var(--tgk-color-text-muted) !important; }
.tgk-booknow .offer-card .font-extrabold, .tgk-booknow .bk-pkg .font-extrabold { font-family: var(--tgk-font-display) !important; font-size: 1.25rem !important; font-weight: 700 !important; }
.tgk-booknow .offer-card .text-\[10px\]:not(i), .tgk-booknow .bk-pkg .text-\[10px\]:not(i) { font: 500 0.625rem/1.3 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; }
.tgk-booknow .offer-card button, .tgk-booknow .bk-pkg button {
  min-height: 44px; padding: 0 1rem !important; border-radius: var(--tgk-radius-sm) !important;
  font: 600 0.6875rem/1 var(--tgk-font-body) !important; letter-spacing: 0.14em !important;
}
.tgk-booknow .offer-card button { background: var(--tgk-color-orange) !important; color: var(--tgk-color-text-ink) !important; }

/* Package cards (rendered by renderPackageOptions) */
.tgk-booknow .bk-pkg { background: var(--tgk-color-ink-2) !important; border: 1px solid var(--tgk-color-line) !important; border-radius: var(--tgk-radius-lg) !important; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
.tgk-booknow .bk-pkg:hover { border-color: rgba(255, 103, 0, 0.35) !important; }
.tgk-booknow .bk-pkg.is-selected { border-color: var(--tgk-color-orange) !important; background: linear-gradient(180deg, rgba(255, 103, 0, 0.07), var(--tgk-color-ink-2)) !important; box-shadow: 0 0 0 1px var(--tgk-color-orange) !important; }
.tgk-booknow .bk-pkg ul { font-size: 0.875rem !important; color: rgba(244, 241, 234, 0.8) !important; }
.tgk-booknow .bk-pkg button:not(.bg-\[\#FF6700\]):not(.bg-amber-600\/80) { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--tgk-color-line-strong); }
.tgk-booknow .bk-pkg button:hover, .tgk-booknow .bk-pkg button.bg-\[\#FF6700\] { background: var(--tgk-color-orange) !important; color: var(--tgk-color-text-ink) !important; }

/* Step 3 form */
.tgk-booknow #step-panel-3 > .bg-\[\#0b1220\], .tgk-booknow #step-panel-4 .bg-\[\#0b1220\] {
  background: linear-gradient(180deg, rgba(21, 33, 46, 0.72), rgba(15, 25, 35, 0.94)) !important;
  border: 1px solid var(--tgk-color-line) !important; border-radius: var(--tgk-radius-lg) !important; box-shadow: var(--tgk-shadow-lg);
}
.tgk-booknow #bk-details-form h3, .tgk-booknow #step-panel-4 h3 {
  font-family: var(--tgk-font-display) !important; font-weight: 700 !important; font-size: 1.4rem !important; letter-spacing: 0.02em !important;
  border-color: var(--tgk-color-line) !important;
}
.tgk-booknow #bk-details-form > .mb-8 { background: rgba(0, 26, 53, 0.55) !important; border-color: var(--tgk-color-orange-line) !important; border-radius: var(--tgk-radius-md) !important; }
.tgk-booknow #form-selected-pkg-name { font-family: var(--tgk-font-display) !important; font-size: 1.4rem !important; font-weight: 700 !important; text-transform: uppercase; }
.tgk-booknow #form-selected-pkg-rate { font-family: var(--tgk-font-display) !important; font-size: 1.25rem !important; font-weight: 700 !important; }
.tgk-booknow .auth-input { padding: 0.85rem 1rem 0.85rem 2.75rem !important; }
.tgk-booknow select.auth-input { padding-right: 2.75rem !important; }
.tgk-booknow .auth-input-icon { left: 16px; }
.tgk-booknow #min-participants-notice { font-size: 0.75rem !important; color: var(--tgk-color-text-subtle) !important; margin-top: 0.4rem !important; }
.tgk-booknow #bk-details-form button[type="submit"] { min-height: 56px; padding: 0 1.75rem !important; border-radius: var(--tgk-radius-sm) !important; font: 600 0.8125rem/1.2 var(--tgk-font-body) !important; letter-spacing: 0.14em !important; }

/* Step 4: summary + payment */
.tgk-booknow #step-panel-4 .text-\[10px\] { font: 500 0.625rem/1.3 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; }
.tgk-booknow #sum-pkg-name { font-family: var(--tgk-font-display) !important; font-size: 1.4rem !important; text-transform: uppercase; line-height: 1.05; }
.tgk-booknow #section-financial-table { font-size: 0.875rem !important; }
.tgk-booknow #sum-total { font-family: var(--tgk-font-display) !important; font-size: 1.75rem; line-height: 1; }
.tgk-booknow #section-deposit-note, .tgk-booknow #section-quote-summary-note { font-size: 0.8125rem !important; border-radius: var(--tgk-radius-md) !important; }
.tgk-booknow #pay-opt-deposit, .tgk-booknow #pay-opt-full { border-radius: var(--tgk-radius-md) !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--tgk-color-line-strong) !important; --tw-ring-shadow: 0 0 #0000; box-shadow: none !important; min-height: 64px; }
.tgk-booknow #pay-opt-deposit:has(input:checked), .tgk-booknow #pay-opt-full:has(input:checked) { border-color: var(--tgk-color-orange) !important; background: rgba(255, 103, 0, 0.07) !important; box-shadow: inset 0 0 0 1px var(--tgk-color-orange) !important; }
.tgk-booknow #pay-opt-deposit input, .tgk-booknow #pay-opt-full input { width: 20px; height: 20px; accent-color: var(--tgk-color-orange); }
.tgk-booknow #opt-deposit-amount, .tgk-booknow #opt-full-amount { font-family: var(--tgk-font-display) !important; font-size: 1.6rem !important; font-weight: 700 !important; line-height: 1.1; }
.tgk-booknow #card-element { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--tgk-color-line-strong) !important; border-radius: var(--tgk-radius-md) !important; }
.tgk-booknow #card-errors { font-size: 0.875rem !important; color: #FF8A8E !important; border-radius: var(--tgk-radius-sm) !important; }
.tgk-booknow #terms-confirmation-text { font-size: 0.8125rem !important; color: var(--tgk-color-text-subtle) !important; }
.tgk-booknow #terms-confirmation-text a { color: var(--tgk-color-orange) !important; }
.tgk-booknow #btn-submit-booking {
  min-height: 60px; border-radius: var(--tgk-radius-sm) !important; background: var(--tgk-color-orange) !important; color: var(--tgk-color-text-ink) !important;
  font: 600 0.875rem/1.2 var(--tgk-font-body) !important; letter-spacing: 0.12em !important; box-shadow: none !important;
}
.tgk-booknow #btn-submit-booking:hover:not(:disabled) { background: #ff7a1f !important; box-shadow: var(--tgk-shadow-glow) !important; }
.tgk-booknow #btn-submit-booking i { color: inherit; }

/* Mobile: offer card footer keeps "Select ->" on one line and at 44px */
.tgk-booknow .offer-card .border-t { gap: 0.75rem; }
.tgk-booknow .offer-card .border-t > button { white-space: nowrap; flex-shrink: 0; min-height: 44px; }
.tgk-booknow .bk-pkg .border-t { gap: 0.75rem; }
.tgk-booknow .bk-pkg .border-t > button { white-space: nowrap; flex-shrink: 0; min-height: 44px; }