/* =========================================================================
   TT Sticky Price Summary — Component Library §7.
   Standalone component, isolated for Milestone 1 testing. Wired into the
   real booking wizard state machine in Milestone 4 (Booking Flow).

   Desktop: fixed side panel, visible from Step 1 onward.
   Mobile:  collapsed bottom bar, expands on tap. This is the ONE approved
   glass-effect (backdrop-filter) in the whole system — justified because
   mobile users scroll past varying content beneath this fixed bar.
   Design System v2 §5.7, Mobile Design Spec §3.
   ========================================================================= */

.tt-sticky-price {
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-border);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-space-16);
}
.tt-sticky-price__trip-label { font-size: 12px; color: var(--tt-color-text-soft); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 var(--tt-space-8); }
.tt-sticky-price__route { font-size: var(--tt-fs-caption); margin: 0 0 2px; }
.tt-sticky-price__vehicle { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); margin: 0 0 var(--tt-space-16); }
.tt-sticky-price__lines { border-top: 1px solid var(--tt-color-border); padding-top: var(--tt-space-12); display: flex; flex-direction: column; gap: var(--tt-space-4); }
.tt-sticky-price__line { display: flex; justify-content: space-between; font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); }
.tt-sticky-price__total { display: flex; justify-content: space-between; font-size: var(--tt-fs-body); font-weight: var(--tt-fw-semibold); margin-top: var(--tt-space-8); }

/* Desktop: sticky side panel */
@media (min-width: 900px) {
  .tt-sticky-price { position: sticky; top: var(--tt-space-24); }
}

/* Mobile: collapsed bottom bar, expands on tap */
@media (max-width: 899px) {
  .tt-sticky-price {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0;
    border-bottom: none;
    /* Glass effect — the one approved use case, functional legibility only. */
    background: color-mix(in srgb, var(--tt-color-bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--tt-shadow-3);
    padding: var(--tt-space-12) var(--tt-space-16);
    transition: max-height var(--tt-motion-base) var(--tt-motion-ease);
  }
  .tt-sticky-price__trip-label,
  .tt-sticky-price__route,
  .tt-sticky-price__vehicle,
  .tt-sticky-price__lines {
    display: none;
  }
  .tt-sticky-price[data-expanded="true"] .tt-sticky-price__trip-label,
  .tt-sticky-price[data-expanded="true"] .tt-sticky-price__route,
  .tt-sticky-price[data-expanded="true"] .tt-sticky-price__vehicle,
  .tt-sticky-price[data-expanded="true"] .tt-sticky-price__lines {
    display: block;
  }
  .tt-sticky-price__total { cursor: pointer; margin-top: 0; }
  .tt-sticky-price__total::after {
    content: "";
    width: 8px; height: 8px;
    border-inline-end: 2px solid var(--tt-color-text-soft);
    border-block-end: 2px solid var(--tt-color-text-soft);
    transform: rotate(45deg);
    transition: transform var(--tt-motion-fast) var(--tt-motion-ease);
  }
  .tt-sticky-price[data-expanded="true"] .tt-sticky-price__total::after { transform: rotate(-135deg); }
  /* Never blocks the primary Continue button, verified at iPhone SE
     viewport height (667px) — Mobile Design Spec §3 explicit test case. */
  .tt-sticky-price[data-expanded="true"] { max-height: 60vh; overflow-y: auto; }
}