/* App-specific styles layered on top of Bootstrap 5. */

:root {
    --fb-hero: #0d6efd;
}

.hero {
    min-height: 460px;
    background:
        linear-gradient(rgba(8, 35, 70, 0.55), rgba(8, 35, 70, 0.55)),
        linear-gradient(120deg, #0a4d8c 0%, #0d6efd 60%, #2bb7d6 100%);
}

.search-bar {
    max-width: 880px;
}

/* Placeholder gradient "photo" for listing cards until real images land (Phase 2). */
.listing-card__img {
    height: 180px;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
    background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
}

.listing-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12) !important;
}

/* Charter detail gallery: fixed, consistent aspect so portrait/landscape mix cleanly. */
.charter-photo {
    height: 420px;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .charter-photo {
        height: 260px;
    }
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Booking form: make the whole trip card a clickable target and highlight the chosen one. */
.booking-trip {
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.booking-trip:hover {
    border-color: var(--bs-primary);
}
.booking-trip:has(input:checked) {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}