/* ════════════════════════════════════════════════════════════════════
   PREMIUM HAMBURGER  →  X  ANIMATION
   Shared by index.html & about.html  |  Triggered by main.js (.mob-open)

   Inner wrap geometry  (w-5 = 20 px wide  ×  h-[18px] = 18 px tall):
     ham-top centre  =  1 px from top
     ham-mid centre  =  9 px  ( top: calc(50% - 1px) + half bar = 9 px )
     ham-bot centre  = 17 px from top
     Δ = 9 − 1 = 8 px  →  translateY(±8px) lands bars on exact mid-axis
════════════════════════════════════════════════════════════════════ */

/* ── Base bar styles (light mode) ──────────────────────────────── */
.ham-bar {
  display:          block;
  position:         absolute;
  left:             0;
  right:            0;
  height:           2px;
  border-radius:    9999px;
  transform-origin: center;
  background:       rgba(13, 13, 24, 0.70);

  /* smooth ease-in-out on transform AND opacity — no snapping */
  transition:
    transform  380ms cubic-bezier(0.65, 0.05, 0.35, 0.95),
    opacity    280ms cubic-bezier(0.65, 0.05, 0.35, 0.95);
}

/* ── Dark mode bar colour ───────────────────────────────────────── */
html.dark .ham-bar {
  background: rgba(255, 255, 255, 0.82);
}

/* ── Resting positions ──────────────────────────────────────────── */
.ham-top { top:    0;               }
.ham-mid { top:    calc(50% - 1px); }
.ham-bot { bottom: 0;               }


/* ════════════════════════════════════════════════════════════════════
   TOUR PACKAGE ACCORDION
   .tour-panel  — collapsible sub-package drawer
   .tour-accordion.is-open  — active/expanded state
   .tour-sub-label  — individual sub-package checkbox row
════════════════════════════════════════════════════════════════════ */

.tour-panel {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-accordion {
  transition: border-color 0.25s ease;
}

.tour-accordion.is-open {
  border-color: rgba(245, 158, 11, 0.35);
}

.tour-sub-label {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     9px 12px;
  border-radius: 10px;
  cursor:      pointer;
  font-size:   0.8125rem;
  font-weight: 500;
  color:       rgba(203, 213, 225, 0.85);
  border:      1px solid transparent;
  transition:  background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  user-select: none;
}

.tour-sub-label:hover {
  background:   rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.28);
  color:        #fbbf24;
}

.tour-sub-label:has(input:checked) {
  background:   rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.45);
  color:        #fbbf24;
}

/* ════════════════════════════════════════════════════════════════════
   OPEN STATE  —  .mob-open toggled by main.js
════════════════════════════════════════════════════════════════════ */

/* Top bar ──  falls 8 px to the midpoint  then  spins +45°  →  \ arm */
#hamburger.mob-open .ham-top {
  transform: translateY(8px) rotate(45deg);
}

/* Middle bar ──  collapses from centre and dissolves */
#hamburger.mob-open .ham-mid {
  opacity:   0;
  transform: scaleX(0);
}

/* Bottom bar ──  rises 8 px to the midpoint  then  spins −45°  →  / arm */
#hamburger.mob-open .ham-bot {
  transform: translateY(-8px) rotate(-45deg);
}