/**
 * B2C customer-facing page styles.
 *
 * Static CSS extracted from inline style="..." attributes in B2C templates,
 * cells, and elements. Registered globally in templates/layout/default.php so
 * that View Cells (which render in their own View instance) are covered too.
 */

/* Reviews/write.php, others: hidden block toggled by JS */
.b2c-hidden {
    display: none;
}

/* Reviews/write.php: submit row hidden until a rating is chosen */
.b2c-hidden-important {
    display: none !important;
}

/* Transfers/search.php: vehicle thumbnail */
.b2c-vehicle-thumb {
    max-height: 110px;
    object-fit: contain;
}

/* Destinations/view.php: hero band background */
.b2c-destination-hero-bg {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, var(--color-primary-light) 100%);
}

/* Destinations/view.php: hero band with the destination's featured image as a
   blurred cover backdrop. The image lives on a ::before layer so the blur never
   touches the foreground text; a dark overlay keeps the copy readable. */
.b2c-destination-hero-bg.has-hero-image {
    position: relative;
    overflow: hidden;
}

.b2c-destination-hero-bg.has-hero-image::before {
    content: "";
    position: absolute;
    inset: -24px; /* bleed past edges so blur doesn't reveal a soft border */
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(0.6);
    z-index: 0;
}

.b2c-destination-hero-bg.has-hero-image > .container {
    position: relative;
    z-index: 1;
}

.b2c-destination-hero-bg.has-hero-image h1 {
    color: #fff;
}

.b2c-destination-hero-bg.has-hero-image .destination-description,
.b2c-destination-hero-bg.has-hero-image .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9) !important;
}

.b2c-destination-hero-bg.has-hero-image .breadcrumb-item a,
.b2c-destination-hero-bg.has-hero-image .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.75);
}

/* Destinations/view.php: constrained lead description width */
.b2c-max-w-760 {
    max-width: 760px;
}

/* Marketing/unsubscribe.php: large status icon */
.b2c-status-icon {
    font-size: 48px;
}

/* element/booking_order_summary.php: points-discount row colour */
.b2c-points-discount-row {
    color: #4caf50;
}

/* element/transfers/confirmation_block.php: vehicle thumbnail */
.b2c-confirm-vehicle-thumb {
    width: 90px;
    height: 60px;
    object-fit: cover;
}

/* cell/DestinationsBlock/landing.php: round carousel nav button */
.b2c-carousel-nav-btn {
    width: 36px;
    height: 36px;
}

/* cell/DestinationsBlock/landing.php: carousel viewport */
.b2c-carousel-wrapper {
    overflow: hidden;
}

/* cell/DestinationsBlock/landing.php: carousel track */
.b2c-carousel-track {
    gap: 16px;
    transition: transform 0.4s ease;
}

/* ------------------------------------------------------------------ */
/* Async card loading — skeleton placeholders                          */
/* Shown by the listing shells (tours / homepage / categories /        */
/* destinations) while lazy-cards.js fetches the real cards. Shared     */
/* here because b2c-pages.css loads on every storefront page.           */
/* ------------------------------------------------------------------ */

/* Fade the real cards in once injected, so the swap isn't a hard jump. */
.lc-cards-region {
    min-height: 120px;
}
.lc-cards-region.is-loaded {
    min-height: 0;
}
.lc-cards-region.is-loaded > .products-grid,
.lc-cards-region.is-loaded > .row,
.lc-cards-region.is-loaded > .homepage-carousel {
    animation: lc-cards-fade 0.35s ease both;
}
@keyframes lc-cards-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Skeleton grid mirrors the real .products-grid so there's no reflow. */
.lc-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.lc-skeleton-card {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.lc-skeleton-thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
}
.lc-skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin: 12px 14px;
}
.lc-skeleton-line.sm { width: 45%; }
.lc-skeleton-line.lg { width: 80%; height: 16px; }
.lc-skeleton-line.pill { width: 60%; height: 28px; border-radius: 14px; margin-top: 16px; }

/* The shimmer itself, applied to every greyed block. */
.lc-shimmer {
    background: linear-gradient(100deg, #eee 30%, #f5f5f5 50%, #eee 70%);
    background-size: 200% 100%;
    animation: lc-shimmer 1.2s ease-in-out infinite;
}
@keyframes lc-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lc-shimmer { animation: none; }
    .lc-cards-region.is-loaded > * { animation: none; }
}