/*
 * Borderless Expeditions — Booking Widget
 * booking-widget.css  v1.0.0
 * All styles scoped to .bw- prefix to avoid conflicts.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --be-cream:       #F5EBE0;
  --be-navy:        #0D1B2B;
  --be-orange:      #F26321;
  --be-orange-dark: #D4541A;
  --be-white:       #FFFFFF;
  --be-muted:       #888888;
  --be-border:      #E0D8CF;
  --be-error:       #C0392B;
  --be-success:     #437A22;
  --be-font-h:      'Barlow Condensed', 'Arial Narrow', sans-serif;
  --be-font-b:      'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Overlay ───────────────────────────────────────────────────── */
.bw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 43, 0.75);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.bw-overlay.bw-visible { display: flex; }
.bw-overlay.bw-open    { opacity: 1; }

/* ── Modal (Desktop) ───────────────────────────────────────────── */
.bw-modal {
  background: var(--be-white);
  border-radius: 3px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.96);
  transition: transform 280ms ease-out;
  z-index: 9999;
  scrollbar-width: thin;
  scrollbar-color: var(--be-border) transparent;
}
.bw-modal::-webkit-scrollbar       { width: 4px; }
.bw-modal::-webkit-scrollbar-track { background: transparent; }
.bw-modal::-webkit-scrollbar-thumb { background: var(--be-border); border-radius: 2px; }

.bw-overlay.bw-open .bw-modal { transform: scale(1); }

/* ── Drag handle (mobile only) ─────────────────────────────────── */
.bw-drag-handle {
  display: none;
  width: 32px;
  height: 4px;
  background: #D4D1CA;
  border-radius: 2px;
  margin: 12px auto 4px;
  flex-shrink: 0;
}

/* ── Close button ──────────────────────────────────────────────── */
.bw-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--be-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: color 200ms, background 200ms;
  z-index: 1;
}
.bw-close:hover { color: var(--be-navy); background: var(--be-cream); }

/* ── Content area ──────────────────────────────────────────────── */
.bw-content { padding: 32px 36px; }

/* ── Brand / header ────────────────────────────────────────────── */
.bw-brand {
  font-family: var(--be-font-h);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-orange);
  margin: 0 0 6px;
}
.bw-title {
  font-family: var(--be-font-h);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--be-navy);
  line-height: 1.1;
  margin: 0 0 4px;
  padding-right: 36px;
}
.bw-subtitle {
  font-family: var(--be-font-b);
  font-size: 0.85rem;
  color: var(--be-muted);
  margin: 0 0 24px;
}

/* ── Progress dots ─────────────────────────────────────────────── */
.bw-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.bw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--be-border);
  transition: background 200ms;
}
.bw-dot.bw-dot-active { background: var(--be-orange); }

/* ── Section label ─────────────────────────────────────────────── */
.bw-lbl {
  font-family: var(--be-font-b);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--be-muted);
  margin: 0 0 10px;
}

/* ── Departure cards ───────────────────────────────────────────── */
.bw-deps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }

.bw-dep-card {
  border: 1px solid var(--be-border);
  border-left: 3px solid transparent;
  border-radius: 3px;
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 200ms, background 200ms;
  user-select: none;
}
.bw-dep-card:hover:not(.bw-dep-full)    { border-color: var(--be-orange); }
.bw-dep-card.bw-dep-sel                 { border-left-color: var(--be-orange); background: var(--be-cream); border-top-color: var(--be-border); border-right-color: var(--be-border); border-bottom-color: var(--be-border); }
.bw-dep-card.bw-dep-full                { opacity: 0.5; cursor: not-allowed; }

