:root {
    --vehicle-teal: #00a19c;
    --vehicle-dark: #071b25;
    --vehicle-ink: #182230;
    --vehicle-muted: #5f6b78;
    --vehicle-soft: #edf8f7;
}

.vehicle-detail-page {
    background: linear-gradient(180deg, #f4f8f8 0, #ffffff 720px);
    padding: 30px 0 70px;
    color: var(--vehicle-ink);
}

.vehicle-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
    color: #66727d;
    font-size: .9rem;
}

.vehicle-breadcrumb a { color: #087d79; text-decoration: none; font-weight: 700; }
.vehicle-breadcrumb i { font-size: .65rem; opacity: .7; }

.vehicle-success {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 17px 20px;
    border: 1px solid #82d8b3;
    border-radius: 14px;
    background: #e9fff5;
    color: #08643e;
    font-weight: 700;
}

.vehicle-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 30px;
    align-items: start;
}

.vehicle-detail-content,
.vehicle-booking-card {
    border: 1px solid #dbe7e8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 55, 65, .10);
}

.vehicle-detail-content { padding: 34px; }
.vehicle-eyebrow {
    display: inline-block;
    color: #008d88;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.vehicle-detail-content h1 {
    margin: 0 0 24px;
    color: #0d1726;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
}

.vehicle-hero-image {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -10px 24px;
    padding: 24px;
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #fff 0, #f4f7f7 58%, #eaf1f1 100%);
}

.vehicle-hero-image img { width: 100%; max-height: 430px; object-fit: contain; }

.vehicle-capacity-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.vehicle-capacity-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid #b5e7e4;
    border-radius: 999px;
    background: #eafafa;
    color: #087d79;
    font-size: .88rem;
    font-weight: 750;
}

