/* ===================================================================
   Ocean Sun Theme — Unified Booking Widget Card
   ===================================================================
   Single shared component for all booking cards on public pages
   (accommodation detail, course detail, future dive pages).

   Variant differences controlled via --os-booking-cta custom property:
     Default (accommodation): Terracotta  --os-cta
     Course variant:          Teal        --os-dive

   Plugin tokens (--osb-*) are set on the card so inner plugin elements
   (wizard, dive-panel) inherit them automatically.
   =================================================================== */

/* ── Card Container ── */
.os-booking-card {
  --os-booking-cta: var(--os-cta, #B8856C);
  --os-booking-cta-hover: var(--os-cta-hover, color-mix(in srgb, #B8856C 85%, black));
  --os-booking-cta-ring: rgba(184, 133, 108, 0.15);

  background: var(--os-bg-cream, #F7F4EF);
  border: none;
  border-radius: var(--os-radius-lg, 12px);
  padding: var(--os-space-8, 32px);
  box-shadow: none;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;

  /* ── Plugin token bridge ──
     Map theme tokens → plugin tokens so inner plugin elements
     (osb-wizard, osac-dive-panel) read them automatically. */
  --osb-interactive: var(--os-booking-cta);
  --osb-interactive-ring: var(--os-booking-cta-ring);
  --osb-interactive-tint: color-mix(in srgb, var(--os-booking-cta) 10%, white);
  --osb-interactive-dark: var(--os-booking-cta-hover);
  --osb-wizard-bg: transparent;
  --osb-wizard-border: none;
  --osb-wizard-radius: 0;
  --osb-wizard-shadow: none;
  --osb-surface-bg: var(--os-bg-warm, #F2ECE3);
  --osb-btn-cta-bg: var(--os-booking-cta);
  --osb-btn-cta-bg-hover: var(--os-booking-cta-hover);
  --osb-btn-cta-text: #ffffff;
  --osb-btn-cta-shadow: var(--os-booking-cta-ring);
  --osb-btn-check-bg: var(--os-booking-cta);
  --osb-btn-check-bg-hover: var(--os-booking-cta-hover);
  --osb-btn-check-shadow: var(--os-booking-cta-ring);
}

/* ── Course Variant — same terracotta CTA as accommodation ── */
/* Teal variant removed per brand decision: all booking CTAs use terracotta */

/* ── Tag Badge (sand pill) ── */
.os-booking-card__tag {
  display: inline-block;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px;
  font-weight: var(--os-font-body-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--os-secondary-dark, #8B7355);
  background: color-mix(in srgb, var(--os-secondary, #C9A96E) 15%, white);
  padding: 3px 10px;
  border-radius: var(--os-radius-full, 9999px);
  margin-bottom: var(--os-space-3, 12px);
  align-self: flex-start;
}

/* ── Heading ── */
.os-booking-card__heading {
  font-family: var(--os-font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: var(--os-font-display-semibold, 600);
  color: var(--os-text, #1C2E3F);
  margin: 0 0 2px;
  line-height: var(--os-leading-tight, 1.2);
}

/* ── Price Display ── */
.os-booking-card__price {
  margin: var(--os-space-1, 4px) 0 0;
  line-height: 1.1;
}

.os-booking-card__price .os-price__symbol {
  font-family: var(--os-font-display, 'Fraunces', Georgia, serif);
  font-size: 18px;
  font-weight: var(--os-font-display-semibold, 600);
  color: var(--os-primary, #1C2E3F);
  vertical-align: baseline;
  margin-right: 2px;
}

.os-booking-card__price .os-price__amount {
  font-family: var(--os-font-display, 'Fraunces', Georgia, serif);
  font-size: 42px;
  font-weight: var(--os-font-display-bold, 700);
  color: var(--os-primary, #1C2E3F);
  letter-spacing: -0.02em;
}

.os-booking-card__price-suffix {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  color: var(--os-text-muted, #7C8694);
  font-weight: var(--os-font-body-normal, 400);
  margin-left: var(--os-space-1, 4px);
}

/* ── Currency Switcher ── */
.os-booking-card__currency {
  display: flex;
  align-items: center;
  gap: var(--os-space-2, 8px);
  margin-top: 6px;
  margin-bottom: 0;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  color: var(--os-text-muted, #7C8694);
}

.os-booking-card__currency span {
  font-weight: var(--os-font-body-medium, 500);
}

.os-booking-card__currency select {
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--os-border, #E2DDD3);
  border-radius: var(--os-radius-sm, 4px);
  background: var(--os-bg-white, #FFFFFF);
  color: var(--os-text, #1C2E3F);
}

/* ── Divider ── */
.os-booking-card__divider {
  border: none;
  border-top: 1px solid var(--os-border-light, rgba(226, 221, 211, 0.4));
  margin: 20px 0 16px;
}

/* ── Body (plugin shortcode container) ──
   Reset both .osb-wizard (accommodation) and .osac-dive-panel (course/dive)
   so they don't create box-in-box nesting. */
.os-booking-card__body .osb-wizard {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.os-booking-card__body .osac-dive-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.os-booking-card__body .osac-dive-panel__divider {
  display: none;
}

/* ── Shared Inner Styles ── */

/* Wizard breadcrumb bar */
.os-booking-card__body .osb-wizard__breadcrumbs {
  background: var(--os-bg-warm, #F2ECE3);
  border-radius: var(--os-radius-md, 8px);
  margin-bottom: 20px;
  border: none;
  padding: 12px 16px;
  box-shadow: none;
}

.os-booking-card__body .osb-wizard__body {
  background: transparent;
  padding: 0;
}

/* Wizard nav: transparent, collapses when back button is hidden */
.os-booking-card__body .osb-wizard__nav {
  background: transparent;
  border-top: none;
  padding: 0;
}

/* Hide the nav entirely while the back button is in its hidden state */
.os-booking-card__body .osb-wizard__nav:has(.osb-wizard__back-btn--hidden) {
  display: none;
}

/* Hide inactive wizard steps — they render empty boxes otherwise */
.os-booking-card__body .osb-wizard__step:not(.osb-wizard__step--active) {
  display: none;
}

/* Labels: consistent muted uppercase */
.os-booking-card__body label,
.os-booking-card__body .osb-label,
.os-booking-card__body .osac-dive-label {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-muted, #7C8694);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Headings: display font */
.os-booking-card__body .osb-wizard__step-title,
.os-booking-card__body .osb-form-group__title,
.os-booking-card__body h3 {
  font-family: var(--os-font-display, 'Fraunces', Georgia, serif);
  font-weight: var(--os-font-display-semibold, 600);
  color: var(--os-text, #1C2E3F);
}

/* Breadcrumb label styling */
.os-booking-card__body .osb-wizard__breadcrumb-label {
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-muted, #7C8694);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.os-booking-card__body .osb-wizard__breadcrumb--active .osb-wizard__breadcrumb-label {
  color: var(--os-text, #1C2E3F);
}

.os-booking-card__body .osb-wizard__breadcrumb--complete .osb-wizard__breadcrumb-label {
  color: var(--os-booking-cta);
}

.os-booking-card__body .osb-wizard__dot {
  border-color: var(--os-border, #E2DDD3);
}

.os-booking-card__body .osb-wizard__breadcrumb--complete .osb-wizard__dot {
  background: var(--os-booking-cta);
  border-color: var(--os-booking-cta);
}

.os-booking-card__body .osb-wizard__breadcrumb--active .osb-wizard__dot {
  border-color: var(--os-booking-cta);
  background: var(--os-bg-white, #fff);
}

.os-booking-card__body .osb-wizard__breadcrumb--complete + .osb-wizard__breadcrumb::before {
  background: var(--os-booking-cta);
}

/* Unified input heights */
.os-booking-card__body .osac-dive-date-input,
.os-booking-card__body .flatpickr-input + input.form-control,
.os-booking-card__body input[type="date"],
.os-booking-card__body select {
  height: 44px;
  border: 1px solid var(--os-border, #E2DDD3);
  border-radius: var(--os-radius-md, 8px);
}

/* Stepper: slim container with rounded corners */
.os-booking-card__body .osb-stepper-input-wrapper {
  height: 44px;
  border: 1px solid var(--os-border, #E2DDD3);
  border-radius: var(--os-radius-md, 8px);
  overflow: hidden;
}

/* Stepper buttons: slim, elegant, theme colors */
.os-booking-card__body .osb-stepper-input-wrapper .osb-minus-button,
.os-booking-card__body .osb-stepper-input-wrapper .osb-plus-button,
.os-booking-card__body .osb-stepper-input-wrapper .osb-stepper-button {
  border: none;
  background-color: var(--os-bg-warm, #F2ECE3);
  color: var(--os-text-muted, #7C8694);
  font-size: 16px;
  font-weight: 400;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover — subtle terracotta */
.os-booking-card__body .osb-form-group .osb-stepper-input-wrapper .osb-minus-button:hover,
.os-booking-card__body .osb-form-group .osb-stepper-input-wrapper .osb-plus-button:hover,
.os-booking-card__body .osb-form-group .osb-stepper-input-wrapper .osb-stepper-button:hover {
  background-color: var(--os-cta, #B8856C);
  color: #fff;
}

.os-booking-card__body .osb-stepper-input-wrapper input {
  border: none;
  border-left: 1px solid var(--os-border-light);
  border-right: 1px solid var(--os-border-light);
}

/* Form-group hover removed at source (forms.css) — no overrides needed */

/* Consistent vertical gaps inside embedded dive panel */
.os-booking-card__body .osac-dive-panel__inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.os-booking-card__body .osac-dive-row {
  margin-bottom: 0;
}

.os-booking-card__body .osac-dive-avail-prompt,
.os-booking-card__body .osac-dive-status-box {
  margin-top: var(--os-space-2, 8px);
  margin-bottom: var(--os-space-2, 8px);
}

/* Continue button: sand when disabled, CTA color when active */
.os-booking-card__body .osac-dive-continue {
  margin-top: var(--os-space-4, 16px);
  height: 52px;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--os-radius-md, 8px);
}

.os-booking-card__body .osac-dive-continue:disabled {
  background: var(--os-border, #E2DDD3);
  color: var(--os-text-muted, #7C8694);
}

.os-booking-card__body .osac-dive-continue:not(:disabled) {
  background: var(--os-booking-cta);
}

.os-booking-card__body .osac-dive-continue:not(:disabled):hover {
  background: var(--os-booking-cta-hover);
}

/* ── Trust Line ── */
.os-booking-card__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  color: var(--os-text-muted, #7C8694);
  text-align: center;
  margin-top: var(--os-space-3, 12px);
  margin-bottom: 0;
}

.os-booking-card__trust svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Trust/deposit lines rendered by plugin inside the card body */
.os-booking-card__body .osb-trust-line,
.os-booking-card__body .osb-deposit-note {
  font-size: 12px;
  color: var(--os-text-muted, #7C8694);
  text-align: center;
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
}