.bw-dep-date {
  font-family: var(--be-font-b);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--be-navy);
}
.bw-dep-right  { display: flex; align-items: center; gap: 8px; }
.bw-dep-spots  { font-family: var(--be-font-b); font-size: 0.78rem; color: var(--be-muted); }
.bw-spots-low  { color: var(--be-orange); font-weight: 700; }
.bw-dep-badge  { font-family: var(--be-font-b); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #e8e4df; color: #999; padding: 3px 8px; border-radius: 2px; }

/* ── Stepper ───────────────────────────────────────────────────── */
.bw-stepper-wrap { margin-bottom: 24px; }

.bw-stepper { display: flex; align-items: center; width: fit-content; }

.bw-step-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--be-border);
  background: var(--be-white);
  color: var(--be-navy);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms;
  border-radius: 0;
  flex-shrink: 0;
}
.bw-step-btn:first-child { border-radius: 3px 0 0 3px; }
.bw-step-btn:last-child  { border-radius: 0 3px 3px 0; }
.bw-step-btn:hover:not(:disabled) { background: var(--be-cream); }
.bw-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.bw-step-val {
  width: 52px;
  height: 40px;
  border-top: 1px solid var(--be-border);
  border-bottom: 1px solid var(--be-border);
  border-left: none;
  border-right: none;
  background: var(--be-white);
  font-family: var(--be-font-b);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--be-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bw-step-hint { font-size: 0.75rem; color: var(--be-muted); margin-top: 6px; }

/* ── Price summary ─────────────────────────────────────────────── */
.bw-price-box {
  background: var(--be-cream);
  border-radius: 3px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.bw-price-hd   { font-family: var(--be-font-b); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--be-muted); margin: 0 0 10px; }
.bw-price-row  { display: flex; justify-content: space-between; font-family: var(--be-font-b); font-size: 0.88rem; color: var(--be-navy); margin-bottom: 6px; }
.bw-price-row:last-child { margin-bottom: 0; }
.bw-price-dep  { font-weight: 700; color: var(--be-orange); }
.bw-price-bal  { color: var(--be-muted); font-size: 0.82rem; }
.bw-price-hr   { border: none; border-top: 1px solid var(--be-border); margin: 10px 0; }

/* ── Buttons ───────────────────────────────────────────────────── */
.bw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 3px;
  font-family: var(--be-font-h);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 200ms, opacity 200ms;
  text-align: center;
  box-sizing: border-box;
}
.bw-btn-primary            { background: var(--be-orange); color: var(--be-navy); }
.bw-btn-primary:hover:not(:disabled) { background: var(--be-orange-dark); }
.bw-btn-primary:disabled   { opacity: 0.45; cursor: not-allowed; }