.vehicle-lead { font-size: 1.08rem; line-height: 1.75; color: #334150; }
.vehicle-service-intro { font-size: 1rem; line-height: 1.75; color: var(--vehicle-muted); }
.vehicle-feature-section,
.vehicle-journey-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid #e5eded; }
.vehicle-feature-section h2,
.vehicle-journey-section h2 { margin: 0 0 17px; font-size: 1.35rem; font-weight: 800; }

.vehicle-feature-grid,
.vehicle-journey-section ul { list-style: none; padding: 0; margin: 0; }
.vehicle-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vehicle-feature-grid li,
.vehicle-journey-section li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f5f9f9;
    color: #354250;
    font-weight: 650;
}
.vehicle-feature-grid i { color: var(--vehicle-teal); }
.vehicle-journey-section ul { display: grid; gap: 9px; }
.vehicle-journey-section i { color: #d39d12; }

.vehicle-booking-card { position: sticky; top: 20px; overflow: hidden; }
.vehicle-booking-heading {
    padding: 27px 28px 25px;
    background: linear-gradient(135deg, #071c27, #0a3741);
    color: #fff;
}
.vehicle-booking-heading > span { display: inline-flex; align-items: center; gap: 8px; color: #7ee5df; font-weight: 750; font-size: .9rem; }
.vehicle-booking-heading h2 { margin: 9px 0 7px; font-size: 1.65rem; font-weight: 800; }
.vehicle-booking-heading p { margin: 0; color: #d3e4e7; line-height: 1.55; }
.vehicle-booking-form { padding: 26px 28px 30px; }
.vehicle-reservation-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: -4px 0 10px;
    padding: 6px;
    border: 1px solid #c8e2e2;
    border-radius: 15px;
    background: #eaf5f5;
}
.vehicle-reservation-mode {
    min-width: 0;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 9px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #557f80;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}
.vehicle-reservation-mode.active {
    background: #fff;
    color: var(--vehicle-teal);
    box-shadow: 0 3px 13px rgba(0, 161, 156, .18);
}
.vehicle-reservation-mode i { flex: 0 0 auto; }
.vehicle-places-fields[hidden],
#vehicle-region-fields[hidden] { display: none !important; }
.vehicle-airport-picker {
    margin: 0 0 20px;
    padding: 15px;
    border: 2px solid #b9e8e5;
    border-radius: 17px;
    background: linear-gradient(145deg, #eaf9f8, #f8fcfc);
}
.vehicle-select-airport-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 13px;
    color: #087d79;
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vehicle-airport-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.vehicle-airport-tabs .airport-tab {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon code";
    align-content: center;
    align-items: center;
    column-gap: 7px;
    padding: 12px 9px;
    border: 2px solid transparent;
    border-radius: 13px;
    color: #fff;
    text-align: start;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vehicle-airport-tabs .airport-tab:hover { transform: translateY(-2px); }
.vehicle-airport-tabs .airport-tab-dlm { background: #0aa6a1; }
.vehicle-airport-tabs .airport-tab-ayt { background: #ef9400; }
.vehicle-airport-tabs .airport-tab-bjv { background: #343b43; }
.vehicle-airport-tabs .airport-tab.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 161, 156, .25);
}
.vehicle-airport-tabs .airport-tab-icon { grid-area: icon; }
.vehicle-airport-tabs .airport-tab-icon img { width: 32px; height: 24px; object-fit: contain; }
.vehicle-airport-tabs .airport-tab-title { grid-area: title; font-size: .78rem; line-height: 1.15; font-weight: 800; }
.vehicle-airport-tabs .airport-tab-code { grid-area: code; font-size: .72rem; font-weight: 800; opacity: .92; }
.vehicle-form-field { margin-bottom: 16px; }
.vehicle-form-field label { display: block; margin-bottom: 7px; color: #263442; font-size: .88rem; font-weight: 750; }
.vehicle-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vehicle-input-wrap { position: relative; }
.vehicle-input-wrap i { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #008f8a; pointer-events: none; }
[dir="rtl"] .vehicle-input-wrap i { left: auto; right: 15px; }
.vehicle-booking-form input,
.vehicle-booking-form select {
    width: 100%;
    min-height: 49px;
    border: 1px solid #cbd9db;
    border-radius: 11px;
    background: #fbfdfd;
    color: #1e2a36;
    padding: 10px 13px;
    outline: none;
}
.vehicle-input-wrap input { padding-left: 42px; }
[dir="rtl"] .vehicle-input-wrap input { padding-left: 13px; padding-right: 42px; }
.vehicle-booking-form input:focus,
.vehicle-booking-form select:focus { border-color: var(--vehicle-teal); box-shadow: 0 0 0 3px rgba(0, 161, 156, .12); }
.vehicle-submit {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #00a9a3, #008d88);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0, 161, 156, .22);
}
.vehicle-submit:hover { filter: brightness(.96); transform: translateY(-1px); }

@media (max-width: 991px) {
    .vehicle-detail-grid { grid-template-columns: 1fr; }
    .vehicle-booking-card { position: static; }
}

@media (max-width: 575px) {
    .vehicle-detail-page { padding-top: 20px; }
    .vehicle-detail-content { padding: 22px 18px; }
    .vehicle-hero-image { min-height: 245px; margin-inline: 0; padding: 10px; }
    .vehicle-feature-grid { grid-template-columns: 1fr; }
    .vehicle-booking-heading { padding: 23px 20px; }
    .vehicle-booking-form { padding: 22px 18px 25px; }
    .vehicle-form-row { grid-template-columns: 1fr; gap: 0; }
    .vehicle-reservation-modes { gap: 4px; padding: 5px; }
    .vehicle-reservation-mode { min-height: 54px; gap: 6px; padding: 8px 5px; font-size: .75rem; }
    .vehicle-airport-picker { padding: 12px; }
    .vehicle-airport-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .vehicle-airport-tabs .airport-tab {
        min-height: 105px;
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "title" "code";
        justify-items: center;
        gap: 3px;
        padding: 8px 3px;
        text-align: center;
    }
    .vehicle-airport-tabs .airport-tab-icon img { width: 28px; height: 21px; }
    .vehicle-airport-tabs .airport-tab-title { font-size: .68rem; overflow-wrap: anywhere; }
    .vehicle-airport-tabs .airport-tab-code { font-size: .65rem; }
}