/* =============================================================
   home-cars.css  — page-scoped styles for the Cars Homepage
   Depends on: app.css (Bootstrap 4, Poppins, bravo_wrap base)
   Theme palette:
     --hc-primary  : #5191fa  (brand blue)
     --hc-dark     : #1a2b48  (dark navy)
     --hc-muted    : #5e6d77  (secondary text)
     --hc-bg-light : #f6f8fb  (section background)
   ============================================================= */

/* ---- CSS custom-property bridge (IE fallbacks use hard values) ----- */
:root {
    --hc-primary  : #5191fa;
    --hc-dark     : #1a2b48;
    --hc-muted    : #5e6d77;
    --hc-bg-light : #f6f8fb;
    --hc-radius   : 10px;
    --hc-section-gap : 80px;
}

/* ================================================================
   SHARED UTILITIES
   ================================================================ */
.hc-section { padding: var(--hc-section-gap) 0; }

.hc-section-head {
    text-align : center;
    margin-bottom : 40px;
    position : relative;
}
.hc-section-head__title {
    font-size   : 32px;
    font-weight : 600;
    color       : var(--hc-dark);
    margin-bottom : 8px;
}
@media (max-width: 767px) {
    .hc-section-head__title { font-size: 24px; }
}
.hc-section-head__sub {
    color       : var(--hc-muted);
    font-size   : 15px;
    margin-bottom : 0;
}
.hc-section-head__cta {
    display     : inline-block;
    margin-top  : 16px;
    font-size   : 14px;
    font-weight : 500;
    color       : var(--hc-primary);
    text-decoration : none;
    border      : 1px solid var(--hc-primary);
    border-radius : 4px;
    padding     : 6px 18px;
    transition  : all .2s;
}
.hc-section-head__cta:hover,
.hc-section-head__cta:focus {
    background   : var(--hc-primary);
    color        : #fff;
    text-decoration : none;
    outline      : 3px solid rgba(81,145,250,.4);
    outline-offset: 2px;
}

/* ================================================================
   SEARCH CARD — compact Bootstrap 4 form
   ================================================================ */

/* Card wrapper — centered, capped width */
.hc-search-card {
    position      : relative;
    z-index       : 10;
    /* max-width     : 480px; */
    margin        : 0 auto;
}