.bw-btn-pay                { background: var(--be-orange); color: #fff; height: 56px; font-size: 1.05rem; }
.bw-btn-pay:hover:not(:disabled) { background: var(--be-orange-dark); }
.bw-btn-pay:disabled       { opacity: 0.6; cursor: not-allowed; }

.bw-btn-navy               { background: var(--be-navy); color: #fff; }
.bw-btn-navy:hover:not(:disabled) { background: #1a3252; }

.bw-btn-ghost {
  background: transparent;
  border: none;
  color: var(--be-muted);
  font-family: var(--be-font-b);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  letter-spacing: 0.05em;
  transition: color 200ms;
  width: auto;
}
.bw-btn-ghost:hover { color: var(--be-navy); }

.bw-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.bw-nav .bw-btn { flex: 1; }

/* ── Form fields ───────────────────────────────────────────────── */
.bw-field { margin-bottom: 16px; }
.bw-field-lbl {
  display: block;
  font-family: var(--be-font-b);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--be-navy);
  margin-bottom: 5px;
}
.bw-field-hint { font-family: var(--be-font-b); font-size: 0.74rem; color: var(--be-muted); margin-top: 4px; }

.bw-input,
.bw-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--be-border);
  border-radius: 3px;
  font-family: var(--be-font-b);
  font-size: 16px;
  color: var(--be-navy);
  background: var(--be-white);
  transition: border-color 200ms;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.bw-input:focus,
.bw-textarea:focus    { outline: none; border-color: var(--be-orange); }
.bw-input.bw-err-inp,
.bw-textarea.bw-err-inp { border-color: var(--be-error); }
.bw-textarea { resize: vertical; min-height: 76px; }

.bw-err {
  font-family: var(--be-font-b);
  font-size: 0.76rem;
  color: var(--be-error);
  margin-top: 4px;
  display: none;
}
.bw-err.bw-show { display: block; }

/* ── Checkbox ──────────────────────────────────────────────────── */
/* ── Checkbox — custom styling for cross-browser checkmark ─────── */
.bw-check-wrap { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }

.bw-check-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 2px solid var(--be-border);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.bw-check-wrap input[type="checkbox"]:checked {
  background-color: var(--be-orange);
  border-color: var(--be-orange);
  /* White checkmark as inline SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5,5.5 4.5,8.5 10.5,1.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
}

.bw-check-wrap input[type="checkbox"]:focus {
  outline: 2px solid var(--be-orange);
  outline-offset: 2px;
}

.bw-check-wrap label { font-family: var(--be-font-b); font-size: 0.82rem; color: var(--be-navy); line-height: 1.5; cursor: pointer; }
.bw-check-wrap a     { color: var(--be-orange); }

/* ── Mini summary (Step 2 bottom) ──────────────────────────────── */
.bw-mini-sum {
  background: var(--be-cream);
  border-radius: 3px;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-family: var(--be-font-b);
  font-size: 0.82rem;
  color: var(--be-navy);
  line-height: 1.55;
}

/* ── Review card (Step 3) ──────────────────────────────────────── */
.bw-review {
  background: var(--be-cream);
  border-radius: 3px;
  padding: 20px;
  margin-bottom: 20px;
}
.bw-rev-sec { font-family: var(--be-font-b); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--be-orange); margin: 0 0 10px; }
.bw-rev-hr  { border: none; border-top: 1px solid var(--be-border); margin: 14px 0; }
.bw-rev-row { display: flex; gap: 12px; margin-bottom: 7px; font-family: var(--be-font-b); font-size: 0.87rem; }
.bw-rev-row:last-child { margin-bottom: 0; }
.bw-rev-k   { color: var(--be-muted); min-width: 96px; flex-shrink: 0; }
.bw-rev-v   { color: var(--be-navy); font-weight: 600; word-break: break-word; }
.bw-rev-v.bw-orange { color: var(--be-orange); }

.bw-edit-btn {
  background: none;
  border: none;
  font-family: var(--be-font-b);
  font-size: 0.82rem;
  color: var(--be-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  display: inline-block;
  transition: color 200ms;
}
.bw-edit-btn:hover { color: var(--be-orange); }

/* ── Secure note ───────────────────────────────────────────────── */
.bw-secure {
  text-align: center;
  font-family: var(--be-font-b);
  font-size: 0.76rem;
  color: var(--be-muted);
  margin-top: 10px;
  line-height: 1.4;
}

/* ── Spinner ───────────────────────────────────────────────────── */
.bw-spin {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: _bw_spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes _bw_spin { to { transform: rotate(360deg); } }

/* ── Global error ──────────────────────────────────────────────── */
.bw-global-err {
  background: #fde8e8;
  border: 1px solid var(--be-error);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: var(--be-font-b);
  font-size: 0.84rem;
  color: var(--be-error);
  margin-bottom: 14px;
  display: none;
  line-height: 1.5;
}
.bw-global-err.bw-show { display: block; }
.bw-global-err a { color: var(--be-error); }

/* ── Success state ─────────────────────────────────────────────── */
.bw-success {
  text-align: center;
  padding: 8px 0 12px;
}
.bw-success-icon {
  width: 60px;
  height: 60px;
  background: rgba(67, 122, 34, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
  color: var(--be-success);
}
.bw-success-title { font-family: var(--be-font-h); font-size: 2rem; font-weight: 700; text-transform: uppercase; color: var(--be-navy); margin: 0 0 14px; }
.bw-success-text  { font-family: var(--be-font-b); font-size: 0.92rem; color: var(--be-navy); line-height: 1.65; margin-bottom: 8px; }
.bw-success-sig   { font-family: var(--be-font-b); font-size: 0.85rem; color: var(--be-muted); margin-top: 18px; }

/* ── Mobile bottom sheet ───────────────────────────────────────── */
@media (max-width: 767px) {
  .bw-overlay { align-items: flex-end; }

  .bw-modal {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 92vh;
    transform: translateY(100%);
    transition: transform 280ms ease-out;
  }
  .bw-overlay.bw-open .bw-modal { transform: translateY(0); }

  .bw-drag-handle { display: block; }
  .bw-close { top: 20px; }
  .bw-content { padding: 18px 22px 36px; }
  .bw-title { font-size: 1.5rem; }
}

@media (hover: none) {
  .bw-dep-card:hover:not(.bw-dep-full) { border-color: var(--be-border); }
  .bw-btn-primary:hover { background: var(--be-orange); }
  .bw-btn-pay:hover { background: var(--be-orange); }
  .bw-close:hover { background: transparent; color: var(--be-muted); }
}