/**
 * Step 2 — Vehicle selection layout.
 *
 * Responsive design:
 *   ≥ 1024px : 2-column grid (cards 2/3 + sidebar map+recap 1/3)
 *   < 1024px : stacked (cards full-width, map+recap below, sticky bottom bar)
 *
 * Imports component CSS for cards, map, and sticky bar.
 *
 * @package ChauffeurPro
 */

@import url("./components/_vehicle-card.css");
@import url("./components/_map.css");
@import url("./components/_sticky-bar.css");

/* ============================================================
   Step 2 root
   ============================================================ */

.cpro .cpro-step-2 {
    width: 100%;
    padding: var(--cpro-space-4);
}

/* ============================================================
   Header (back button + trip summary)
   ============================================================ */

.cpro .cpro-step-2__header {
    display: flex;
    align-items: center;
    gap: var(--cpro-space-4);
    padding-bottom: var(--cpro-space-4);
    border-bottom: 1px solid var(--cpro-color-border);
    margin-bottom: var(--cpro-space-5);
}

.cpro .cpro-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--cpro-color-border-strong);
    border-radius: var(--cpro-radius-pill);
    color: var(--cpro-color-text);
    font-size: var(--cpro-text-sm);
    font-weight: var(--cpro-weight-medium);
    cursor: pointer;
    transition: all var(--cpro-duration) var(--cpro-ease);
    flex-shrink: 0;
}

.cpro .cpro-back-btn:hover {
    border-color: var(--cpro-color-text);
    background: var(--cpro-color-surface-muted);
}

.cpro .cpro-back-btn:focus-visible {
    outline: 0;
    border-color: var(--cpro-color-primary);
    box-shadow: 0 0 0 3px var(--cpro-color-primary-ring);
}

.cpro .cpro-step-2__trip-summary {
    flex: 1;
    min-width: 0;
    font-size: var(--cpro-text-sm);
    color: var(--cpro-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpro .cpro-step-2__trip-summary strong {
    color: var(--cpro-color-text);
    font-weight: var(--cpro-weight-semibold);
}

/* ============================================================
   Main grid (cards + sidebar)
   ============================================================ */

.cpro .cpro-step-2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cpro-space-5);
}

@media (min-width: 1024px) {
    .cpro .cpro-step-2__grid {
        grid-template-columns: 2fr 1fr; /* 2/3 cards + 1/3 sidebar */
        gap: var(--cpro-space-6);
        align-items: start;
    }
}

/* ============================================================
   Cards column
   ============================================================ */

.cpro .cpro-step-2__cards-column {
    min-width: 0; /* Prevent grid overflow */
}

.cpro .cpro-step-2__title {
    font-family: var(--cpro-font-serif);
    font-size: var(--cpro-text-xl);
    font-weight: var(--cpro-weight-regular);
    color: var(--cpro-color-text);
    margin: 0 0 var(--cpro-space-4);
    line-height: var(--cpro-leading-tight);
}

@media (min-width: 1024px) {
    .cpro .cpro-step-2__title {
        font-size: var(--cpro-text-2xl);
    }
}

/* ============================================================
   Vehicle cards container
   ============================================================ */

.cpro .cpro-vehicle-cards {
    display: grid;
    gap: var(--cpro-space-4);
}

@media (min-width: 1024px) {
    .cpro .cpro-vehicle-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--cpro-space-4);
    }
}

/* MOBILE: carousel horizontal scroll-snap */
@media (max-width: 1023px) {
    .cpro .cpro-vehicle-cards {
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        max-width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: var(--cpro-space-4);
        padding-bottom: var(--cpro-space-4);
        -webkit-overflow-scrolling: touch;
        gap: var(--cpro-space-3);
        margin: 0 calc(var(--cpro-space-4) * -1); /* Bleed edges */
        padding-left: var(--cpro-space-4);
        padding-right: var(--cpro-space-4);
    }

    /* Hide scrollbar visually but keep it functional */
    .cpro .cpro-vehicle-cards::-webkit-scrollbar {
        display: none;
    }

    .cpro .cpro-vehicle-cards {
        scrollbar-width: none;
    }

    .cpro .cpro-vehicle-card {
        scroll-snap-align: start;
    }
}

/* ============================================================
   Vehicle details expander
   ============================================================ */

.cpro .cpro-vehicle-details {
    margin-top: var(--cpro-space-4);
    padding-top: var(--cpro-space-4);
    border-top: 1px solid var(--cpro-color-border);
}

.cpro .cpro-vehicle-details__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--cpro-space-2);
    padding: var(--cpro-space-2) 0;
    background: transparent;
    border: 0;
    color: var(--cpro-color-text);
    font-size: var(--cpro-text-sm);
    font-weight: var(--cpro-weight-medium);
    cursor: pointer;
    transition: color var(--cpro-duration) var(--cpro-ease);
    font-family: inherit;
}

.cpro .cpro-vehicle-details__toggle svg {
    transition: transform var(--cpro-duration) var(--cpro-ease);
}

.cpro .cpro-vehicle-details__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.cpro .cpro-vehicle-details__toggle:hover {
    color: var(--cpro-color-primary);
}

.cpro .cpro-vehicle-details__content {
    margin-top: var(--cpro-space-3);
    font-size: var(--cpro-text-base);
    color: var(--cpro-color-text-muted);
    line-height: var(--cpro-leading-normal);
    animation: cpro-details-in var(--cpro-duration-medium) var(--cpro-ease-out);
}

@keyframes cpro-details-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Sidebar (map + recap)
   ============================================================ */

.cpro .cpro-step-2__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--cpro-space-4);
}

@media (min-width: 1024px) {
    .cpro .cpro-step-2__sidebar {
        position: sticky;
        top: var(--cpro-space-4);
    }
}

/* On mobile, hide the desktop recap (replaced by sticky bottom bar) */
@media (max-width: 1023px) {
    .cpro .cpro-trip-recap {
        display: none;
    }
}

/* ============================================================
   Bottom padding for mobile sticky bar
   ============================================================ */

@media (max-width: 1023px) {
    .cpro .cpro-step-2 {
        padding-bottom: 100px; /* Space for sticky bottom bar */
    }
}