/* This file is unlayered, so anything declared here outranks the design
   system's @layer base rules no matter which stylesheet loads first. It must
   therefore never restate what the tokens own - body typography and colour
   live in css/common/global.css and are driven by the agency theme. */

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: #1f2933;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.hero {
    padding: 2rem 0;
}

.card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem 2rem;
}

.footer {
    padding: 1rem 0;
    text-align: center;
    color: #777;
    font-size: 0.85rem;
}

.holiday-component-checking {
    position: relative;
    overflow: hidden;
}

.holiday-component-checking::before,
.holiday-component-checking::after {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    pointer-events: none;
    content: "";
}

.holiday-component-checking::before {
    background: rgb(255 255 255 / 78%);
}

.holiday-component-checking::after {
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgb(255 255 255 / 85%) 45%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: holiday-component-shimmer 1.2s infinite;
}

@keyframes holiday-component-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .holiday-component-checking::after {
        animation: none;
        transform: none;
    }
}

/* The holiday package page's Change popup opens straight on the component
   choice: the Trip Build popup's search summary (Edit Search, chips) is left
   out there. Scoped to that page's drawer, so Trip Build keeps its search. */
[data-trip-modal-hide-search] [data-trip-modal-search-chrome],
[data-trip-modal-hide-search] [data-trip-flight-search-summary] {
    display: none !important;
}

/* The holiday package page with a live cart: from the two-column layout up
   (the compact breakpoint, 900px), the sidebar runs the page grid's full
   height and its price + Book Now card is sticky both ways - pinned under the
   header once scrolled past, and to the screen's bottom edge until scrolled
   into place - so it stays on screen while the itinerary scrolls. Top comes
   from the card's compact:top-detail-anchor-lg (below the header and section tabs); bottom and stacking are not in the
   compiled Tailwind build, so they are here. */
@media (min-width: 900px) {
    [data-ts-live-package-aside] {
        align-self: stretch;
    }

    [data-ts-live-package-price] {
        bottom: 1rem;
        z-index: 10;
    }
}