/* ── Tabs ── */
.hc-tabs {
    display       : flex;
    flex-wrap     : nowrap;
    gap           : 2px;
    margin        : 0;
    padding       : 0;
    list-style    : none;
    overflow-x    : auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hc-tabs::-webkit-scrollbar { display: none; }

.hc-tabs .nav-link {
    display       : inline-flex;
    align-items   : center;
    gap           : 5px;
    padding       : 9px 14px;
    font-size     : 12.5px;
    font-weight   : 500;
    white-space   : nowrap;
    color         : rgba(255,255,255,.78);
    background    : rgba(26,43,72,.50);
    border        : 1px solid rgba(255,255,255,.15);
    border-bottom : none;
    border-radius : 6px 6px 0 0;
    cursor        : pointer;
    backdrop-filter: blur(4px);
    transition    : background .2s, color .2s;
}
.hc-tabs .nav-link i {
    font-size     : 14px;
}
.hc-tabs .nav-link:hover {
    background    : rgba(26,43,72,.70);
    color         : #fff;
}
.hc-tabs .nav-link.active {
    background    : #fff;
    color         : var(--hc-dark);
    border-color  : #fff;
}

/* ── Panel body ── */
.hc-panel-body {
    background    : #fff;
    border-radius : 0 8px 8px 8px;
    box-shadow    : 0 8px 30px rgba(26,43,72,.22);
    overflow      : visible;
}
/* Round all corners when first tab is not active (panel left edge exposed) */
.hc-tabs .nav-item:first-child .nav-link:not(.active) ~ .hc-panel-body {
    border-radius : 8px;
}

.hc-panel {
    display : none;
    padding : 20px 22px 22px;
}
.hc-panel.active {
    display : block;
}

/* ── Labels ── */
.hc-lbl {
    display       : block;
    font-size     : 11.5px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color         : var(--hc-muted);
    margin-bottom : 4px;
}

/* ── Form groups — tighter spacing ── */
.hc-fg {
    margin-bottom : 14px;
}
.hc-fg:last-of-type {
    margin-bottom : 16px;
}

/* ── Input groups — Bootstrap 4 enhanced ── */
.hc-panel .input-group {
    overflow : visible;
}
.hc-panel .input-group-text {
    background    : #f6f8fb;
    border-color  : #dfe5ed;
    color         : var(--hc-primary);
    font-size     : 16px;
    padding       : 0 10px;
}
.hc-panel .form-control {
    height        : 42px;
    font-size     : 14px;
    border-color  : #dfe5ed;
    color         : var(--hc-dark);
}
.hc-panel .form-control:focus {
    border-color  : var(--hc-primary);
    box-shadow    : 0 0 0 .15rem rgba(81,145,250,.25);
}
.hc-panel .form-control::placeholder {
    color         : #a8b5c4;
}

/* Map-picker button in append */
.hc-map-btn {
    color         : var(--hc-primary);
    text-decoration: none;
    cursor        : pointer;
    transition    : background .15s;
}
.hc-map-btn:hover {
    background    : #e8f0fe;
    color         : var(--hc-primary);
    text-decoration: none;
}

/* ── Autocomplete dropdown ── */
.hc-panel .smart-search-location { position: relative; }
.hc-panel .bravo-autocomplete,
.hc-search-card .bravo-autocomplete {
    z-index       : 1060;
    position      : absolute;
    left          : 0;
    right         : 0;
    background    : #fff;
    border        : 1px solid #dfe5ed;
    border-top    : none;
    border-radius : 0 0 6px 6px;
    box-shadow    : 0 6px 18px rgba(26,43,72,.12);
    max-height    : 220px;
    overflow-y    : auto;
}
.hc-panel .bravo-autocomplete .item,
.hc-search-card .bravo-autocomplete .item {
    padding       : 9px 12px;
    font-size     : 13px;
    color         : var(--hc-dark);
    cursor        : pointer;
    border-bottom : 1px solid #f2f5f8;
    transition    : background .12s;
}
.hc-panel .bravo-autocomplete .item:last-child,
.hc-search-card .bravo-autocomplete .item:last-child {
    border-bottom : none;
}
.hc-panel .bravo-autocomplete .item:hover,
.hc-search-card .bravo-autocomplete .item:hover {
    background    : #f0f6ff;
    color         : var(--hc-primary);
}

/* ── Included partial field overrides (date_single, round_trip) ── */
.hc-fg .form-group {
    margin-bottom : 0;
    min-height    : auto;
    padding       : 0;
    border        : none;
}
.hc-fg .field-icon {
    display       : none;
}
.hc-fg .form-content {
    padding       : 0;
}
.hc-fg .form-date-search-dt {
    position      : relative;
}
.hc-fg .dt-render {
    display       : block;
    height        : 42px;
    line-height   : 42px;
    padding       : 0 12px;
    font-size     : 14px;
    color         : var(--hc-dark);
    background    : #fff;
    border        : 1px solid #dfe5ed;
    border-radius : .25rem;
    cursor        : pointer;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}
.hc-fg .dt-render:hover {
    border-color  : var(--hc-primary);
}
.hc-fg .round-trip-field {
    padding       : 0;
}
.hc-fg .round-trip-toggle {
    margin        : 0;
}
.hc-fg .switch-label {
    display       : flex;
    align-items   : center;
    gap           : 6px;
    height        : 42px;
    padding       : 0 12px;
    font-size     : 14px;
    color         : var(--hc-dark);
    background    : #fff;
    border        : 1px solid #dfe5ed;
    border-radius : .25rem;
    cursor        : pointer;
    margin        : 0;
}
.hc-fg .switch-label:hover {
    border-color  : var(--hc-primary);
}
.hc-fg .round-trip-return {
    margin-top    : 8px !important;
}

/* ── Search button ── */
.hc-btn-search {
    height        : 44px;
    font-size     : 15px;
    font-weight   : 600;
    letter-spacing: .3px;
    border-radius : 6px;
    background    : var(--hc-primary);
    border-color  : var(--hc-primary);
    box-shadow    : 0 3px 10px rgba(81,145,250,.30);
    transition    : transform .12s, box-shadow .12s;
}
.hc-btn-search:hover {
    transform     : translateY(-1px);
    box-shadow    : 0 5px 16px rgba(81,145,250,.40);
    background    : #3a7be8;
    border-color  : #3a7be8;
}
.hc-btn-search:active {
    transform     : translateY(0);
}
.hc-btn-search i {
    margin-right  : 5px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .hc-search-card {
        max-width : 100%;
    }
    .hc-panel {
        padding   : 16px 16px 18px;
    }
    .hc-tabs .nav-link {
        padding   : 7px 10px;
        font-size : 11.5px;
    }
    .hc-fg .form-row > [class*="col-"] {
        margin-bottom: 0;
    }
}

/* ================================================================
   1. HERO
   ================================================================ */
.hc-hero {
    min-height          : 520px;
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    display             : flex;
    align-items         : center;
    padding             : 100px 0 60px;
    position            : relative;
}
@media (max-width: 767px) {
    .hc-hero { min-height: 0; padding: 80px 0 30px; }
}

.hc-hero__inner {
    position    : relative;
    z-index     : 2;
    /* text-align  : center; */
}

.hc-hero__title {
    color       : #fff;
    font-size   : 52px;
    font-weight : 700;
    line-height : 1.15;
    margin-bottom : 12px;
    text-shadow : 0 2px 6px rgba(0,0,0,.3);
}
@media (max-width: 991px)  { .hc-hero__title { font-size: 38px; } }
@media (max-width: 575px)  { .hc-hero__title { font-size: 28px; } }

.hc-hero__sub {
    color         : rgba(255,255,255,.88);
    font-size     : 17px;
    margin-bottom : 36px;
}
@media (max-width: 575px) { .hc-hero__sub { font-size: 14px; margin-bottom: 24px; } }

/* ================================================================
   2. TRUST STRIP
   ================================================================ */
.hc-trust {
    background  : #fff;
    border-top  : 1px solid #eaeef3;
    border-bottom : 1px solid #eaeef3;
    padding     : 28px 0;
}

.hc-trust__row {
    align-items  : center;
    justify-content : center;
}

.hc-trust__item {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 12px 20px;
    border-right : 1px solid #eaeef3;
}
.hc-trust__item:last-child { border-right: none; }

@media (max-width: 767px) {
    .hc-trust__item {
        border-right  : none;
        border-bottom : 1px solid #eaeef3;
        padding       : 14px 16px;
    }
    .hc-trust__item:last-child { border-bottom: none; }
}

.hc-trust__icon {
    font-size  : 28px;
    color      : var(--hc-primary);
    flex-shrink : 0;
}

.hc-trust__copy strong {
    display     : block;
    font-size   : 14px;
    font-weight : 600;
    color       : var(--hc-dark);
}
.hc-trust__copy span {
    display   : block;
    font-size : 12px;
    color     : var(--hc-muted);
}

/* ================================================================
   3. CATEGORIES
   ================================================================ */
.hc-categories { background: var(--hc-bg-light); }

.hc-cat__grid { justify-content: center; }

.hc-cat-card {
    display         : block;
    border          : 1px solid #e2e8f0;
    border-radius   : var(--hc-radius);
    overflow        : hidden;
    background      : #fff;
    text-align      : center;
    text-decoration : none;
    transition      : transform .2s, box-shadow .2s;
    margin-bottom   : 24px;
    position        : relative;
}
.hc-cat-card:hover,
.hc-cat-card:focus-visible {
    transform   : translateY(-4px);
    box-shadow  : 0 10px 30px rgba(26,43,72,.12);
    text-decoration : none;
    outline     : 2px solid var(--hc-primary);
    outline-offset : 3px;
}

/* Ensure list items' internal .item blocks are left-aligned for readability */
.bravo-list-item .list-item .item,
.list-item .item {
    text-align: left !important;
}

.hc-cat-card__img-wrap {
    overflow         : hidden;
    height           : 160px;
    background       : #eaeef3;
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

.hc-cat-card__img {
    width      : 100%;
    height     : 160px;
    object-fit : cover;
    transition : transform .35s;
}
.hc-cat-card:hover .hc-cat-card__img { transform: scale(1.06); }

.hc-cat-card__img-placeholder {
    font-size : 48px;
    color     : #c4cdd6;
}

.hc-cat-card__name {
    display     : block;
    font-size   : 15px;
    font-weight : 600;
    color       : var(--hc-dark);
    padding     : 14px 12px 4px;
}

.hc-cat-card__count {
    display   : block;
    font-size : 12px;
    color     : var(--hc-muted);
    padding-bottom : 12px;
}

/* ================================================================
   4. POPULAR CATEGORIES (category-first booking display)
   ================================================================ */
.hc-popular-cats { background: #fff; }

.hc-pcat__grid { justify-content: center; }

.hc-pcat-card {
    display         : block;
    border-radius   : var(--hc-radius);
    overflow        : hidden;
    background      : var(--hc-dark);
    text-decoration : none;
    transition      : transform .25s, box-shadow .25s;
    margin-bottom   : 28px;
    position        : relative;
    color           : #fff;
}
.hc-pcat-card:hover,
.hc-pcat-card:focus-visible {
    transform       : translateY(-5px);
    box-shadow      : 0 14px 36px rgba(26,43,72,.20);
    text-decoration : none;
    outline         : 3px solid var(--hc-primary);
    outline-offset  : 3px;
    color           : #fff;
}

/* Image */
.hc-pcat-card__img-wrap {
    position : relative;
    height   : 190px;
    overflow : hidden;
    background: #2a3f65;
}
.hc-pcat-card__img {
    width      : 100%;
    height     : 190px;
    object-fit : cover;
    transition : transform .4s;
    display    : block;
}
.hc-pcat-card:hover .hc-pcat-card__img { transform: scale(1.07); }

.hc-pcat-card__fallback {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 190px;
    font-size       : 56px;
    color           : rgba(255,255,255,.3);
}

/* Dark gradient overlay on bottom of image */
.hc-pcat-card__overlay {
    position         : absolute;
    bottom           : 0;
    left             : 0;
    right            : 0;
    height           : 50%;
    background       : linear-gradient(to top, rgba(26,43,72,.8) 0%, transparent 100%);
    pointer-events   : none;
}

/* Text body below image */
.hc-pcat-card__body {
    padding     : 14px 16px 18px;
    background  : var(--hc-dark);
}

.hc-pcat-card__name {
    display     : block;
    font-size   : 17px;
    font-weight : 700;
    color       : #fff;
    margin-bottom : 6px;
    letter-spacing: .2px;
}

.hc-pcat-card__meta {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    flex-wrap    : wrap;
    margin-bottom : 10px;
}

.hc-pcat-card__price {
    font-size  : 13px;
    color      : rgba(255,255,255,.72);
}
.hc-pcat-card__price strong {
    color      : #fff;
    font-size  : 16px;
    font-weight: 700;
    margin     : 0 2px;
}
.hc-pcat-card__price em {
    font-style : normal;
    font-size  : 12px;
    color      : rgba(255,255,255,.55);
}

.hc-pcat-card__count {
    font-size  : 12px;
    color      : rgba(255,255,255,.55);
}

.hc-pcat-card__cta {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    font-size  : 13px;
    font-weight: 500;
    color      : var(--hc-primary);
    transition : gap .2s;
}
.hc-pcat-card:hover .hc-pcat-card__cta { gap: 10px; }

@media (max-width: 575px) {
    .hc-pcat-card__img-wrap,
    .hc-pcat-card__img,
    .hc-pcat-card__fallback { height: 160px; }
}

/* ================================================================
   5. HOW IT WORKS
   ================================================================ */
.hc-how { background: var(--hc-bg-light); }

.hc-how__steps { justify-content: center; margin-top: 10px; }

.hc-how__step {
    text-align : center;
    padding    : 20px 30px;
}

.hc-how__badge {
    width           : 72px;
    height          : 72px;
    border-radius   : 50%;
    background      : var(--hc-primary);
    color           : #fff;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    font-size       : 28px;
    margin-bottom   : 18px;
    box-shadow      : 0 4px 14px rgba(81,145,250,.35);
}

.hc-how__step-title {
    font-size   : 18px;
    font-weight : 600;
    color       : var(--hc-dark);
    margin-bottom : 8px;
}

.hc-how__step p {
    color     : var(--hc-muted);
    font-size : 14px;
    max-width : 260px;
    margin    : 0 auto;
}

/* Connector lines between steps (desktop) */
@media (min-width: 768px) {
    .hc-how__step { position: relative; }
    .hc-how__step:not(:last-child)::after {
        content    : '';
        position   : absolute;
        top        : 36px;
        right      : -10%;
        width      : 20%;
        border-top : 2px dashed #c4d0e3;
    }
}

/* ================================================================
   6. REVIEWS
   ================================================================ */
.hc-reviews { background: #fff; }

.hc-review-card {
    border        : 1px solid #e8edf3;
    border-radius : var(--hc-radius);
    padding       : 28px 24px;
    height        : 100%;
    background    : var(--hc-bg-light);
    margin-bottom : 24px;
    display       : flex;
    flex-direction: column;
}

.hc-review-card__stars {
    margin-bottom : 12px;
    color         : #ffc107;
    font-size     : 16px;
}
.hc-star--empty { color: #d0d7dd; }

.hc-review-card__text {
    flex        : 1;
    color       : var(--hc-dark);
    font-size   : 14px;
    line-height : 1.7;
    font-style  : italic;
    margin-bottom : 18px;
    border       : none;
    padding      : 0;
}

.hc-review-card__author {
    display     : flex;
    flex-direction : column;
    font-size   : 13px;
}
.hc-review-card__author strong {
    color       : var(--hc-dark);
    font-weight : 600;
}
.hc-review-card__author span {
    color : var(--hc-muted);
}

/* ================================================================
   7. FAQ
   ================================================================ */
.hc-faq { background: var(--hc-bg-light); }

.hc-faq__container { max-width: 800px; }

.hc-faq__list { border-top: 1px solid #dde3ea; }

.hc-faq__item { border-bottom: 1px solid #dde3ea; }

.hc-faq__question {
    width           : 100%;
    background      : none;
    border          : none;
    padding         : 18px 0;
    font-size       : 15px;
    font-weight     : 500;
    color           : var(--hc-dark);
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    gap             : 12px;
    cursor          : pointer;
    text-align      : left;
    transition      : color .2s;
}
.hc-faq__question:hover  { color: var(--hc-primary); }
.hc-faq__question:focus-visible {
    outline        : 2px solid var(--hc-primary);
    outline-offset : 2px;
    border-radius  : 3px;
}
.hc-faq__question[aria-expanded="true"] { color: var(--hc-primary); }

.hc-faq__arrow {
    font-size  : 18px;
    flex-shrink : 0;
    transition : transform .25s;
}
.hc-faq__question[aria-expanded="true"] .hc-faq__arrow {
    transform : rotate(180deg);
}

.hc-faq__answer {
    font-size   : 14px;
    color       : var(--hc-muted);
    line-height : 1.75;
    overflow    : hidden;
    /* height transitions handled by JS */
}
.hc-faq__answer p { margin-bottom: 18px; }
/* When not hidden the answer is shown */
.hc-faq__answer:not([hidden]) { display: block; }

/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */
@media (max-width: 991px) {
    :root { --hc-section-gap: 55px; }
}
@media (max-width: 575px) {
    :root { --hc-section-gap: 40px; }
    .hc-how__step::after { display: none; }
    .hc-cat-card__img-wrap,
    .hc-cat-card__img { height: 130px; }
}

/* ================================================================
   MOBILE — comprehensive responsive overrides
   ================================================================ */

/* ── 3. Map picker modal: bottom-sheet style on phones ─── */
@media (max-width: 575px) {
    .hc-map-picker-modal {
        align-items : flex-end;     /* slide up from bottom */
    }
    .hc-map-picker-modal__dialog {
        width         : 100vw;
        max-width     : 100vw;
        max-height    : 90vh;
        border-radius : 18px 18px 0 0;
    }
    #hc-map-picker-map {
        height : 240px !important;
    }
    .hc-map-picker-modal__map-hint {
        white-space : normal;
        text-align  : center;
        font-size   : 11px;
    }
}

/* ── 4. How It Works: tighter on mobile ─── */
@media (max-width: 767px) {
    .hc-how__step  { padding: 16px 20px; }
    .hc-how__step p { max-width: none; }
    .hc-how__badge {
        width       : 58px;
        height      : 58px;
        font-size   : 22px;
        margin-bottom: 14px;
    }
    .hc-how__step-title { font-size: 16px; }
}

/* ── 5. Reviews: auto height so cards shrink to content ─── */
@media (max-width: 767px) {
    .hc-review-card { height: auto; margin-bottom: 16px; }
}

/* ── 6. FAQ: slightly smaller text on very small phones ─── */
@media (max-width: 575px) {
    .hc-faq__question { font-size: 14px; padding: 14px 0; }
    .hc-faq__answer   { font-size: 13px; }
}

/* ── 7. Trust strip: 2-col grid on xs keeps it compact ─── */
@media (max-width: 575px) {
    .hc-trust__item {
        padding      : 12px 10px;
        font-size    : 13px;
    }
    .hc-trust__icon { font-size: 22px; }
    .hc-trust__copy strong { font-size: 13px; }
}

/* ================================================================
   GOOGLE PLACES AUTOCOMPLETE — .pac-container override
   Scoped via z-index to appear above the hero & search card.
   ================================================================ */
.pac-container {
    z-index       : 1070 !important;
    border        : 1px solid #dfe5ed;
    border-top    : none;
    border-radius : 0 0 6px 6px;
    box-shadow    : 0 6px 18px rgba(26,43,72,.12);
    font-family   : inherit;
    margin-top    : -1px;
}
.pac-item {
    padding       : 9px 12px;
    font-size     : 13px;
    color         : var(--hc-dark, #1a2b48);
    cursor        : pointer;
    border-bottom : 1px solid #f2f5f8;
    border-top    : none;
    line-height   : 1.5;
    transition    : background .12s;
}
.pac-item:last-child {
    border-bottom : none;
}
.pac-item:hover,
.pac-item.pac-item-selected {
    background    : #f0f6ff;
    color         : var(--hc-primary, #5191fa);
}
.pac-item .pac-icon {
    margin-right  : 8px;
}
.pac-item .pac-item-query {
    font-size     : 13px;
    color         : var(--hc-dark, #1a2b48);
    font-weight   : 500;
}
.pac-item .pac-matched {
    font-weight   : 600;
}