/* =========================================
HERTZ MOBILE MENU FIX
Logo + Full Screen Menu + Reserva Dropdown
========================================= */

@media (max-width: 1200px) {

    /* ===== Full Screen Right Panel ===== */
  
    .meta-item img {
        height: 28px !important;
        width: 28px !important;
    }

    body.menu-open .wa__btn_popup {
        display: none !important;
    }

    .gtranslate_wrapper {
        max-width: 300px !important;
        margin: 40px;
    }

    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item:last-child {
        border-bottom: none !important;
    }

    .elementor-element-8294c73 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important;
        top: 65px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - 65px) !important;
        background: #fff !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%) !important;
        transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .elementor-location-header,
    .elementor-location-header .elementor-section,
    .elementor-location-header .elementor-container {
        overflow: visible !important;
    }

    .elementor-location-header {
        position: relative !important;
        z-index: 100000 !important;
    }

    /* Open state */
    .elementor-element-8294c73 .elementor-menu-toggle.elementor-active+.elementor-nav-menu--dropdown,
    .elementor-element-8294c73 .elementor-nav-menu--dropdown.elementor-menu-open,
    body.menu-open .elementor-element-8294c73 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Logo space + Logo fixed */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown.elementor-nav-menu__container::before {
        content: "" !important;
        display: block !important;
        height: 20px !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    .sub-arrow {
        display: none !important;
    }

    body.menu-open .elementor-element-8294c73 .elementor-widget-image,
    body.menu-open .elementor-element-daad141 {
        position: fixed !important;
        top: 14px !important;
        left: auto !important;
        Right: auto !important;
        z-index: 100001 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* body.menu-open .elementor-element-8294c73 .elementor-widget-image img {
/* max-height: 40px !important;
width: auto !important;
max-height: 34px !important;
width: auto !important;
padding-left: 8px;
} */

    .elementor-element-8294c73 .elementor-menu-toggle {
        z-index: 100002 !important;
    }

    /* ===== Menu Items ===== */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .elementor-nav-menu,
    .elementor-element-8294c73 .elementor-nav-menu--dropdown>ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item>a {
        display: block !important;
        padding: 16px 22px !important;
        color: #222 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    /* ===== SUBMENU FIX (sabse important) ===== */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .sub-menu {
        position: static !important;
        background: #f7f7f7 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
    }

    /* Submenu items */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .sub-menu .menu-item a {
        padding: 13px 22px 13px 40px !important;
        font-size: 15px !important;
        background: #fff !important;
    }

    /* Submenu closed state (default) */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item-has-children:not(.menu-open)>.sub-menu,
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item-has-children:not(.highlighted)>.sub-menu {
        display: none !important;
    }

    /* Submenu open state */
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item-has-children.menu-open>.sub-menu,
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item-has-children.highlighted>.sub-menu {
        display: block !important;
    }

    /* Body scroll lock */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* ========== Tablet (max-width: 767px) ========== */
@media screen and (max-width: 767px) {
    .e-form__indicators__divider{
        margin-top: -30px;  
    }
    div#reservation-step-indicators {
    margin-top: 30px;
}
    .elementor-element-8294c73 .elementor-nav-menu--dropdown .menu-item>a {
        display: block !important;
        padding: 16px 22px !important;
        color: #000 !important;
        font-weight: 400 !important;
        font-size: 20px !important;
     font-family: "Figtree", Sans-serif;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    .gtranslate_wrapper select,
    .gtranslate_wrapper .gt_selector {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        outline: none !important;
            border: 1px solid #007ac3;
        color: #000;
        font-family: 'Lato', sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 36px;
        cursor: pointer;
        box-shadow: none !important;
        text-align: center !important;
        text-align-last: center !important;
        direction: ltr !important;
    }

    .gtranslate_wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        padding: 0 20px !important;
        margin: 16px auto !important;
           border: 1px solid #007ac3;
        border: 1px solid #000000 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    .gtranslate_wrapper:hover {
        box-shadow: none !important;
        background: #FFCC00 !important;
        color: #fff !important;
        border: none !important;
    }

    /* Globe icon */
    .gtranslate_wrapper::before {
        content: "" !important;
        background: url("https://hertzdev.loymarkservices.com/wp-content/uploads/2026/09/gt-web-black-icon.png") center center / 16px 16px no-repeat !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* Select text */
    .gtranslate_wrapper select,
    .gtranslate_wrapper .gt_selector {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        outline: none !important;
            border: 1px solid #007ac3;
        color: #007ac3;
        font-family: 'Lato', sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 36px;
        /* vertical center */
        cursor: pointer;
        box-shadow: none !important;
        text-align: left !important;
        text-align-last: left !important;
        direction: ltr !important;
    }

    /* Arrow */
    .gtranslate_wrapper::after {
        content: "" !important;
        position: static !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 1.6px solid #333 !important;
        border-bottom: 1.6px solid #333 !important;
        transform: rotate(45deg) !important;
        margin: 0 0 2px 3px !important;
        top: auto !important;
        right: auto !important;
    }
}


/* ========== Small Mobile (max-width: 480px) ========== */
@media screen and (max-width: 480px) {


    .gtranslate_wrapper {
        max-width: 300px !important;
    }

    .gtranslate_wrapper::before {
        width: 16px !important;
        height: 16px !important;
        background-size: 15px 15px !important;
    }

    .gtranslate_wrapper select,
    .gtranslate_wrapper .gt_selector {
        font-size: 15px !important;
        line-height: 42px !important;
    }

    .gtranslate_wrapper::after {
        width: 6px !important;
        height: 6px !important;
    }
}



.container-custom {
    max-width: 1392px;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.container.submit-reservation-result {
    max-width: 1236px;
    margin: 0 auto;
}


p.confirmation-message.confirmation-message-hrtz {
    margin-bottom: 24px;
}

.oferta-grid {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    box-sizing: border-box;
}

.elementor-icon-list-text {
    text-align: left;
}

.oferta-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.oferta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.oferta-image-wrapper {
    position: relative;
    width: 100%;
    height: 190px;
}

.oferta-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.oferta-car-image {
    position: absolute;
    right: 12px;
    bottom: -22px;
    width: 215px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}


.oferta-content {
    padding: 36px 28px 30px 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.oferta-title {
    margin: 0 0 24px;
   font-family: "Figtree", Sans-serif;
    font-size: 24px;
    line-height: 105%;
    font-weight: 700;
    color: #000000;
    width: 100%;
}

.reservation-normal-header-active div#reservation-step-indicators {
    margin-top: 80px;
}

hertz-help {
    margin-top: 15px;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    line-height: 1.4;
    color: #434244;
}

.hertz-help a {
    color: #434244;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 400;
    font-family: "Figtree", Sans-serif;
}

.fa-circle-info:before,
.fa-info-circle:before {
    color: black;
}

.protection-card.selected {
    border: 3px solid #FFCC00;
}

/* Button Container */
.oferta-actions {
    display: flex;
    align-items: center;
    gap: 51px;
    margin-top: auto;
}

/* Primary Button (Yellow Pill) */
a.oferta-button-one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFCC00;
    padding: 12px 22px;
    border-radius: 100px;
    color: #000000;
   font-family: "Figtree", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a.oferta-button-one:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Secondary Button (Text Link) */
a.oferta-button-two {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
   font-family: "Figtree", Sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

a.oferta-button-two:hover {
    color: #FFCC00;
}

.arrow-icon {
    width: 14px;
    height: auto;
    transition: transform 0.2s ease;
}

a.oferta-button-two:hover .arrow-icon {
    transform: translateX(3px);
}


/* ==========================================================================
RESPONSIVE MEDIA QUERIES
========================================================================== */

/* Laptop / Desktop Small  */


@media (max-width: 1200px) {
    .oferta-grid {
        gap: 20px;
        padding: 0 20px;
    }

    .oferta-car-image {
        width: 185px;
        bottom: -18px;
    }

    .oferta-content {
        padding: 30px 20px 24px 20px;
    }

    .oferta-title {
        font-size: 18px;
    }
}

@media (min-width: 810px) and (max-width: 1230px) {
    .protection-packages-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 900px) {
     .reservation-results-header-main {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    } 
     div#reservation-results-count-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 100px;
        width: 100%;
    }
    .rfh-total strong {
        font-size: 16px !important;
    }
     .reservation-results-header-main:not(.hide-results-count) .vehicle-filters-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
        background: #FFF;
        color: #000;
        border: 1px solid #c3c3c3;
        border-radius: 100px;
        font-family: "Figtree", Sans-serif;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 15px;
    }
}

@media (min-width: 690px) and (max-width: 900px) {

    #step-1 .vehicle-grid
    {
        grid-template-columns: 1fr 1fr !important;
        justify-items: start;
    }
    .step1-vehicle-layout{
        grid-template-columns: 1fr !important;
    }
}


/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .oferta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .modification-banner h1 {
        font-size: 30px !important;
        line-height: 35px !important;
    }

    .modification-breadcrumbs a {
        font-size: 14px !important;
        line-height: 105% !important;
        margin-bottom: 23px;
    }

    .form-description h2 {
        font-size: 30px !important;
        line-height: 35px !important;
    }

    .form-description h3 {
        font-size: 22px !important;
        line-height: 105% !important;
        margin-bottom: 20px;
    }

    .form-description p {
        font-size: 18px !important;
        line-height: 130% !important;
    }

    .modification-breadcrumbs .breadcrumb-active {
        font-size: 14px !important;
        line-height: 105% !important;
    }
}

@media (min-width: 526px) and (max-width: 900px) {

    /* .step1-vehicle-layout,
#step-1 .vehicle-grid {
grid-template-columns: 1fr 1fr !important;
justify-items: start; 
} */
    .protection-packages-grid {
        grid-template-columns: 1fr 1fr !important;
        justify-items: start;
    }
}

@media (max-width: 991px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    /* .blog-card {
max-width: 100% !important;
} */
    .hertz-form {
        padding: 30px !important;
    }
}

/* Mobile Devices (Under 767px) */
@media (max-width: 767px) {
    .postContent h2 {
        font-size: 25px !important;
    }

   

    .oferta-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 16px;
    }

    .oferta-image-wrapper {
        height: 180px;
    }

    .oferta-car-image {
        width: 190px;
        bottom: -20px;
        right: 10px;
    }

    .oferta-content {
        padding: 32px 20px 24px 20px;
    }

    .oferta-title {
        font-size: 19px;
    }

    .oferta-actions {
        gap: 14px;
    }
}

/* Extra Small Screens (Under 400px) */
@media (max-width: 400px) {
    .oferta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    a.oferta-button-one {
        width: 100%;
    }

    a.oferta-button-two {
        justify-content: center;
    }
}


.destination-slider-wrapper {
    position: relative;
    max-width: 1332px;
    margin: 0 auto;
    /*padding: 10px 50px 40px;*/
}

.destinations-section .slider-wrapper {
    position: relative;
    width: 100%;
    padding: 10px 0 50px 0;
}

.destinations-section .swiper.destinations-slider {
    max-width: 1392px;
    /*width: 95%;*/
    /*padding: 10px 10px 0px 10px;*/
    overflow: hidden;
}

.destinations-section .swiper-slide {
    height: 490px;
    width: calc((100% - 90px) / 3);
    transition: none;
    flex-shrink: 0;
    box-sizing: border-box;
}

.destinations-section .swiper-slide.is-expanded {
    width: calc((((100% - 90px) / 3) * 2) + 45px);
}

.destinations-section .destination-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    background-color: #F8F9FB;
    border: 1px solid #D4D4D4;
    cursor: pointer;
}


.destinations-section .card-left-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: none;
    flex-shrink: 0;
}

.destinations-section .swiper-slide.is-expanded .card-left-media {
    width: 50%;
}

.destinations-section .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.destinations-section .gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.0) 40%,
            rgba(0, 0, 0, 0.55) 75%,
            rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
}

.destinations-section .swiper-slide.is-expanded .gradient-overlay {
    opacity: 0.15;
}

.destinations-section .location-pill {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    z-index: 5;
}

.destinations-section .swiper-slide.is-expanded .location-pill {
    display: inline-flex;
}

.destinations-section .location-pill i {
    color: #4b5563;
    font-size: 0.85rem;
}

.destinations-section .top-pill {
    position: absolute;
    top: 18px;
    left: 18px;
}

.destinations-section .card-collapsed-info {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 5;
    color: #ffffff;
}

.destinations-section .swiper-slide.is-expanded .card-collapsed-info {
    display: none;
}

.destinations-section .card-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.destinations-section .card-title .arrow {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 400;
}

.destinations-section .destination-card:hover .card-title .arrow {
    transform: translateX(4px);
}

.destinations-section .card-location {
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.destinations-section .card-right-details {
    display: none;
    width: 50%;
    background: #F5F5F5;
    padding: 28px 30px 24px 30px;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    overflow: hidden;
}

.destinations-section .swiper-slide.is-expanded .card-right-details {
    display: flex;
    cursor: default;
}

.destinations-section .card-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    color: #374151;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.destinations-section .card-close-btn:hover {
    background: #f3f4f6;
    color: #000000;
}

.destinations-section .details-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.destinations-section .details-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
    line-height: 1.2;
}

.destinations-section .details-description {
    font-size: 18px;
    color: #000;
    line-height: 24px;
    margin-bottom: 10px;
}

.destinations-section .details-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.775rem;
    color: #4b5563;
    border-bottom: 1px solid #D4D4D4;
    font-weight: 500;
    margin-bottom: 16px;
}

.destinations-section .details-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.destinations-section .details-meta .meta-item i {
    font-size: 0.85rem;
    color: #6b7280;
}

.destinations-section .meta-dot {
    font-size: 25px;
    padding-bottom: 15px;
    color: #9ca3af;
}

.destinations-section .fleet-section {
    margin-bottom: 18px;
}

.destinations-section .fleet-heading {
    font-size: 18px;
    font-family: "Figtree", Sans-serif;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #000;
    margin-top: 0;
    margin-bottom: 26px;
    text-transform: capitalize;
}

.destinations-section .fleet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.destinations-section .car-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}

.destinations-section .car-card:hover {
    border-color: #cbd5e1;
}

.destinations-section .car-img-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.destinations-section .car-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.destinations-section .car-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
}

.destinations-section .rent-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: "Figtree", Sans-serif;
    width: 100%;
    background-color: #fdb813;
    color: #000;
    border: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 9999px;
    cursor: pointer;
}

.destinations-section .rent-btn:hover {
    background-color: #000;
    color: #FFF;
}

.destinations-section .custom-nav-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border-radius: 0;
    color: #888888;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 48%;
    z-index: 20;
}

.destinations-section .custom-nav-btn::after {
    display: none;
}

.destinations-section .custom-nav-btn i {
    font-size: 1.25rem;
    font-weight: 300;
}

.destinations-section .custom-nav-btn:hover {
    background: transparent;
    color: #111111;
    transform: scale(1.15);
}

.destinations-section .swiper-button-prev {
    left: 6px;
}

.destinations-section .swiper-button-next {
    right: 15px;
}

.destinations-section .swiper-pagination.custom-pagination {
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.destinations-section .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #e5e7eb;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 !important;
    border-radius: 50%;
}

.destinations-section .swiper-pagination-bullet-active {
    background-color: #000000;
}

@media (max-width: 1024px) {
    .destinations-section .swiper-slide {
        width: calc((100% - 30px) / 2);
        transition: none;
    }

    .destinations-section .swiper-slide.is-expanded {
        width: 100%;
    }


    .destinations-section .card-right-details {
        padding: 24px 22px 20px 22px;
    }

    .destinations-section .swiper-button-next,
    .destinations-section .swiper-button-prev {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .vehicle-filters-toggle-btn {
        display: inline-flex !important;
    }

    .e-form__indicators> :last-child {
        display: none !important;
    }

    .e-form__indicators .e-form__indicators__indicator__separator:nth-last-child(-n+2) {
        display: none !important;
    }

    #reservation-step-indicators .e-form__indicators__divider:nth-of-type(8) {
        display: none !important;
    }

    .step1-vehicle-layout {
        grid-template-columns: 1fr !important;
            margin-bottom: 90px !important;
}

    }

    .destinations-section {
        padding: 0px 12px;
    }

    .destinations-section .swiper.destinations-slider,
    .destinations-section .slider-wrapper {
        padding-top: 0px;
        padding-bottom: 17px;
    }

    .destinations-section .swiper-slide {
        width: 100%;
        height: auto;
        min-height: 440px;
        transition: none;
    }

    .destinations-section .swiper-slide.is-expanded {
        width: 100%;
    }

    .destinations-section .custom-nav-btn {
        display: none;
    }

    .destinations-section .destination-card {
        flex-direction: column;
        height: auto;
    }

    .destinations-section .card-left-media {
        height: 420px;
    }

    .destinations-section .swiper-slide.is-expanded .card-left-media {
        width: 100%;
        height: 220px;
    }

    .destinations-section .swiper-slide.is-expanded .card-right-details {
        width: 100%;
        padding: 20px 18px;
    }

    .destinations-section .swiper.destinations-slider {
        /*padding-left: 25px;*/
        /*padding-right: 25px;*/
    }
}

.vehicle-slider-wrapper {
    max-width: 1776px;
    margin: 0 auto;
    font-family: "Figtree", Sans-serif;
}

/* Categories Filter Buttons */
.vehicle-categories {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.cat-btn {
    padding: 15px 20px;
    border-radius: 50px;
    border: 1px solid #d0d0d0;
    background: transparent;
    color: #959595;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cat-btn:hover,
.cat-btn.active {
    background: #000;
    color: #FFCC00;
    border-color: #000;
    font-size: 18px;
 font-family: "Figtree", Sans-serif;
}


@media (max-width: 767px) {
    .vehicle-categories {
        justify-content: flex-start;
        padding: 0 25px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* Chrome, Safari, aur Opera par scrollbar hide karne ke liye */
    .vehicle-categories::-webkit-scrollbar {
        display: none;
    }
}

/* Swiper Container with Outer Arrows */
.vehicle-swiper-container {
    position: relative;
    padding: 0 45px;
    /* Leaves room for outside arrows */
}

.vehicle-swiper {
    position: relative;
    padding-bottom: 70px !important;
    overflow: hidden;
}

/* Equal Height Cards Structure */
.vehicle-swiper .swiper-wrapper {
    align-items: stretch;
}

.vehicle-swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* Card Box Styles */
.vehicle-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    position: relative;
    /*height: 100%;*/
    /*min-width: 330px;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 27px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.vehicle-card:hover {
    border-color: #d1d1d1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.volver-btn {
    background-color: #FFCC00;
    padding: 15px 20px;
    border-radius: 100px;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000 !important;
    margin-top: 20px;
}

section#cancel-success-section {
    text-align: center;
}

/* Black Badge top left */
.card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: "Figtree", Sans-serif;
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 8px;
    border-radius: 4px;
    z-index: 2;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Vehicle Image */
.card-image {
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.vehicle-card:hover .card-image img {
    transform: scale(1.03);
}

/* Card Content */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.card-subtitle {
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;
    font-weight: 500;
    font-family: "Figtree", Sans-serif;
    text-transform: capitalize;
}

.card-title {
    font-size: 21px;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
    color: #000;
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Meta Details (Transmission / Passengers) */
.card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
    padding-top: 15px;
    padding-left: 15px;
    /* Offset to visually balance left icon alignment */
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-family: "Figtree", Sans-serif;
    color: #000;
    padding-bottom: 15px;
}

.meta-item svg {
    color: #777;
    flex-shrink: 0;
}

/* Button Style (Figma Style Pill) */
.card-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #FFCC00;
    color: #000;
    font-weight: 600;
    font-family: 'Lato';
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.25s ease;
    margin-top: auto;
    box-shadow: none;
}

.card-btn:hover {
    background: #000;
    color: #FFF !important;
}

/* Navigation Arrows Outside Cards */
.vehicle-swiper-container .swiper-button-prev,
.vehicle-swiper-container .swiper-button-next {
    width: 24px;
    height: 24px;
    top: 45%;
    margin-top: -16px;
    color: #666;
    transition: color 0.2s ease;
    z-index: 10;
}

.vehicle-swiper-container .swiper-button-prev:after,
.vehicle-swiper-container .swiper-button-next:after {
    font-size: 18px;
    font-weight: 600;
}

.vehicle-swiper-container .swiper-button-prev:hover,
.vehicle-swiper-container .swiper-button-next:hover {
    color: #000;
}

.vehicle-swiper-container .swiper-button-prev {
    left: 5px;
}

.vehicle-swiper-container .swiper-button-next {
    right: 5px;
}

/* Pagination Dots */
.vehicle-swiper .swiper-pagination {
    bottom: 5px !important;
}

.vehicle-swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #ccc;
    opacity: 1;
    margin: 0 4px !important;
    transition: all 0.25s ease;
}

.vehicle-swiper .swiper-pagination-bullet-active {
    background: #111;
    transform: scale(1.2);
}

/* Hidden Slide for Category Filter */
.swiper-slide.hidden-slide {
    display: none !important;
}

/* Center slider when only ONE vehicle is visible */
.vehicle-swiper .swiper-wrapper:not(has(> .swiper-slide:not(.hidden-slide) ~ .swiper-slide:not(.hidden-slide))):has(> .swiper-slide:not(.hidden-slide)) {
    justify-content: center !important;
    transform: translate3d(0, 0, 0) !important;
}

.vehicle-swiper .swiper-wrapper:not(:has(> .swiper-slide:not(.hidden-slide) ~ .swiper-slide:not(.hidden-slide)))>.swiper-slide:not(.hidden-slide) {
    margin-left: auto !important;
    margin-right: auto !important;
}



/* Message states */
.loading-message,
.searching-message,
.error-message,
.no-results-message {
    display: none;
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    color: #666;
    grid-column: 1 / -1;
}

.loading-message.active,
.searching-message.active,
.error-message.active,
.no-results-message.active {
    display: block;
}

/* Blog grid layout */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(416px, 1fr));
    gap: 20px;
    min-height: 200px;
    position: relative;
}


/* Hide all messages when blog cards are present */
.blog-grid:has(.blog-card) .loading-message,
.blog-grid:has(.blog-card) .searching-message,
.blog-grid:has(.blog-card) .error-message,
.blog-grid:has(.blog-card) .no-results-message {
    display: none !important;
}

/* Loading state overlay */
.blog-grid.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-grid.loading::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #f3f3f3;
    border-top: 3px solid #EF0730;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    z-index: 11;
}

/* GTranslate compatibility - hide translated search placeholders */
.gt_switcher~.blog-desktop-search-inside .search-icon,
.gt_switcher~.blog-mobile-search .search-icon {
    display: none !important;
}


/* =========================================
FIX ELEMENTOR + CONTACT FORM 7 WIDTH
========================================= */

/* Main Elementor form card */
.private-transfer-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Elementor shortcode widget */
.private-transfer-card .elementor-widget-shortcode {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* CF7 form */
.private-transfer-card .wpcf7,
.private-transfer-card .wpcf7 form,
.private-transfer-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Every element inside CF7 */
.private-transfer-form * {
    box-sizing: border-box;
}


/* =========================================
ROWS
========================================= */

.private-transfer-form .transfer-full {
    width: 100%;
    max-width: 100%;
    margin-bottom: 13px;
}

.private-transfer-form .transfer-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 19px;
    width: 100%;
    margin-bottom: 13px;
}

.private-transfer-form .transfer-three {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 13px;
    width: 100%;
    margin-bottom: 13px;
}


/* =========================================
GRID CHILDREN
========================================= */

.private-transfer-form .transfer-two>div,
.private-transfer-form .transfer-three>div {
    min-width: 0;
    width: 100%;
}


/* =========================================
CF7 SPAN WRAPPER
========================================= */

.private-transfer-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
}


/* =========================================
INPUTS
========================================= */

.private-transfer-form input[type="text"],
.private-transfer-form input[type="email"],
.private-transfer-form input[type="tel"],
.private-transfer-form input[type="number"] {
    display: block;
    padding: 19px 14px;
    box-sizing: border-box;
    border: 1px solid #C3C3C3;
    border-radius: 6px;
    background: #fff;
    font-family: "Figtree", Sans-serif;
    outline: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}



/* =========================================
BUTTON
========================================= */

.private-transfer-form .transfer-submit {
    width: 100%;
    max-width: 100%;
}

.private-transfer-form .transfer-submit input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 18px;
    height: 52px;
    font-weight: 600;
    font-family: "Figtree", Sans-serif;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 30px;
    background: #ffc900;
    color: #000;
    cursor: pointer;
}

.private-transfer-form .transfer-submit input[type="submit"]:hover {
    background: #000;
    color: #fff;
}

/* =========================================
HELP TEXT
========================================= */

.private-transfer-form .transfer-help {
    width: 100%;
    margin-top: 9px;
    font-size: 11px;
}

/* =========================
HERTZ RESERVATION FORM
========================= */

.hertz-form {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 60px 55px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 100%;
}

.hertz-form h2 {
    margin: 0 0 20px;
    font-size: 30px;
  font-family: "Figtree", Sans-serif;
    line-height: 35px;
    font-weight: 700;
    color: #000;
}

/* Remove CF7 default paragraph spacing */

.hertz-form p {
    margin: 0;
}

/* Rows */

.hertz-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.hertz-one {
    grid-template-columns: 1fr;
}

.hertz-two {
    grid-template-columns: 1fr 1fr;
}

.hertz-three {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Inputs */

.hertz-form input[type="text"],
.hertz-form input[type="email"],
.hertz-form input[type="tel"],
.hertz-form select {
    width: 100%;
    height: 59px;
    box-sizing: border-box;
    border: 1px solid #C3C3C3;
    border-radius: 4px;
    background: #fff;
    color: #000;
    padding: 0 11px;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    outline: none;
}

.hertz-form input::placeholder {
    color: #555;
    opacity: 1;
}

.hertz-form select {
    appearance: auto;
    cursor: pointer;
}

/* Focus */

.hertz-form input:focus,
.hertz-form select:focus {
    border-color: #999;
}

/* City + checkbox */

.hertz-location {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 21px;
    align-items: center;
}

.hertz-city {
    width: 100%;
}

.hertz-checkbox {
    display: flex;
    align-items: center;
    height: 43px;
}

.hertz-checkbox .wpcf7-list-item {
    margin: 0;
}

.hertz-checkbox label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    color: #000;
    cursor: pointer;
    font-size: 12px;
    color: #222;
    cursor: pointer;
}

.hertz-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;

    accent-color: #000;
    cursor: pointer;
}

/* Submit button */

.hertz-submit {
    width: 100%;
    margin-top: 2px;
}

.hertz-submit input[type="submit"] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 100px;
    background: #ffc800;
font-family: "Figtree", Sans-serif;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.hertz-submit input[type="submit"]:hover {
    background: #000;
    color: #fff;
}

/* Help text */

.hertz-help {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #555;
}

.hertz-help a {
    color: #555;
    text-decoration: underline;
}

/* Responsive */

@media (min-width: 1000px) and (max-width: 1387px) {
    /*.protection-packages-grid {*/
    /*    grid-template-columns: repeat(3, 1fr) !important;*/
    /*}*/
}

@media (max-width: 900px) {
    .destination-slider-wrapper {
        padding: 10px 40px 40px;
    }

    .destination-card {
        height: 340px;
    }
}
@media (min-width: 768px) and (max-width: 900px) {
    #reservation-step-indicators {
        margin-top: 0px;
    }
}
@media (max-width: 768px) {

    .hertz-three {
        grid-template-columns: 1fr;
    }

    .hertz-location {
        grid-template-columns: 1fr;
    }

    /* #reservation-step-indicators {
margin-top: 55px !important;
} */
    .vehicle-swiper-container {
        padding: 0 35px;
    }

    .card-meta {
        padding-left: 5px;
    }
}

@media (max-width: 600px) {
    .destination-slider-wrapper {
        padding: 10px 35px 40px;
    }

    .destination-card {
        height: 320px;
    }

    .destination-title {
        font-size: 18px;
    }
}


/* Main card */
.cr-quote-container {
    max-width: 830px;
    margin: 0 auto;
}

.cr-quote-container .cr-quote-form {
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 9px;
    padding: 34px 32px 36px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Heading - add this in Elementor above the shortcode */
.cr-form-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}

/* Two-column form */
.cr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 12px;
}

/* Fields */
.cr-field input {
    width: 100%;
    height: 59px;
    box-sizing: border-box;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
    padding: 0 9px;
    font-family: inherit;
    font-size: 16px;
    color: #333;
    outline: none;
}

.cr-field input[type="date"] {
    position: relative;
}

/* Required star show karne ke liye */
.cr-field input[name="fecha-estimada-inicio"]::after {
    content: "*";
    color: #555;
    position: absolute;
    left: 109px;
    bottom: 18px;
}

.cr-field input::placeholder {
    color: #555;
    opacity: 1;
}

.cr-field input:focus {
    border-color: #aaa;
}

/* Submit button */
.cr-submit {
    margin-top: 11px;
}

.cr-submit input[type="submit"] {
    display: block;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 100px;
    background: #FFCC00;
    color: #000;
     font-family: "Figtree", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    padding: 15px;
}

.cr-submit input[type="submit"]:hover {
    background: #f2bc00;
}

/* Help text */
.cr-help {
    margin-top: 9px;
    font-size: 16px;
    color: #434244;
    font-family: "Figtree", Sans-serif;
}

.cr-help a {
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #999;
}

.cr-help a:hover {
    color: #000;
}

/* Remove CF7 default spacing */
.cr-quote-form p {
    margin: 0;
}

.cr-quote-form .wpcf7-form-control-wrap {
    display: block;
}

.cr-quote-form .wpcf7-not-valid-tip {
    font-size: 9px;
    margin-top: 3px;
}

.cr-quote-container .cr-quote-form h2 {
    margin: 0 0 16px 0;
    padding: 0;
 font-family: "Figtree", Sans-serif;
    font-size: 40px;
    line-height: 45px;
    font-weight: 700;
    color: #000000;
}

/* Mobile */
@media (max-width: 767px) {
    .cr-quote-container .cr-quote-form h2 {
        font-size: 30px !important;
        line-height: 35px !important;
        margin-bottom: 15px !important;
    }

    .cr-quote-container .cr-quote-form {
        padding: 25px 20px;
    }

    .cr-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cr-form-title {
        font-size: 21px;
    }
}


/*Common css*/

/* Banner section with custom background */
.modification-banner {
    /*margin-top: 50px;*/
    padding-top: 86px;
    background-color: #FFCC00;
    padding-left: 117px;
    padding-bottom: 60px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .modification-banner {
        background-color: #FFCC00;
    }
}


/* Suhaib */
.fa-cogs::before {
    content: url("/wp-content/uploads/2025/10/Automatica-Icon-1.svg") !important;

    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-gas-pump::before {
    content: url("/wp-content/uploads/2025/10/Gasolina-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-users::before {
    content: url("/wp-content/uploads/2025/10/pasajeros-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-suitcase::before {
    content: url("/wp-content/uploads/2025/10/maletas-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-car::before {
    content: url("/wp-content/uploads/2025/10/cc-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-door-open::before {
    content: url("/wp-content/uploads/2025/10/puertas-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-check::before {
    content: url("/wp-content/uploads/2026/09/black-right-icon.png") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

.fa-fa-car::before {
    content: url("/wp-content/uploads/2025/10/cc-Icon.svg") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

/* End Suhaib */
.modification-breadcrumbs {
    margin-bottom: 23px;

}

.modification-breadcrumbs a {
    color: #434244;
    font-size: 16px;
    font-weight: 600;
    line-height: 105%;
    text-decoration: none;
   font-family: "Figtree", Sans-serif;
    transition: color 0.3s ease;
}

.modification-breadcrumbs .breadcrumb-separator-icon {
    color: #000;
    margin: 0 8px;
    font-size: 14px;
    display: inline-block;
}

.modification-breadcrumbs .breadcrumb-active {
    color: #000000;
    text-decoration: underline;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
    font-size: 18px;
    line-height: 105%;
}

.modification-banner h1 {
    font-family: "Figtree", Sans-serif;
    font-size: 40px;
    color: #000;
    font-weight: 700;
    line-height: 45px;
    margin: 0;
}

.modification-banner p {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    margin-top: 20px;
    margin-bottom: 0;
}


@media (max-width: 767px) {
    .modification-banner h1 {
        font-size: 40px;
    }

    .modification-banner p {
        font-size: 16px;
    }

    .modification-banner .new-line {
        display: none;
    }
}

/* Main content container */
.modification-container {
    /*max-width: 90%;*/
    margin: auto;
    position: relative;
}

.modification-content {
    padding-top: 100px;
    padding-bottom: 128px;
    padding-right: 110px;
    padding-left: 113px;
}

@media (max-width: 767px) {
    /*.modification-container {*/
    /*margin: auto;*/
    /*padding: 20px;*/
    /*}*/

    .form-input-section .modification-form {
        min-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .modification-container {
        margin: auto;
        padding: 0px;
    }

    .modification-content {
        margin: 0;
        padding-bottom: 30px;
    }

    .reservation-details-block {
        padding: 0;
    }
}

/* Content layout */


.modification-content .reservation-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 50px;
}

.form-column {
    width: 100%;
}

.form-column .info-section:first-of-type {
    margin-top: 30px;
    margin-bottom: 30px;
}

.summary-column {
    flex: 1;
    min-width: 280px;
    background-color: #FCF7EE;
    border-radius: 12px;
    padding: 32px;
    height: fit-content;
}

.info-section {
    margin-bottom: 32px;
}

.info-section-title {
    color: #000;
    margin-bottom: 20px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 105%;
}

.info-block p {
    color: #27171A;
     font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
}

.info-block p strong {
    color: #27171A;
    font-family: "Figtree", Sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 130%;
}

.divider {
    height: 1px;
    background-color: #d3d3d3;
    margin: 24px 0;
}

.info-details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.info-details-left,
.info-details-right {
    flex: 1 1 280px;
}

.info-subtitle {
    color: #808285;
    margin: 0 0 12px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}

.reservation-details-block p {
    margin: 0 0 12px;
    font-size: 16px;
    color: #27171A;
    line-height: 1.6;
}

.charge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
}

.charge-row:last-child {
    margin-bottom: 0 !important;
}

.charge-label {
    color: #000;
    padding-right: 10px;
}

.charge-value {
    min-width: 110px;
    text-align: right;
    font-weight: 600;
    color: #000;
}

.modification-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.modification-actions-row .modify-button-outline {
    flex: 1 1 220px;
}

.modification-total-row {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.modification-total-row .total-paid-row {
    margin: 0;
    width: 100%;
    max-width: 420px;
}

.section-subtitle {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    color: #000;
}

.modify-button-outline {
    width: 100%;
    padding: 15px 20px;
    margin-top: 29px;
    background: #FFCC00;
    color: #000;
    border: 1px solid #FFCC00;
    border-radius: 100px;
    transition: all 0.2s ease;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
}

.modify-button-outline:hover {
    background: #27171A;
    border: 1px solid #27171A;
    color: #fff;
}

.total-paid-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-top: 32px;
    border-radius: 8px;
    border: 1px solid #000;
}

.total-label {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}





.car-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    /* margin: 0 auto 12px; */
    object-fit: contain;
}

.car-name {
    color: #000000;
    margin-bottom: 5px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
    margin: 0;
}

/* .car-details {
font-family: "Figtree", sans-serif;
font-weight: 500;
font-size: 18px;
color: #000;
margin: 0 0 18px;
} */

.car-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 14px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 20px;
}

.spec-item {
    display: flex;
    align-items: center;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    color: #000;
    gap: 14px;
}

.spec-item i {
    width: 22px;
    margin-right: 10px;
    font-size: 16px;
    color: #007ac3;
    text-align: center;
}

.features-section {
    padding-bottom: 20px;
}

.form-description h3 {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
    color: #000;
    margin-bottom: 20px;
    margin-top: 0;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px 18px;
}

.features-list li {
    display: flex;
    align-items: center;
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    gap: 14px;
}

.features-list li i {
    margin-right: 10px;
    font-size: 14px;
    color: #007ac3;
}

@media (min-width: 768px) {
    .modification-content .reservation-container {
        flex-direction: row;
        gap: 80px;
    }

    .form-column {
        flex: 2;
        min-width: 340px;
    }

    .summary-column {
        flex: 1;
        min-width: 360px;
    }
}

@media (max-width: 767px) {
    .modification-content .reservation-container {
        gap: 24px;
    }

    .modification-actions-row {
        flex-direction: column;
    }

    .info-block .email-address {
        flex-wrap: wrap;
    }

    .summary-column {
        padding: 28px 22px;
    }

    .car-info {
        text-align: center;
    }

    .car-name,
    .car-details {
        text-align: left;
    }
}



/* Modify buttons */


.modify-button:hover {
    background-color: #27171A;
    color: #fff;
}

/* Success message */
.success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #155724;
    font-weight: 600;
}

/* Error message */
.error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #721c24;
    font-weight: 600;
}

/* Loading state */
.loading-state {
    text-align: center;
    padding: 60px 20px;
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #666;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007ac3;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Form Section Styles */
.modification-form-section {
    display: block;
    padding: 100px 117px 124px;
    margin: auto;
}

.modification-form-section.hidden {
    display: none;
}

.form-description h2 {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
    color: #000;
    margin-bottom: 20px;
    margin-top: 0;
}

.form-content-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    ;
    max-width: 1275px;
    margin: 0 auto;
    justify-content: space-between;
}

/*@media (max-width: 1024px) {*/
/*.modification-form-section {*/
/*padding: 45px 20px !important;*/
/*}*/
/*}*/

@media (max-width: 767px) {
    .form-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /*.modification-form-section {*/
    /*padding: 45px 0px !important;*/
    /*}*/

    .form-input-section .modification-form {
        max-width: 100%;
    }
}

/*.form-description {*/
/*font-family: "Figtree", sans-serif;*/
/*}*/



.form-description p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: #000;
    /* margin-bottom: 0; */
    padding-bottom: 20px;
}

section#cancel-success-section {
    text-align: center;
    padding: 127px;
}

.form-input-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.form-input-section .modification-form {
    min-width: 100%;
}

@media (min-width: 1025px) {
    .form-input-section .modification-form {
        min-width: 491px;
        width: 491px;
    }
}

.modification-form .form-label {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.modification-form .form-input {
    width: 100%;
    padding: 20px 14px !important;
     font-family: "Figtree", Sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #fff !important;
    border: 1px solid #C3C3C3 !important;
    border-radius: 6px !important;
    transition: border 0.2s ease, box-shadow 0.2s ease !important;
    outline: none;
}

.modification-form .form-input:focus {
    border-color: #EF0730;
    box-shadow: 0 0 0 2px rgba(0, 122, 195, 0.15);
    outline: none;
}

.modification-form .form-submit-button {
    width: 100%;
    padding: 15px;
    background: #FFCC00;
    color: #000;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
     font-family: "Figtree", Sans-serif;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 20px;
}

.modification-form .form-submit-button:hover {
    background-color: #27171A;
    color: #fff;
}

.no-services-message {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    color: #666;
    padding: 10px 0;
}

/* Modification Options Section */
.modification-options-section {
    padding: 60px 20px;
    background: #fff;
}

.modification-options-container {
    max-width: 1200px;
    margin: 0 auto;
}

.modification-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

#cancel-reservation-section a {
    color: #000000;
}

@media (max-width: 1191px) {
    .modification-form-section {
        padding: 70px 25px 80px !important;
    }

    form#modification-form,
    form#cancel-reservation-form {
        width: 100%;
    }

    .form-content-wrapper {
        gap: 70px;
        margin-left: 0px;
    }

    .modification-banner {
        padding: 90px 25px;
    }

    .modification-content {
        padding: 90px 25px;
    }
}

@media (max-width: 1024px) {
    .modification-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .modification-options-grid {
        grid-template-columns: 1fr;
    }
}

.modification-option-card {
    background: #f2f4f8;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modification-option-card:hover {
    border-color: #007ac3;
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 122, 195, 0.15);
}

.option-icon {
    color: #007ac3;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modification-option-card h3 {
    font-family: "Figtree", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #007ac3;
    margin-bottom: 15px;
}

.modification-option-card p {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Modification Step Section */
.modification-step-section {
    /* padding: 40px 20px; */
    background: #fff;
    margin-top: 30px;
}

.modification-step-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #f2f4f8;
    border-radius: 12px;
    padding: 40px;
}

.form-row-modify {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .form-row-modify {
        grid-template-columns: 1fr;
    }
}

.form-group-modify {
    display: flex;
    flex-direction: column;
}

.form-label-modify {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #007ac3;
    margin-bottom: 8px;
}

.form-input-modify {
    width: 100%;
    padding: 12px 15px;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #f2f4f8;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input-modify:focus {
    border-color: #007ac3;
    background-color: #fff;
}

.form-actions-modify {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e5e7eb;
}

.modify-cancel-btn {
    padding: 12px 30px;
    background: transparent;
    color: #666;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    font-family: "Figtree", sans-serif;
    transition: all 0.3s ease;
}

.modify-cancel-btn:hover {
    background-color: #f2f4f8;
    border-color: #999;
}

.modify-submit-btn {
    padding: 12px 30px;
    background: #007ac3;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    font-family: "Figtree", sans-serif;
    transition: background-color 0.3s ease;
}

.modify-submit-btn:hover {
    background-color: #27171A;
}

/* Services Modification Styles (matching reservation.php) */
.modification-content .reservation-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
}

@media (max-width: 1024px) {
    .modification-content .reservation-container {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}

.section-block {
    margin-bottom: 30px;
}

.section-title {
    font-family: "Figtree", sans-serif;
    font-size: 35px;
    font-weight: 800;
    color: #007ac3;
    margin-bottom: 15px;
}

.item-list {
    display: flex;
    flex-direction: column;
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #d3d3d3;
}

.item-row:last-child {
    border-bottom: none;
}

.item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.item-name {
    font-family: "Figtree", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}

.item-price {
    font-family: "Figtree", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    white-space: nowrap;
}

.reservation-details-block {
    padding: 30px 0;
    border-bottom: 1px solid #d3d3d3;
}

/* .reservation-details-block h3,
.reservation-charges-block h3 {
font-family: "Figtree", sans-serif;
font-weight: 800;
font-size: 20px;
color: #007ac3;
margin-bottom: 15px;
} */

.reservation-details-block p {
    color: #27171A;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

.reservation-charges-block {
    padding-top: 20px;
}

.section-subtitle {
    color: #000000;
    margin-top: 15px;
    margin-bottom: 5px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
}


.total-estimated {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    /*border-top: 2px solid #007ac3;*/
    margin-top: 20px;
}

.total-label {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
}

.total-value {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 115%;
}

.modification-content .total-label {
    color: #808285;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
}

.modification-content .total-value {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 114%;
}



/* Cancellation Alert Modal */
.cancellation-alert-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.cancellation-alert-overlay.show {
    display: flex !important;
}

.cancellation-alert-modal {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.cancellation-alert-modal h3 {
    font-family: "Figtree", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #27171A;
    margin: 0 0 20px;
}

.cancellation-alert-modal p {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #000;
    margin: 0 0 30px;
    line-height: 1.6;
}

.cancellation-alert-modal button {
    background: #007ac3;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 30px;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cancellation-alert-modal button:hover {
    background: #27171A;
}

/* Reservation-page css */
.rental-form-v2-wrapper {
    max-width: 500px;
    margin: 0 auto;
    font-family: "Figtree", sans-serif;
    background: transparent;
}

/*.form-group-relative {*/
/*    max-width: 431px;*/
/*    position: relative;*/
/*    margin-bottom: 20px;*/
/*}*/

.main-location-select {
    width: 100%;
    height: 54px;
    border: 1px solid #DCDFE3;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 16px;
    color: #4A4A4A;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    font-family: "Figtree", sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.main-location-select:focus {
    border-color: #A0A0A0;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    height: 24px;
    width: 24px;
    background-color: #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.custom-checkbox::after {
    content: "";
    display: none;
    width: 6px;
    height: 12px;
    border: solid #FFCC00;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 3px;
}

.checkbox-wrapper input:checked~.custom-checkbox::after {
    display: block;
}

.checkbox-label-text {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    color: #000;
}

.datetime-split-container {
    display: flex;
    border: 1px solid #DCDFE3;
    border-radius: 6px;
    margin-bottom: 24px;
    background: #fff;
}

.datetime-half {
    flex: 1;
    position: relative;
}

.datetime-half.pickup-half {
    border-right: 1px solid #DCDFE3;
}

.datetime-inner {
    display: flex;
    height: 52px;
    align-items: center;
}

.date-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 1px solid #C3C3C3;
    padding: 0 16px;
    font-size: 15px;
    font-family: "Figtree", sans-serif;
    background: transparent;
    color: #4A4A4A;
    outline: none;
}

.date-input::placeholder {
    color: #6A6C70;
}

.time-select {
    flex-shrink: 0;
    width: 75px;
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 0 8px;
    font-size: 14px;
    font-family: "Figtree", sans-serif;
    color: #4A4A4A;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px 14px;
    padding-right: 24px;
    cursor: pointer;
}

.time-select:disabled {
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-buscar {
    width: 100%;
    background-color: #FFCC00;
    color: #000;
    border: none;
    height: 54px;
    border-radius: 27px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    font-family: "Figtree", sans-serif;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-buscar:hover {
    background-color: #E6B800;
}

.help-link {
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    color: #434244;
    font-weight: 400;
}

.help-link a {
    color: #555;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding-bottom: 1px;
}

.error-message {
    color: #D32F2F;
    font-size: 13px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D32F2F;
    border-radius: 4px;
    padding: 8px;
    margin-top: 5px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-message.show {
    display: block;
}

.oferta .custom-checkbox::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 5px;
    height: 10px;
    border: solid #ffcc00;
    border-width: 0 2px 2px 0;
}

.elementor-element.elementor-element-5abd3ba.elementor-widget.elementor-widget-shortcode {
    font-family: "Figtree", Sans-serif;
    font-size: 18px;
    color: #000;
    text-decoration: underline;
    font-weight: 700;
}


@media screen and (max-width: 639px) {

    .vehicle-swiper-container .swiper-button-prev,
    .vehicle-swiper-container .swiper-button-next {
        display: none !important;
    }
}

@media (max-width:580px) {
    .datetime-split-container {
        flex-direction: column;
        gap: 16px;
        border: none;
    }

    .datetime-half.pickup-half,
    .datetime-half.dropoff-half {
        border: 1px solid #DCDFE3;
        border-radius: 6px;
    }

    .datetime-inner {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .date-input {
        font-size: 13px;
        padding: 0 10px;
    }

    .time-select {
        font-size: 13px;
        width: 68px;
        padding-right: 20px;
    }
}

/* Loading spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ===== FAQ Section ===== */
/*.fleet-faq .e-n-accordion-item {*/
/*    padding-inline: 52px;*/
/*}*/

.custom-faq-section {
    max-width: 1150px;
    margin: 90px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.custom-faq-section .faq-title {
    font-size: 40px;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
    line-height: 45px;
    color: #000;
    margin: 0 0 28px;
    text-align: center;
    letter-spacing: -0.02em;
}

.custom-faq-section .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
}

.custom-faq-section .faq-item {
    border: none;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    overflow: hidden;
}

.custom-faq-section .faq-item:last-child {
    border-bottom: none;
}

.custom-faq-section .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "Figtree", Sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.custom-faq-section .faq-question:focus {
    outline: none;
}

.custom-faq-section .faq-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-faq-section .faq-icon::before,
.custom-faq-section .faq-icon::after {
    content: "";
    position: absolute;
    background: #333;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.custom-faq-section .faq-icon::before {
    width: 14px;
    height: 1.5px;
}

.custom-faq-section .faq-icon::after {
    width: 1.5px;
    height: 14px;
}

.custom-faq-section .faq-item.active .faq-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

/* Smooth open/close */
.custom-faq-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.custom-faq-section .faq-item.active .faq-answer {
    max-height: 200px;
}

.custom-faq-section .faq-answer-content {
    padding: 0 4px 18px;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.custom-faq-section .faq-answer-content p {
    margin: 0;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
}

@media (max-width: 768px) {
    .fleet-faq .e-n-accordion-item {
        padding-inline: 0px;
    }

    .custom-faq-section {
        margin: 48px auto;
        padding: 0 16px;
    }

    .custom-faq-section .faq-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .custom-faq-section .faq-question {
        padding: 16px 0;
        font-size: 0.95rem;
        white-space: normal;
    }

    .custom-faq-section .faq-answer-content {
        padding: 0 0 16px;
        font-size: 0.9rem;
    }
}



/* ===== RESERVATION HERO BANNER ===== */
.reservation-hero-banner {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    background: #000;
}

/* Carousel */
.reservation-hero-banner .carousel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.reservation-hero-banner .carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease;
}

.reservation-hero-banner .carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.reservation-hero-banner .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

/* Soft dark overlay */
.reservation-hero-banner .carousel-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Left side positioning */
.reservation-hero-banner .hero-content {
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 5%;
    pointer-events: none;
}

/* ========== WHITE CARD ========== */
.hero-card {
    pointer-events: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    width: 100%;
    max-width: 511px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Title inside card */
.hero-title {
    color: #000;
    font-size: 40px;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
    max-width: 431px;
    width: 100%;
    padding-left: 20px;
    line-height: 45px;
    margin: 0 0 14px 0;
}

/* Promo badge */
.hero-promo {
    margin-bottom: 20px;
    padding-left: 20px;
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF4C8;
    color: #000;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #FFF4C8;
}

.promo-badge img.promo-icon {
    height: 24px;
    width: 24px;
}

/* Form */
.reservation-form-wrapper {
    width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
    .reservation-hero-banner {
        height: 100%;
        overflow: inherit;
        background-color: #fff;
        margin-top: 78px;
    }

    .reservation-hero-banner .carousel {
        height: 470px;
        position: relative;
    }

    .reservation-hero-banner .hero-content {
        align-items: flex-end;
        position: relative;
        inset: 0;
        padding: 24px 16px 32px;
    }

    .hero-card {
        /*width: 100%;*/
        max-width: 100%;
        margin: -70px auto auto;
        box-shadow: 1px 1px 20px 5px #95959533;
        /*padding: 22px 18px;*/
    }

    .hero-title {
        font-size: 25px;
        line-height: 27px;
        padding-left: 0;
        font-family: "Figtree", Sans-serif;
    }

    .hero-promo {
        margin-bottom: 20px;
        padding-left: 0px;
    }

  
}



.step1-vehicle-layout {
    display: grid;
    gap: 22px;
    align-items: flex-start;
    width: 100%;
    grid-template-columns: 333px minmax(0, 1fr);
    margin-bottom: 130px;
}

.vehicle-filters-sidebar {
    flex: 0 0 333px;
    /*max-width: 240px;*/
    /*padding: 4px 8px 16px 0;*/
}

.filter-group {
    margin-bottom: 30px;
}

.filter-group-title {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 105%;
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    appearance: none;
    border: 1px solid #959595;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    color: #959595;
}

.filter-pill:hover {
    border-color: #007ac3;
}

.filter-pill.active {
    background: #007ac3;
    color: #ffffff;
    border-color: #007ac3;
}

.filter-radio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-left {
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 20px;*/
}

.filter-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}

.filter-radio-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-radio-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /*border: 2px solid #ccc;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    /*padding: 7px;*/
    background-color: #F5F5F5;
}

.filter-radio-item input:checked+.filter-radio-dot {
    border-color: #007ac3;
    background-color: #007ac3;
}

.filter-radio-item input:checked+.filter-radio-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    color: #808285;
    gap: 8px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

.price-range-slider-wrap {
    position: relative;
    width: 100%;
    height: 24px;
    margin: 20px 0;
}

.price-range-input::-webkit-slider-runnable-track {
    height: 4px;
    background: #000 !important;
    border-radius: 2px;
}

.price-range-input::-moz-range-track {
    height: 4px;
    background: #000;
    border-radius: 2px;
}

.price-range-input {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 4px;
    margin: 0;
}

.price-range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-top: -6px;
    pointer-events: auto;
    cursor: pointer;
}

.price-range-input::-moz-range-track {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

.price-range-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: pointer;
}

.step1-vehicle-grid-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

#step-1 .vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    justify-content: start;
    align-content: start;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    view-transition-name: vehicle-grid-container;
    transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6),
        box-shadow 0.3s ease,
        opacity 0.4s ease;
    will-change: transform;

    animation: elasticCardDrop 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}

/* Staggered Drop Delays (Ek-ek karke giregi cards) */
#step-1 .vehicle-card:nth-child(1) {
    animation-delay: 0.05s;
}

#step-1 .vehicle-card:nth-child(2) {
    animation-delay: 0.15s;
}

#step-1 .vehicle-card:nth-child(3) {
    animation-delay: 0.25s;
}

#step-1 .vehicle-card:nth-child(4) {
    animation-delay: 0.35s;
}

#step-1 .vehicle-card:nth-child(5) {
    animation-delay: 0.45s;
}

#step-1 .vehicle-card:nth-child(6) {
    animation-delay: 0.55s;
}

/* Elastic Drop Keyframe Animation */
@keyframes elasticCardDrop {
    0% {
        opacity: 0;
        transform: translateY(-35px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateY(12px) scale(1.02);
        /* Overshoot Spring */
    }

    80% {
        transform: translateY(-5px) scale(0.99);
        /* Rebound Bounce */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* Final position */
    }
}

#step-1 .vehicle-card.vehicle-filtered-out {
    display: none !important;
}


@media (max-width: 900px) {

   
    .vehicle-filters-sidebar {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}


.reservation-banner {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
}

.reservation-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.reservation-banner>div {
    position: relative;
    z-index: 2;
}

.reservation-top-bar {
    background-color: #f5f5f5;
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    text-align: left;
}

.fa-circle:before {
    fill: #000000 !important;
}

/* Banner section */
.reservation-banner {
    background-color: transparent;
    background-color: transparent;
    padding: 40px 20px 0px;
    color: #000000;
    min-height: auto;
    transition: background-color 0.3s ease;
}

/* When rental form is visible - transparent background, blue text (like other steps) */
.reservation-banner.form-visible {
    background-color: transparent;
    color: #000000;
}

.reservation-banner.banner-tall {
    min-height: 400px;
    padding-bottom: 80px;
}

.reservation-banner.form-visible .reservation-breadcrumbs {
    color: #D3D3D3;
}

.reservation-banner.form-visible .reservation-breadcrumbs a {
    color: #D3D3D3;
}

.reservation-banner.form-visible .reservation-breadcrumbs .breadcrumb-separator-icon {
    color: #D3D3D3;
}

.reservation-banner.form-visible .reservation-breadcrumbs .breadcrumb-active {
    color: #000000;
}

.reservation-banner.form-visible h1 {
    color: #000000;
}

/* When rental form is hidden - white background, blue text */
.reservation-banner.form-hidden {
    background-color: #ffffff;
    color: #000000;
}

.reservation-banner.form-hidden .reservation-breadcrumbs {
    color: #D3D3D3;
}

.reservation-banner.form-hidden .reservation-breadcrumbs a {
    color: #D3D3D3;
}

.reservation-banner.form-hidden .reservation-breadcrumbs .breadcrumb-separator-icon {
    color: #D3D3D3;
}

.reservation-banner.form-hidden .reservation-breadcrumbs .breadcrumb-active {
    color: #000000;
}

.reservation-banner.form-hidden h1 {
    color: #000000;
}

.reservation-form-wrapper {
    max-width: 90%;
    margin: auto;
    padding: 0;
}

.reservation-form-wrapper .rental-form {
    margin-top: -175px;
    background: #000000 !important;
}

/* White labels on blue background for reservation page */
.reservation-form-wrapper .rental-form label {
    color: #ffffff !important;
}

/* White help link on blue background for reservation page */
.reservation-form-wrapper .rental-form .help-link,
.reservation-form-wrapper .rental-form .help-link a {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

/* Button styling for reservation page - white border and text */
.reservation-form-wrapper .rental-form .view-vehicles {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 6px;
}

/* Button hover state - blue text and white background */
.reservation-form-wrapper .rental-form .view-vehicles:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

@media (max-width: 1024px) {
    .reservation-form-wrapper .rental-form {
        margin-top: -210px;
    }
}

/* Hide rental form wrapper initially if reservation data exists (will be shown by JS if needed) */
.reservation-form-wrapper[data-has-reservation="true"] {
    display: none !important;
}



.reservation-breadcrumbs a {
    color: #808285;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: "Figtree", Sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 105%;
}

.reservation-breadcrumbs .breadcrumb-separator {
    color: #D3D3D3;
    margin: 0 5px;
}

.reservation-breadcrumbs .breadcrumb-separator-icon {
    color: #808285;
    font-size: 14px;
    display: inline-block;
}


.reservation-banner h1 {
    font-family: "Figtree", sans-serif;
    font-size: 55px;
    font-weight: 800;
    color: #000000;
    margin: 0;
}


/* Remove step 1 "Selección de auto" from indicators since it's in the banner */
.car-info-section h2,
.details-section h3,
.feature-item,
.checkbox-feature-item,
.car-info-section p,
.tab-button,
.tab-dropdown {
    font-family: "Figtree", sans-serif;
}

/* Vehicle Grid - 3 columns */
.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    justify-items: stretch;
}



.vehicle-card.clickable-card:hover {
    border-color: #27171A;
}

.vehicle-card.clickable-card.selected,
.vehicle-card.clickable-card.active {
    border-color: #000000;
}

/* Card Header */
.card-header {
    margin-bottom: 16px;
}

.car-title {
    color: #000000;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 105%;
    font-family: "Figtree", Sans-serif;
}

.car-subtitle {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 125%;
    color: #000;
    margin-top: 0;
    margin-bottom: 0;
}

/* Features/Specs Grid */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.feature-badge {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid #434244;
    font-family: Nunito;
    font-weight: 400;
    font-size: 15px;
    line-height: 105%;
}

.feature-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Image Section */
.car-image-container {
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    position: relative;
}

.car-img {
    max-width: 270px;
    height: auto;
}

/* Price Section */
.price-section {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.currency {
    color: #000;
    font-size: 24px !important;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
}

.amount {
    color: #000;
    font-size: 24px !important;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
}

.period {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    font-family: "Figtree", Sans-serif;
}

@media (max-width: 1249px) {

    .main-header-container>.e-con-inner,
    .header-menu ul#menu-1-c193d1a {
        gap: 20px !important;
        align-items: center !important;
    }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {

    .main-header-container>.e-con-inner,
    .header-menu ul#menu-1-c193d1a {
        gap: 20px;
    }

    .vf-grid {
        width: 100% !important;
    }

    .filters-menu-flota {
        display: none;
    }

    .vehicle-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0px;
    }

    .car-image {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 1151px) {

   
    .swiper-pagination-clickable .swiper-pagination-bullet {
        cursor: pointer;
        height: 13px !important;
        width: 13px !important;
    }
}

@media (max-width: 767px) {
    .vehicle-grid {
        grid-template-columns: 1fr;
        padding: 0px;
        gap: 25px;
    }

    .vehicle-card {
        padding: 20px;
    }


    .car-subtitle {
        font-size: 16px;
    }

    .car-image-container {
        height: 200px;
    }

    .currency,
    .amount {
        font-size: 24px;
    }

    .period {
        font-size: 14px;
    }

    .protection-select-btn {
        width: 100%;
    }
}

/* ==================================== */
/* PROTECTION PACKAGES STYLES */
/* ==================================== */

/* Tablet */
@media (max-width: 1024px) {
    .protection-packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .protection-packages-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

.protection-packages-grid {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    justify-content: start;
    align-content: start;
    width: 100%;
    box-sizing: border-box;
}

.protection-card {
    border-radius: 15px;
    padding: 30px;
    border: 1px solid #D4D4D4;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6),
        box-shadow 0.3s ease;
    will-change: transform;
    animation: elasticDrop 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
    cursor: pointer;
}


@keyframes elasticDrop {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.96);
    }

    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.02);
        /* Elastic Over-shoot */
    }

    80% {
        transform: translateY(-4px) scale(0.99);
        /* Rebound */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* Settles down */
    }
}

/* Staggered Elastic Effect (Har card thode delay se drop hoga) */
.protection-card:nth-child(1) {
    animation-delay: 0.05s;
}

.protection-card:nth-child(2) {
    animation-delay: 0.15s;
}

.protection-card:nth-child(3) {
    animation-delay: 0.25s;
}



.protection-card.deselected {
    opacity: 0.6;
}

.protection-card-header {
    margin-bottom: 16px;
    max-width: 380px;
}

.protection-card-title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 12px;
    font-family: "Figtree", Sans-serif;
    line-height: 114%;
}

.protection-card-subtitle {
    font-family: "Figtree", Sans-serif;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
}

.protection-icons {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.protection-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
    transition: filter 0.3s ease;
}



.protection-features {
    margin-bottom: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.protection-feature {
    display: flex;
    align-items: flex-start;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 125%;
}

.protection-feature-icon {
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
}

.protection-more-details {
    font-family: 'Lato';
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    transition: color 0.3s ease;
    text-decoration: underline;
    display: inline-block;
    margin-left: 33px;
    line-height: 125%;
}

.protection-more-details:hover {
    color: #000000;
}

.protection-price-button-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 37px;
}

.protection-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: 1;
}

.protection-price-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.protection-currency {
    color: #000;
    font-size: 24px;
    line-height: 114%;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
}

.protection-amount {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
}

.protection-period {
    color: #000000;
    font-size: 15px;
    font-weight: 400;
   font-family: "Figtree", Sans-serif;
    display: flex;
    gap: 3px;
}

.protection-divider-line {
    display: block;
}

.protection-select-btn {
    padding: 15px 20px;
    border: 1px solid #FFCC00;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
    font-family: lato;
    color: #000;
    background: #FFCC00 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    cursor: pointer !important;
    flex-shrink: 0;
    scroll-margin: 0;
    scroll-padding: 0;
    background-color: #FFCC00 !important;
}

.protection-select-btn:hover,
button.protection-continue-btn.visible:hover {
    background-color: #007ac3 !important;
    color: #ffffff !important;
    border: 1px solid #007ac3 !important;
    transform: translateY(-2px);
    border-radius: 100px;   
}

.protection-select-btn:focus {
    outline: none;
    scroll-margin: 0;
}

.protection-card.selected .protection-select-btn {
    background-color: #27171A;
    color: #ffffff;
}

.protection-continue-section {
    text-align: center;
    margin-top: 65px;
    margin-bottom: 70px;
    padding: 0 20px;
}

.protection-continue-btn {
    display: none;
    padding: 15px 20px;
    border: 1px solid #FFCC00;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    font-family: lato;
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.protection-continue-btn.visible {
    display: inline-block;
    background-color: #007ac3;
    color: #fff;
    max-width: 445px;
    width: 100%;
    padding: 20px;
    font-family: 'Lato';
    border: unset;
    font-weight: 600;
    border-radius:999px;
}

button.protection-continue-btn.visible:hover {
  
    background-color: #000;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Lato';
    padding: 20px 100px;
}

.protection-continue-link {
    display: block;
    margin-top: 20px;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
}

.protection-continue-link:hover {
    text-decoration: underline;
    color: #27171A;
}

.protection-without-section {
    border: 1px solid #D4D4D4;
    border-radius: 15px;
    padding: 30px 54px;
    margin-top: 45px;
    max-width: 1289px;
    margin-left: auto;
    margin-right: auto;
}

.protection-without-title {
    color: #000;
    margin-bottom: 8px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin-top: 0;
    line-height: 115%;
}

.protection-without-description {
    color: #000;
    margin-bottom: 25px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

.protection-without-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.protection-without-checkbox-wrapper .checkbox-icon {
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    margin-top: 2px;
    flex-shrink: 0;
}

.protection-without-checkbox-wrapper .checkbox-icon.checked {
    color: #27171A;
}

.protection-without-checkbox-wrapper .checkbox-icon.unchecked {
    color: #FCF7EE;
    background-color: #FCF7EE;
}

.protection-without-checkbox-wrapper .checkbox-icon:hover {
    transform: scale(1.1);
}

.protection-without-checkbox-label {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    line-height: 125%;
    font-size: 16px;
}

.protection-without-accept-btn {
    background-color: #808285;
    color: #CCCCCC;
    padding: 15px 20px;
    border: none;
    border-radius: 100px;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    cursor: pointer !important;
    transition: background-color 0.3s ease;
}

.protection-without-accept-btn:hover {
    background-color: #27171A;
    color: #ffffff;
}

.protection-without-accept-btn.enabled {
    background-color: #ab206c !important;
    color: #fff;
}

.protection-without-error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dc3545;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 12px;
}

.protection-without-error i {
    color: #dc3545;
    font-size: 18px;
}

span.breadcrumb-link {
    font-family: "Figtree", Sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 105%;
}

/* Responsive Styles for Protection Cards */
@media (max-width: 1200px) {
  

    .protection-card {
        margin: 0;
        width: 100%;
    }

}

@media (max-width: 1024px) {

    .protection-price {
        gap: 0;
        flex-direction: column;
    }

    .protection-period {
        margin-top: -10px;
    }

    .protection-price-button-row {
        gap: 10px;
    }

    .protection-divider-line {
        display: none;
    }
}

@media (max-width: 767px) {
 

    .protection-card {
        padding: 20px;
    }

    .protection-card-title {
        font-size: 30px;
    }

    .protection-card-subtitle {
        font-size: 18px;
    }

    .protection-more-details {
        margin-left: 33px;
    }

    .protection-currency,
    .protection-amount {
        font-size: 24px;
        font-family: "Figtree", Sans-serif;
        font-weight: 700;
    }

    .protection-period {
        font-size: 14px;
    }

    .protection-divider-line {
        display: block;
    }

    .protection-price {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .protection-price-button-row {
        align-items: flex-start;
        gap: 26px;
        display: flex;
        flex-direction: column;
    }

    .protection-without-accept-btn {
        width: 100%;
    }

    .protection-without-section {
        padding: 25px 25px;
    }

    .protection-without-description,
    .protection-without-checkbox-label {
        font-size: 16px;
    }
}

/* ==================================== */
/* SERVICES STEP STYLES */
/* ==================================== */
/* Step 3: Services only - no summary column */
/* Details column takes full width */
#step-3 .details-column {
    flex: 1;
    width: 100%;
    max-width: 100%;
}

/* Adjust reservation container in Step 3 */
#step-3 .reservation-container {
    max-width: 100%;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px 21px;
    margin: 0 auto;
    max-width: 100%;
}

.service-card {
    background-color: #FCF7EE;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.service-card-content {
    padding: 21px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    border: 1px solid #D4D4D4;
    border-radius: 15px;
}

.service-card-title {
    color: #000;
    margin-bottom: 12px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 114%;
    margin-top: 0;
}

.service-card-description {
    color: #000000;
    margin-bottom: 37px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    flex: 1;
}

.service-card-price {
    color: #000000;
    margin-bottom: 26px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}

.service-card-price-unit {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 105%;
}

.service-card-button {
    width: 100%;
    padding: 14px;
    border: 1px solid #000000;
    border-radius: 100px;
    color: #000000;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-align: center;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.service-card-button:hover {
    background-color: #000;
    border-color: #000;
}

.service-card.selected .service-card-button {
    background-color: #000;
    border-color: #000;
    color: #ffffff;
}

.service-card.selected .service-card-button:hover {
    background-color: #27171A;
    border-color: #27171A;
}

.services-continue-section {
    text-align: center;
    margin-top: 45px;
    margin-bottom: 130px;
    padding: 0 20px;
}

.services-continue-btn {
    background-color: #FFCC00;
    color: #000;
    padding: 15px 40px;
    border: none;
    border-radius: 100px;
    max-width: 445px;
    transition: background-color 0.3s ease;
    width: 100%;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
}

.services-continue-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Services Grid Responsive */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0px;
    }
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0px;
    }

    .service-card-title {
        font-size: 22px;
    }

    .service-card-description {
        font-size: 15px;
    }

    .service-card-image {
        width: 100%;
        height: 140px;
    }

    .services-continue-section {
        padding: 0px;
    }

    .services-continue-btn {
        padding: 15px 20px;
    }
}

/* ==================================== */
/* TAB & DROPDOWN STYLES */
/* ==================================== */
.tab-section {
    margin: 0 auto 30px;
    padding: 0 10px;
}

/* Desktop/Tablet Tab Buttons Container */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

/* --- NORMAL STATE STYLING --- */
.tab-button {
    padding: 10px 20px;
    border: 1px solid #4B4E53;
    border-radius: 6px;
    background-color: transparent;
    color: #4B4E53;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* --- ACTIVE & HOVER STATE STYLING --- */
.tab-button:hover,
.tab-button.active {
    color: #000000 !important;
    /* Active/Hover Text Color */
    border-color: #000000 !important;
    /* Active/Hover Border Color */
    background-color: #fff;
}

/* Mobile Dropdown Menu */
.tab-dropdown {
    display: none;
    /* Hidden on desktop/tablet */
    width: 100%;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    color: #4B4E53;
    border: 1px solid #000000;
    /* Default blue border */
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;

    /* Remove default appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Add black arrow SVG icon */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    /* Arrow position */
    background-size: 16px 16px;
}

/* Focus/Active State */
.tab-dropdown:focus,
.tab-dropdown:active {
    border-color: #000000;
    color: #000000;
    outline: none;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Mobile-Specific Styles (max-width: 767px) */
@media (max-width: 767px) {

    /* SHOW Dropdown, HIDE Buttons */
    .tab-buttons {
        display: none;
    }

    .tab-dropdown {
        display: block;
    }
}

/* ==================================== */
/* MULTI-STEP RESERVATION FORM STYLES */
/* ==================================== */



.e-form__indicators {

    background-color: #F5F5F5;
    padding: 18px 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 20px);
    min-height: 60px;
    --indicator-gap: 20px;
    --separator-width: 50px;
   width:100%;
}

/* Individual Step Indicator */
.e-form__indicators__indicator {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    justify-content: center;
    position: relative;
}

/* removed legacy pseudo-connector (::after); explicit separator element is used */

/* Step Number Circle */
.e-form__indicators__indicator__number {
    font-family: "Figtree", sans-serif;
    font-size: 18px !important;
    font-weight: 800;
    color: #4B4E53;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #4B4E53;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
}

/* Step Label */
.e-form__indicators__indicator__label {
    white-space: nowrap;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #4B4E53;
    font-family: "Figtree", Sans-serif;
    line-height: 105%;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

/* (legacy separator removed in favor of standalone divider) */

/* New: standalone divider element between indicators */
.e-form__indicators__divider {
    height: 1px;
    background-color: #959595;
    align-self: center;
    width: clamp(15px, 4vw, 61px);
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    box-sizing: border-box;
}

/* Completed step colors the following divider */
.e-form__indicators__indicator--state-completed+.e-form__indicators__divider {
    background-color: #000000;
}



/* Active State Styling */
.e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
    border-color: #000000;
    color: #FFF;
    background-color: #000000;
}

.e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
    color: #000000;
}

/* Completed State Styling */
.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label {
    color: #000000;
    /* Set label text color to Blue */
}

/* removed legacy ::after connector variants */
.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
    /* Set the background color */
    background-color: #000000;
    /* Blue Background */
    border-color: #000000;
    /* Blue Border */
    color: transparent;
    /* Hide the original number (1, 2, 3...) */

    /* Add custom checkmark icon as background image */
    background-image: url('https://thriftydev.loymarkservices.com/wp-content/uploads/2025/10/check-fill.png');
    background-size: 60%;
    /* Adjust size of the icon inside the circle */
    background-position: center center;
    /* Center the icon */
    background-repeat: no-repeat;
    /* Ensure icon doesn't repeat */
}



/* Individual Step Content */
.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

/* Step Placeholder Styling */
.step-placeholder {
    text-align: center;
    padding: 40px 15px;
}

.step-placeholder h2 {
    color: #000000;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 15px;
    font-family: "Figtree", sans-serif;
}

.step-placeholder p {
    color: #666;
    font-size: 18px;
    margin-bottom: 20px;
    font-family: "Figtree", sans-serif;
}

/* When showing only the placeholder message, hide the rest of the form */
#reservation_form.placeholder-only .e-form__indicators,
#reservation_form.placeholder-only .step-content-container {
    display: none;
}

/* Hide search form and step indicators on confirmation step */
#reservation_form.confirmation-only .e-form__indicators {
    display: none !important;
}

#reservation_form.confirmation-only .step-content {
    display: none;
}

#reservation_form.confirmation-only #step-5,
#reservation_form.confirmation-only #step-5.active {
    display: block !important;
    margin: auto;
    max-width: 100%;
}

/* Step 5 container padding - only bottom padding */
#reservation_form.confirmation-only,
.reservation-form-container.confirmation-only {
    padding-bottom: 50px !important;
    padding-top: 70px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 767px) {

    #reservation_form.confirmation-only,
    .reservation-form-container.confirmation-only {
        padding-bottom: 30px !important;
        /* padding-top: 0 !important; */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .reservation-banner.step-5 {
        padding: 20px 0;
        margin: auto;
        min-height: 120px;
        max-width: 90%;
    }
}

/* Hide page title on Step 5 (confirmation page) - only show breadcrumbs */
.reservation-banner.step-5 #reservation-page-title {
    display: none !important;
}

/* Step 5 banner padding */
.reservation-banner.step-5 {
    padding: 20px 0;
    margin: auto;
    min-height: 120px;
}

.reservation-banner.step-5>div {
    max-width: 90%;
    margin: auto !important;
}

/* Banner vertical centering */
.reservation-banner {
    display: flex;
    align-items: center;
    min-height: 160px;
    position: relative;
    z-index: 1;
    padding: 40px 0 40px 0;
}

.reservation-banner>div {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Reservation form wrapper - positioned below banner, not overlapping */
.reservation-form-wrapper {
    /*position: relative;*/
    z-index: 1;
    margin-top: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.todo-note {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    color: #856404;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
}

/* Step Navigation Buttons */
.step-navigation {
    display: flex;
    justify-content: center;
    gap: var(--indicator-gap, 140px);
    align-items: center;
    padding: 0px 0px 20px 0px;
}

.nav-btn {
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    min-width: 120px;
}

.nav-btn--primary {
    background-color: #000000;
    color: #fff;
}

.nav-btn--primary:hover {
    background-color: #005a8b;
}

.nav-btn--secondary {
    background-color: transparent;
    color: #000000;
    border: 2px solid #000000;
}

.nav-btn--secondary:hover:not(:disabled) {
    background-color: #000000;
    color: #fff;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.reservation-results-header.is-visible {
    display: block;
}

.reservation-results-header-top {
    margin-bottom: 12px;
}

.reservation-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
    margin-top: 70px;
    margin-bottom: 38px;
}

.reservation-breadcrumbs .breadcrumb-link {
    color: #888;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.reservation-breadcrumbs .breadcrumb-link:hover {
    color: #333;
    text-decoration: underline;
}

.reservation-breadcrumbs a.breadcrumb-link {
    color: #808285;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    font-weight: 600;
}

.reservation-breadcrumbs .breadcrumb-active {
    text-decoration: underline;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "Figtree", Sans-serif;
}

.reservation-results-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.reservation-results-header-main.hide-results-count {
    display: block;
}

.reservation-page-title {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
    color: #000;
    margin-bottom: 0;
}

.reservation-results-count {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 105%;
    color: #434244;
}

/* spacer on left to balance title center when results count is on right */
.reservation-results-spacer {
    min-width: 90px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reservation-results-header {
        /*padding: 16px 18px;*/
        /*margin: 12px 0 18px;*/
    }

    .reservation-page-title {
        font-size: 30px;
        line-height: 35px;
        text-align: left;
    }

    

    .reservation-results-spacer {
        display: none;
    }

    .reservation-results-count {
        text-align: left;
        min-width: 0;
    }

}

/* ==================================== */
/* RESPONSIVE DESIGN FOR MULTI-STEP FORM */
/* ==================================== */

/* Laptop/Tablet bridge (max-width: 1200px) */
@media (max-width: 1280px) {
    #reservation_form .e-form__indicators {
        --indicator-gap: 8px;
        --separator-width: 24px;
    }
}

@media (max-width: 1200px) {
    #reservation_form .e-form__indicators__indicator {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    #reservation_form .e-form__indicators__indicator__label {
        display: flex;
    }

    #reservation_form .e-form__indicators {
        --indicator-gap: 10px;
        --separator-width: 15px;
    }
}

/* iPad/Air-ish widths (max-width: 840px) */
@media (max-width: 840px) {
    #reservation_form .e-form__indicators {
        --indicator-gap: 40px;
        --separator-width: 44px;
    }
}

/* Tablet Styles (max-width: 1024px) */
@media (max-width: 1024px) {
    .reservation-container {
        gap: 20px;
    }

    /*.reservation-form-container {*/
    /*    margin: auto;*/
    /*    padding: 20px 0px 30px 0px;*/
    /*}*/

    #reservation_form .e-form__indicators {
        padding: 15px;
        justify-content: center;
        align-items: start;
        --indicator-gap: 8px;
        --separator-width: 25px;
    }

    #reservation_form .e-form__indicators__indicator {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        width: 15%;
    }

    #reservation_form .e-form__indicators__indicator__label {
        font-size: 14px;
        white-space: normal;
        line-height: 16px;
    }

    #reservation_form .e-form__indicators__indicator__number {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .summary-column {
        padding: 35px 25px;
    }

    /* (legacy separator removed) */

    .step-navigation {
        flex-direction: column;
        gap: 15px;
    }

    .nav-btn {
        width: 100%;
        max-width: 200px;
    }
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
    .reservation-form-wrapper {
        padding: 0px;
    }

    /*.reservation-form-container {*/
    /*    margin: 0px;*/
    /*    padding: 20px 0 30px;*/
    /*    border-radius: 10px;*/
    /*}*/

    #reservation_form .e-form__indicators {
        padding: 12px 5px !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: start !important;
        --indicator-gap: 10px;
        --separator-width: 15px;
        overflow: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        scrollbar-color: rgba(0, 139, 220, 0.4) #fff;
        scrollbar-width: thin;
    }

    /* (mobile keeps indicators inline; remove vertical list styles) */

    #reservation_form .e-form__indicators__indicator__label {
        font-size: 16px;
        white-space: normal;
    }

    #reservation_form .e-form__indicators__indicator__label {
        font-size: 14px;
        line-height: 1.1;
    }

    .step-placeholder {
        padding: 40px 15px;
    }

    .step-placeholder h2 {
        font-size: 24px;
    }

    .step-placeholder p {
        font-size: 16px;
    }
}

/* Extra Small (max-width: 480px) */
@media (max-width: 480px) {

    #reservation_form .e-form__indicators__divider {
        margin-top: 5%;
        align-self: start;
    }

    #reservation_form .e-form__indicators__indicator {
        width: 16%;
    }

    #reservation_form .e-form__indicators {
        --indicator-gap: 2px;
        --separator-width: 8px;
        overflow: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        scrollbar-color: rgba(0, 139, 220, 0.4) #fff;
        scrollbar-width: thin;
    }

    #reservation_form .e-form__indicators__indicator__label {
        font-size: 10px;

    }

    .total-label {
        font-size: 16px !important;
    }

    .total-value {
        font-size: 20px !important;
    }
}

@media (max-width: 390px) {
    .item-name {
        font-size: 14px !important;
    }
}

#reservation_form .e-form__indicators__indicator__number {
    --number-size: 32px;
    width: var(--number-size);
    height: var(--number-size);
    font-size: 14px;
    flex-shrink: 0;
}

.nav-btn {
    padding: 10px 20px;
    font-size: 16px;
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {

    .form-row .form-section {
        width: 100% !important;
    }

    .step-placeholder h2 {
        font-size: 22px;
    }

    .step-placeholder p {
        font-size: 14px;
    }

    .todo-note {
        font-size: 14px;
        padding: 12px;
    }

    .reservation-number-box {
        max-width: 100% !important;
        width: 100%;
    }

    .next-steps-title {
        font-size: 30px !important;
        margin: 10px 0;
    }
}

/* Responsive banner styles */
@media (max-width: 767px) {
    .reservation-top-bar {
        font-size: 12px;
        padding: 6px 15px;
    }

    .reservation-banner {
        align-items: start !important;
        padding: 40px 20px 20px;

    }

    .reservation-banner h1 {
        font-size: 40px;
        margin-top: 20px;
    }

    .reservation-banner div {
        margin: 0 !important;
    }

    .reservation-breadcrumbs a.breadcrumb-link,
    .reservation-breadcrumbs .breadcrumb-active {
        font-size: 14px;

    }
    /* horizontal connector between this indicator and the next */
    #reservation_form .e-form__indicators__indicator::after {
        display: block;
    }
}

/* Servicios Section Styles */
.reservation-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 80px;
}

@media (min-width: 1024px) {
    .reservation-container {
        flex-direction: row;
        gap: 80px !important;
    }
}

@media (min-width: 767px) {
    .reservation-container {
        flex-direction: row;
        gap: 20px;
    }


    .details-column {
        flex: 3;
        min-width: 350px;
    }

    .summary-column {
        flex: 2;
        min-width: 300px;
    }
}

@media (max-width: 767px) {
    .reservation-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: start
    }

    .section-title {
        font-size: 30px !important;
    }

    .summary-column {
        padding: 30px 20px !important;
        width: 100%
    }

    .car-info {
        flex-direction: column-reverse !important;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 0px !important;
    }

    .car-info-content {
        width: 100%;
        /* align-items: center !important; */
    }

    .car-details {
        font-size: 20px;
        margin-bottom: 5px;

    }

    .car-image {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 200px;
        align-self: center;
    }

    /* .total-estimated {
padding: 10px !important;
margin: 30px 0 0 0 !important;
} */

    .total-label {
        font-size: 18px !important;
        white-space: normal;
    }

    .total-value {
        font-size: 22px;
    }

    .continue-button {
        margin-top: 30px;
    }
}

.section-block {
    margin-bottom: 30px;
}

.section-title {
    font-family: "Figtree", sans-serif;
    font-size: 35px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 15px;
}

.item-list {
    display: flex;
    flex-direction: column;
}


.checkbox-icon {
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.checkbox-icon.checked {
    color: #27171A;
}

/*.checkbox-icon.unchecked {*/
/*    color: ;*/
/*    background-color: ;*/
/*}*/

.checkbox-icon:hover {
    transform: scale(1.1);
}



.summary-column {
    background-color: #Fff;
    border-radius: 15px;
    padding: 35px 30px;
    border: 1px solid #D4D4D4;
    margin-bottom: 120px;
}


.car-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /*padding-bottom: 20px;
 border-bottom: 1px solid #d3d3d3; */
    margin-bottom: 30px;
    gap: 10px;
}

@media (max-width: 1024px) {
    .summary-column .car-info {
        flex-direction: column-reverse;
    }
}

.car-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.car-image {
    width: auto;
    max-width: 270px;
    height: auto;
    max-height: auto;
    object-fit: contain;
    flex-shrink: 0;
}


.car-details {
    color: #000000;
    text-align: left;
    margin-bottom: 18px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    margin: 0;
}

.car-mileage {
    color: #000;
    text-align: left;
    margin: 0;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

.reservation-details-block {
    padding: 25px 0;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 20px;
}

.reservation-details-block h3,
.reservation-charges-block h3 {
    color: #000;
    margin-bottom: 9px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
    margin-top: 0;
}

.Tarifas h3 {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}

.reservation-details-block p[id*="summary-pickup-location"],
.reservation-details-block p[id*="summary-dropoff-location"] {
    margin-bottom: 20px;
}

.reservation-details-block strong {
    color: #27171A;
    margin-bottom: 6px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
}

.modify-button {
    width: 100%;
    padding: 10px 20px;
    margin-top: 15px;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
}

.modify-button:hover {
    background-color: #27171A;
    border: 1px solid #27171A;
}

/*.filter-pill:hover {*/
/*    border-color: #007ac3;*/
/*    background: #ffffff;*/
/*    color: #007ac3;*/
/*}*/

.reservation-charges-block {
    padding-top: 20px;
}

.charge-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 16px;
    max-width: 500px;
}

.charge-label {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

@media (max-width: 767px) {
    .charge-label {
        max-width: 185px;
    }

    .car-name {
        font-family: "Figtree", Sans-serif;
        font-weight: 700;
        font-size: 22px;
        line-height: 105%;
    }

    .car-details {
        font-family: "Figtree", Sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 125%;
        margin-bottom: 15px;
    }

    .car-mileage {
        font-family: "Figtree", Sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 125%;
    }

    .reservation-details-block h3,
    .reservation-charges-block h3 {
        font-family: "Figtree", Sans-serif;
        font-weight: 700;
        font-size: 22px;
        line-height: 105%;
    }

    .reservation-details-block strong {
        font-family: "Figtree", Sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 125%;
    }

    .reservation-details-block p {
        font-family: "Figtree", Sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 125%;
    }
}

@media (max-width: 1024px) {
    .charge-label {
        max-width: 140px;
    }
}

.charge-value {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 125%;
}

.divider {
    height: 1px;
    background-color: #d3d3d3;
    margin: 15px 0;
}



.total-estimated {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 15px 0 0;
    background-color: #fff;
    border-radius: 6px;
    white-space: nowrap;
}


.continue-button {
    width: 100%;
    padding: 15px 20px;
    background: #000000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    font-family: "Figtree", sans-serif;
    transition: background-color 0.2s;
}

.continue-button:hover {
    background-color: #27171A;
}

/* Step 3 - Información & Pago Styles */
.form-column {
    width: 100%;
    margin-bottom: 60px;
}

@media (min-width: 767px) {
    .form-column {
        flex: 3;
        min-width: 350px;
    }

    .summary-column {
        flex: 2;
        min-width: 300px;
        padding: 35px 25px;
    }
}

@media (max-width: 767px) {
    .section-title {
        font-size: 30px !important;
    }

    .form-row {
        flex-direction: column;
        gap: 5px !important;
    }

    .desktop-icons {
        display: none !important;
    }

    .mobile-icons {
        display: flex !important;
        justify-content: center;
        margin-top: 10px;
    }

    .item-name {
        max-width: 180px;
    }

    .summary-column {
        padding: 30px 20px !important;
        width: 100%;
        margin-bottom: 90px !important;
    }

    .total-estimated {
        padding: 0px !important;
        margin: 30px 0 0 0 !important;
    }

    .form-section {
        margin-bottom: 15px;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
    .total-estimated {
        flex-direction: column !important;
    }
}

/*.form-section {*/
/*margin-bottom: 30px;*/
/*}*/

.phone-input-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.phone-input-group .phone-country-code {
    flex: 0 0 auto;
    width: 80px;
    max-width: 80px;
}

.phone-input-group .phone-number {
    flex: 1;
    min-width: 0;
}

.form-title {
    font-family: "Figtree", sans-serif;
    font-size: 35px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

@media (max-width: 1024px) {
    .info-form .form-row {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
}

.form-row .form-section {
    flex: 1;
}

.phone-input-group {
    display: flex;
    gap: 10px;
}

.phone-input-group .phone-country-code {
    flex: 0 0 auto;
    width: 80px;
    max-width: 80px;
}

.phone-input-group .phone-number {
    flex: 1;
    min-width: 0;
}

.form-label {
    display: block;
    font-family: "Figtree", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000;
    margin-bottom: 8px;
}

.form-input {
    width: 100% !important;
    padding: 12px 15px !important;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    color: #434244;
    background-color: transparent !important;
    border: 1px solid #C3C3C3 !important;
    border-radius: 6px !important;
    outline: none;
}

.form-input:focus {
    border: 1px solid #000000 !important;
}

.form-input::placeholder {
    color: #999;
}

.form-textarea {
    width: 100%;
    padding: 12px 15px;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    color: #000;
    background-color: transparent;
    border: 1px solid #C3C3C3;
    border-radius: 6px;
    outline: none;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:focus {
    border: 1px solid #000000 !important;
}

.form-textarea::placeholder {
    color: #999;
}

/* Payment Model Selection Styles */
.payment-model-section {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Hide payment model selection in modification flow */
body.modification-flow .payment-model-section,
.modification-flow .payment-model-section {
    display: none !important;
}

.payment-header {
    color: #000000;
    margin-bottom: 20px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 105%;
}

/* Common Option Styles */
.payment-option {
    padding: 20px;
    cursor: pointer;
    position: relative;
    display: block;
    transition: all 0.2s ease;
}

/* Top Option: Round Top Corners */
.payment-option:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    /* Remove gap */
}

/* Bottom Option: Round Bottom Corners */
.payment-option:last-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-top: -2px;
    /* Pull up to overlap the border of the item above */
}

/* Selected State */
.payment-option.selected {
    border: 2px solid #FFCC00;
    z-index: 2;
}

/* Unselected State */
.payment-option.unselected {
    background-color: #FFFFFF;
    border: 2px solid #000000;
    z-index: 1;
    /* Sit behind selected */
}

/* Hover State for Unselected */
.payment-option.unselected:hover {
    background-color: #FFFFFF;
}

.option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.radio-icon {
    font-size: 20px;
}

.selected .radio-icon {
    color: #000000;
}

.unselected .radio-icon {
    color: #000000;
    font-weight: 400;
}

.option-title {
    color: #000000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}

.option-details ul {
    list-style: none;
    margin-bottom: 20px;
    margin-left: 36px;
    padding: 0;
}

.option-details li {
    color: #000000;
    position: relative;
    margin-bottom: 5px;
    padding-left: 10px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
}

.option-details li::before {
    content: "•";
    position: absolute;
    left: -5px;
    color: #000;
}

.option-price {
    color: #000;
    margin-left: 32px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}

.option-currency {
    font-size: 22px;
    font-weight: 800;
}

/* Responsive styles for payment model */
@media (max-width: 767px) {
    .payment-header {
        font-size: 30px;
        line-height: 35px;
    }

    .option-title {
        font-size: 20px;
        line-height: 105%;
    }

    .option-details li {
        font-size: 16px;
        line-height: 125%;
    }

    .option-price {
        font-size: 22px;
    }
}

/* Step-3 validation styles */
/* .field-error-text {
color: #c62828;
font-family: "Figtree", sans-serif;
font-size: 12px;
margin-top: 6px;
display: block;
min-height: 40px;
line-height: 18px;
/*visibility: hidden;*/
}

*/ .field-error-text.show {
    /*visibility:hidden;*/
}

/*.field-invalid {*/
/*border-color: #FCF7EE !important;*/
/*background-color: #FCF7EE !important;*/
/*}*/

.onvo-disabled-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    padding: 12px;
    border-radius: 6px;
    color: #c62828;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.onvo-disabled-overlay.show {
    display: flex;
}

.onvo-container {
    position: relative;
}

.onvo-container.disabled #onvopay-card-element {
    pointer-events: none;
    opacity: 0.6;
    filter: blur(2px);
}

.onvo-container.disabled {
    position: relative;
}

.payment-section {
    margin-top: 30px;
}

.payment-title {
    color: #000000;
    margin-bottom: 24px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 105%;
}

.input-with-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.input-with-icons .form-input {
    flex: 1;
}

.card-icons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.card-icons.card-icons-hidden {
    display: none !important;
}

.ltm-tab-title {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.card-icon {
    width: 50px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}

.desktop-icons {
    display: flex !important;
    justify-content: center;
}

.mobile-icons {
    display: none;
}

.payment-row {
    display: flex;
    gap: 15px;
}

.payment-row .form-group {
    flex: 1;
}

.terms-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.terms-label {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

.terms-link {
    color: #27171A;
    text-decoration: underline;
    cursor: pointer;
}

.terms-link:hover {
    color: #000000;
}

.pay-button {
    width: 100%;
    padding: 15px 20px;
    background: #000000;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    font-family: "Figtree", sans-serif;
    transition: background-color 0.2s;
}

.pay-button:hover {
    background-color: #27171A;
}

/* Step 4 - Confirmación de Reserva Styles */
.confirmation-header {
    color: #000000;
    margin-bottom: 35px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    line-height: 45px;
    max-width: 376px;
    width: 100%;
}

@media (max-width: 767px) {
    .confirmation-header {
        font-size: 30px;
        line-height: 35px;
    }
}

.reservation-number-box {
    display: flex;
    max-width: 284px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 16px 30px;
    background-color: #000;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    border-radius: 10px;
    margin-bottom: 40px;
}

.reservation-number-box strong {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 105%;
    color: #FFCC00;
}

.confirmation-message {
    color: #000000;
    margin-bottom: 40px;
    max-width: 650px;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    line-height: 130%;
    font-size: 20px;
}

.next-steps-title {
    color: #000000;
    margin-bottom: 8px;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 105%;
}

@media (max-width: 767px) {
    .next-steps .confirmation-message {
        font-size: 18px;
        padding-bottom: 5px;
    }

    .next-steps-list {
        margin-bottom: 30px !important;
    }

    .back-button {
        margin-bottom: 30px !important;
        width: auto !important;
    }
}

.next-steps-title {
    font-family: "Figtree", sans-serif;
    font-size: 35px;
    font-weight: 800;
    color: #000000;
    margin: 10px 0;
}

.next-steps-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.next-steps-list li {
    color: #000000;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
}

.next-steps-list li::before {
    content: "•";
    color: #000000;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    position: absolute;
    left: 0;
}

.back-button {
    padding: 15px 20px;
    background: #FFCC00;
    color: #000;
    border: none;
    border-radius: 50px;
    transition: background-color 0.2s;
    font-family: Lato;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 538px;
    width: 100%;
}

.back-button:hover {
    background-color: #27171A;
}

.payment-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.payment-loader.active {
    display: flex;
}

.payment-loader-content {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
}

.payment-loader-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.payment-loader-message {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #000;
    margin-top: 15px;
}

.payment-section.hidden {
    display: none;
}

/* OnvoPay Card Element Styling */
#onvopay-card-element {
    /* Set all four sides of padding to zero */
    padding: 0 !important;
    /* Optionally, ensure no margin is pushing it out either */
    margin: 0;
}

#onvopay-card-element:focus-within {
    border-color: #000000;
    outline: none;
}

#onvopay-card-element .onvopay-input {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
}

/* CDW Alert Modal */
.cdw-alert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.cdw-alert-content {
    background: #fff;
    max-width: 600px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cdw-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.cdw-alert-header h3 {
    margin: 0;
    font-family: "Figtree", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.cdw-alert-close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.cdw-alert-close:hover {
    color: #000;
}

.cdw-alert-body {
    padding: 20px;
}

.cdw-alert-body p {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.cdw-alert-footer {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.cdw-alert-agree-btn {
    background: #000000;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.cdw-alert-agree-btn:hover {
    background: #cb0024;
}

/* Slide-in Drawer Component */
.info-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.info-drawer {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    max-width: 600px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.info-drawer.active {
    right: 0;
}

.info-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.info-drawer-header h3 {
    margin: 0;
    font-family: "Figtree", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

.info-drawer-close {
    cursor: pointer;
    font-size: 24px;
    color: #000000;
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.info-drawer-close:hover {
    color: #cb0024;
    background-color: transparent !important;
}

.info-drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.info-drawer-body p {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 16px 0;
}

.info-drawer-body p:last-child {
    margin-bottom: 0;
}

/* Info icon styles */
.base-rent-info-icon {
    color: #000;
    font-size: 16px;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.base-rent-info-icon:hover {
    color: #cb0024;
}

@media (max-width: 768px) {
    .info-drawer {
        width: 90%;
        right: -90%;
    }
}


/* 1100px se niche */
@media (max-width: 1100px) {
    /*.step1-vehicle-layout {*/
    /*    flex-wrap: wrap;*/
    /*}*/

    .vehicle-filters-sidebar {
        flex: 1;
    }

    .e-form__indicators__indicator {
        flex-direction: column;
    }

    .e-form__indicators__indicator__label {
        font-size: 14px;
    }

    .e-form__indicators__indicator__number {
        font-size: 15px !important;
    }
}


/* Filtros button next to results count — mobile only */
/* .reservation-results-count-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
} */
.vehicle-filters-toggle-btn {
    display: none;
    /* hidden on desktop */
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    border: 1px solid #959595;
    border-radius: 999px;
    background: #fff;
    color: #434244;
    font-size: 20px;
    font-family: "Figtree", Sans-serif;
    height: 55px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.vehicle-filters-toggle-btn:hover {
    border-color: #111;
}

.vehicle-filters-toggle-btn svg {
    flex-shrink: 0;
}

/* Mobile chrome hidden on desktop — desktop sidebar stays as before */
.vehicle-filters-mobile-header,
.vehicle-filters-mobile-footer {
    display: none;
}

.vehicle-filters-overlay {
    display: none;
}

/* Mobile: right slide-in panel */
@media (max-width: 900px) {


    .vehicle-filters-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .vehicle-filters-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .vehicle-filters-sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0 !important;
        border: 0 !important;
        border-left: 1px solid #ececec !important;
        padding: 40px 25px 60px;
        z-index: 999999;
        display: flex !important;
        flex-direction: column;
        background: #fff;
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: hidden;
        font-family: "Figtree", Sans-serif;
    }

    .vehicle-filters-sidebar.is-open {
        transform: translateX(0);
    }

    .vehicle-filters-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
        flex-shrink: 0;
    }

    .vehicle-filters-mobile-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

    .vehicle-filters-close-btn {
        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        color: #333;
        padding: 0 4px;
    }

    .vehicle-filters-mobile-body {
        padding: 12px 18px 8px;
        overflow-y: auto;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }

    .vehicle-filters-mobile-footer {
        display: block;
        padding: 12px 18px 18px;
        border-top: 1px solid #f0f0f0;
        flex-shrink: 0;
        background: #fff;
    }

    .vehicle-filters-apply-btn {
        width: 100%;
        border: 0;
        border-radius: 999px;
        background: #f5c400;
        color: #111;
        font-size: 18px;
        font-weight: 700;
        padding: 14px 16px;
        cursor: pointer;
    }

    body.vehicle-filters-open {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .reservation-hero-banner .carousel {
        height: 350px;
    }

    .info-section {
        margin-bottom: 20px;
    }

    .info-section-title {
        font-size: 28px;
    }

    .info-block p {
        gap: 4px;
    }

    .reservation-details-block {
        /* padding: 0 !important; */
    }

    .reservation-details-block,
    .reservation-charges-block {
        margin-bottom: 20px;
    }

    .features-list {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .total-label {
        font-size: 16px;
    }

    .total-value {
        font-size: 20px;
    }

    .modify-button-outline {
        margin-top: 12px;
    }
}

/*** step mobile css ***/
/* Tablet */
@media (max-width: 1024px) {
    .e-form__indicators__indicator__label {
        font-size: 13px;
    }

}

/* Mobile - Android & iPhone */
@media (max-width: 767px) {

    .e-form__indicators {
        /*display: flex !important;*/
        flex-wrap: nowrap !important;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        gap: 0;
    }

    .e-form__indicators__indicator {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .e-form__indicators__indicator__number {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 14px;
        line-height: 28px;
        margin: 0 auto;
    }

    .e-form__indicators__indicator__label {
        font-size: 14px !important;
        line-height: 1.2;
        margin-top: 6px;
        text-align: center;
        font-family: "Figtree", Sans-serif;
        white-space: normal !important;
        overflow-wrap: anywhere;
        white-space: nowrap !important;
        word-break: normal;
    }


    /*production Card css*/
    .protection-card {
        border-radius: 15px;
        padding: 30px;
        border: 1px solid #D4D4D4;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), box-shadow 0.3s ease;
        will-change: transform;
        animation: elasticDrop 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
        cursor: pointer;
    }
}

/* Small iPhone / Android screens */
@media (max-width: 380px) {

    .e-form__indicators__indicator__number {
        width: 25px;
        height: 25px;
        min-width: 25px;
        font-size: 12px;
        line-height: 25px;
    }

    .e-form__indicators__indicator__label {
        font-size: 9px !important;
        line-height: 1.15;
        margin-top: 5px;
    }



    .protection-card {
        border-radius: 15px;
        padding: 30px;
        border: 1px solid #D4D4D4;
        width: 312px;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), box-shadow 0.3s ease;
        will-change: transform;
        animation: elasticDrop 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
        cursor: pointer;
    }

    .protection-select-btn {
        width: 250px;
    }
}

.payment-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.payment-loader.active {
    display: flex;
}

.payment-loader-content {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
}

.payment-loader-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #EF0730;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.payment-loader-message {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #000;
    margin-top: 15px;
}

.payment-section.hidden {
    display: none;
}

.protection-without-section {
    margin-bottom: 130px;
}

.protection-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.protection-icon.grey {
    opacity: 0.3;
    filter: grayscale(100%);
}



.protection-feature {
    display: flex;
    flex-grow: 1;
    align-items: flex-start;
   font-family: "Figtree", Sans-serif;
    font-size: 16px;
    gap: 5px;
    color: #000000;
    line-height: 1.5;
}

.protection-feature-icon {
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
}

.field-error-text {
    color: #c62828;
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    margin-top: 6px;
    display: block;
    min-height: 40px;
    line-height: 18px;
    visibility: hidden;
}

.field-error-text.show {
    visibility: visible;
}

.terms-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.terms-label {
   font-family: "Figtree", Sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 100%;
}


a.terms-link {
    color: #000000;
    text-decoration: underline;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.onvo-disabled-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: none;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    z-index: 10;
    padding: 12px 0;
    border-radius: 6px;
    color: #c62828;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.onvo-disabled-overlay.show {
    display: flex;
}

.onvo-container {
    position: relative;
}

.onvo-container.disabled #onvopay-card-element {
    pointer-events: none;
    opacity: 0.6;
    filter: blur(2px);
}

.onvo-container.disabled {
    position: relative;
}

/* OnvoPay Card Element Styling */
#onvopay-card-element {
    /* Set all four sides of padding to zero */
    padding: 0 !important;
    /* Optionally, ensure no margin is pushing it out either */
    margin: 0;
}

#onvopay-card-element:focus-within {
    border-color: #EF0730;
    outline: none;
}

#onvopay-card-element .onvopay-input {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
}

/* CDW Alert Modal */
.cdw-alert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.cdw-alert-content {
    background: #fff;
    max-width: 600px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cdw-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.cdw-alert-header h3 {
    margin: 0;
    font-family: "Figtree", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.cdw-alert-close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.cdw-alert-close:hover {
    color: #000;
}

.cdw-alert-body {
    padding: 20px;
}

.cdw-alert-body p {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.cdw-alert-footer {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.cdw-alert-agree-btn {
    background: #EF0730;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.cdw-alert-agree-btn:hover {
    background: #cb0024;
}


/* Slide-in Drawer Component */
.info-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.info-drawer {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    max-width: 600px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.info-drawer.active {
    right: 0;
}

.info-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.info-drawer-header h3 {
    margin: 0;
    font-family: "Figtree", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.info-drawer-close {
    cursor: pointer;
    font-size: 24px;
    color: #000;
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.info-drawer-close:hover {
    color: #cb0024;
    background-color: transparent !important;
}

.info-drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.info-drawer-body p {
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0px;
}

.info-drawer-body p:last-child {
    margin-bottom: 0;
}

/* Info icon styles */
.base-rent-info-icon {
    color: #EF0730;
    font-size: 16px;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.base-rent-info-icon:hover {
    color: #cb0024;
}

@media (max-width: 768px) {
    .info-drawer {
        width: 90%;
        right: -90%;
    }
}

button#payment-submit-button {
    font-family: 'Lato';
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    max-width: 758px;
    width: 100%;
    background: #007ac3;
    border: none;
    padding: 15px 20px;
    height: 52px;
    border-radius: 100px;
}

.vehicle-filters-toggle-btn {
    display: none !important;
}

.vehicle-filters-apply-wrap {
    display: none;
}

button#vehicle-filters-apply-btn {
   background: #007ac3;
    color: #fff;
    font-size: 16px;
    border: none;
    font-family: "Figtree", Sans-serif;
    border-radius: 20px;
    border-radius:999px;
}

button#vehicle-filters-apply-btn:hover {
    background: #c36;
    color: #FFF;
    font-size: 16px;
    border: none;
    font-family: "Figtree", Sans-serif;
}



@media (max-width: 767px) {
    #card-icons-wrap {
        top: 91px;
        right: 10px;
        gap: 3px;
    }

    #card-icons-wrap .card-icon {
        width: 24px;
        height: 16px;
    }
}

/* Mobile & Tablet — Filtros button ONLY on Step 1 */
@media (max-width: 767px) {

    .vehicle-filters-toggle-btn {
        display: none !important;
    }

    /* Show only when Step 1 (hide-results-count is removed on step 1) */
    /*.reservation-results-header-main:not(.hide-results-count) .vehicle-filters-toggle-btn {*/
    /*    display: inline-flex !important;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*    gap: 8px;*/
    /*    padding: 12px 18px;*/
    /*    background: #FFF;*/
    /*    color: #000;*/
    /*    border: 1px solid #c3c3c3;*/
    /*    border-radius: 22px;*/
    /*    font-family: "Figtree", Sans-serif;*/
    /*    font-size: 18px;*/
    /*    font-weight: 600;*/
    /*    cursor: pointer;*/
    /*    margin-bottom: 15px;*/
    /*}*/

    .vehicle-filters-toggle-btn img {
        width: 18px;
        height: 18px;
    }

    /* Right side drawer */
    .vehicle-filters-sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        left: auto !important;
        bottom: 0;
        width: 100% !important;
        max-width: 100%;
        height: 100dvh;
        background: #fff;
        z-index: 100002;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;

        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    }

    body.vehicle-filters-open .vehicle-filters-sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    /* Background overlay */
    .vehicle-filters-overlay {
        position: fixed !important;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100001;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    body.vehicle-filters-open .vehicle-filters-overlay {
        opacity: 1;
        visibility: visible;
    }

    .vehicle-filters-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .vehicle-filters-close-btn {
        background: transparent;
        border: none;
        font-size: 30px;
        cursor: pointer;
        line-height: 1;
        color: #000;
    }


    .offert-title .elementor-shortcode {
         font-family: "Figtree", Sans-serif;
        font-size: 40px;
        font-weight: 700;
        line-height: 45px;
        color: #000000;
    }

    .vehicle-filters-apply-wrap {
        /* position: sticky; */
        bottom: 0;
        background: #fff;
        padding: 15px 0 5px;
    }

    .vehicle-filters-apply-btn {
        width: 100%;
    }
}

/* Desktop par mobile header hide */
@media (min-width: 768px) {
    .vehicle-filters-mobile-header {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .vehicle-filters-apply-wrap {
        display: block !important;
    }
}

/* reservation-flow-header-css */

/* =========================================================
DEFAULT: HIDE NORMAL SITE HEADER DURING RESERVATION FLOW
========================================================= */

body.reservation-flow-active #tahefobu-header,
body.reservation-flow-active #tahefobu-header.turbo-header-template,
body.reservation-flow-active #tahefobu-header.tahefobu-ready,
body.reservation-flow-active .turbo-header-template,
body.reservation-flow-active div#tahefobu-header,
body.reservation-flow-active [data-elementor-post-type="tahefobu_header"],
body.reservation-flow-active .elementor-5594[data-elementor-post-type="tahefobu_header"],
body.reservation-flow-active .elementor-location-header,
body.reservation-flow-active header.elementor-location-header,
body.reservation-flow-active header.elementor-5203,
body.reservation-flow-active .elementor-5203.elementor-location-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
STEP 4 / STEP 5
SHOW NORMAL SITE HEADER
========================================================= */

body.reservation-normal-header-active #tahefobu-header,
body.reservation-normal-header-active #tahefobu-header.turbo-header-template,
body.reservation-normal-header-active #tahefobu-header.tahefobu-ready,
body.reservation-normal-header-active .turbo-header-template,
body.reservation-normal-header-active div#tahefobu-header,
body.reservation-normal-header-active [data-elementor-post-type="tahefobu_header"],
body.reservation-normal-header-active .elementor-5594[data-elementor-post-type="tahefobu_header"],
body.reservation-normal-header-active .elementor-location-header,
body.reservation-normal-header-active header.elementor-location-header,
body.reservation-normal-header-active header.elementor-5203,
body.reservation-normal-header-active .elementor-5203.elementor-location-header {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    margin: initial !important;
    padding: initial !important;
}


/* =========================================================
COMPACT RESERVATION HEADER
========================================================= */

.reservation-flow-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Lato', sans-serif;
}


/* =========================================================
HIDE RESERVATION HEADER ON STEP 4 / STEP 5
========================================================= */

body.reservation-normal-header-active .reservation-flow-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
ADMIN BAR
========================================================= */

body.admin-bar .reservation-flow-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .reservation-flow-header {
        top: 46px !important;
    }
}


/* =========================================================
BODY SPACE FOR RESERVATION HEADER
========================================================= */

body.reservation-flow-active {
    padding-top: 72px !important;
    margin-top: 0 !important;
}

/*body.admin-bar.reservation-flow-active {*/
/*    padding-top: 104px !important;*/
/*}*/

@media screen and (max-width: 782px) {

    body.admin-bar.reservation-flow-active {
        padding-top: 118px !important;
    }

}


/* =========================================================
REMOVE LEFTOVER THEME / ELEMENTOR HEADER SPACE
========================================================= */

body.reservation-flow-active #page,
body.reservation-flow-active #content,
body.reservation-flow-active .site-content,
body.reservation-flow-active .site-main,
body.reservation-flow-active .elementor,
body.reservation-flow-active .elementor-location-header+*,
body.reservation-flow-active .elementor>.elementor-section:first-child,
body.reservation-flow-active .elementor>.elementor-top-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
FONT
========================================================= */
/* 
body,
.elementor-widget,
.elementor-heading-title {
font-family: 'Lato', sans-serif !important;
} */


/* =========================================================
RESERVATION HEADER INNER
========================================================= */

.rfh-inner {
    max-width: 1392px;
    margin: 0 auto;
    padding: 14px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* =========================================================
LOGO
========================================================= */

.rfh-logo {
    flex-shrink: 0;
}

.rfh-logo img {
    height: 36px;
    width: auto;
    display: block;
}


/* =========================================================
TRIP DATA
========================================================= */

.rfh-trip-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.rhf-location-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}


/* =========================================================
PICKUP / DROPOFF
========================================================= */

.rfh-leg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 280px;
}

.rfh-leg-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.rfh-pin {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #FFCC00;
}


/* =========================================================
LOCATION
========================================================= */

.rfh-location {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
}


/* =========================================================
DATE / TIME
========================================================= */

.rfh-datetime {
    color: #808285;
    padding-left: 0;
    white-space: nowrap;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
}


/* =========================================================
DIVIDER
========================================================= */

.rfh-leg-divider {
    width: 1px;
    height: 36px;
    background: #e0e0e0;
    margin: 0 12px;
    flex-shrink: 0;
}


/* =========================================================
EDIT BUTTON
========================================================= */

.rfh-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    margin-left: 8px;
}

.rfh-edit:hover {
    background: #f5f5f5;
}

.rfh-edit svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
TOTAL
========================================================= */

.rfh-total {
    flex-shrink: 0;
    text-align: left;
    border-radius: 10px;
    padding: 7px 10px;
    /* width: 178px; */
    white-space: nowrap;
    border: 1px solid #000;
    box-sizing: border-box;
}

.rfh-total-label {
    display: block;
    color: #808285;
    margin-bottom: 5px;
    font-family: Lato;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
}

.rfh-total strong {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
}


/* =========================================================
SELECTED VEHICLE (header)
========================================================= */

.rfh-vehicle {
    flex-shrink: 0;
    /* display: none; */
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 48px;
    margin: 0 12px;
    overflow: hidden;
}

.rfh-vehicle.is-visible {
    display: flex;
}

.rfh-vehicle img {
    max-width: 88px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.rfh-vehicle-placeholder {
    width: 48px;
    height: 28px;
    border-radius: 4px;
    background: #f0f0f0;
    display: none;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

    .rfh-leg {
        max-width: 200px;
    }

    .rfh-location {
        font-size: 14px !important;
    }

    .rfh-datetime {
        font-size: 12px !important;
    }

    .rfh-total {
        width: 120px;
        padding: 6px 8px;
    }



    .rfh-total-label {
        font-size: 12px;
    }
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

    /* =========================
MOBILE STICKY HEADER
========================= */

    .reservation-flow-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #fff !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.admin-bar .reservation-flow-header {
        top: 46px !important;
    }


    /* =========================
BODY SPACE
========================= */

    body.reservation-flow-active {
        padding-top: 120px !important;
    }

    body.admin-bar.reservation-flow-active {
        padding-top: 166px !important;
    }


    /* =========================
MAIN HEADER
========================= */

    .rfh-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo total"
            "trip trip";
        align-items: center;
        gap: 0;
        /*padding: 10px 18px 0 18px;*/
        box-sizing: border-box;
        width: 100%;
    }


    /* =========================
LOGO
========================= */

    .rfh-vehicle {
        display: none !important;
        /* keep header simple on mobile; show only on desktop/tablet */
    }

    .rfh-logo {
        grid-area: logo;
        display: flex;
        align-items: center;
        height: 64px;
        margin-bottom: 10px;
    }

    .rfh-logo img {
        display: block;
        width: auto;
        height: 43px;
        max-width: 120px;
    }


    /* =========================
LOCATION WRAPPER
========================= */

    .rhf-location-data {
        display: contents;
    }


    /* =========================
TOTAL BOX
========================= */

    .rfh-total {
        grid-area: total;
        padding: 5px 13px;
        border: 1px solid #000;
        border-radius: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        white-space: nowrap;
    }

    .rfh-total-label {
        display: block;
        color: #808285;
        margin-bottom: 5px;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
    }

    /* =========================
TRIP ROW
========================= */

    .rfh-trip-data {
        grid-area: trip;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns:
            minmax(0, 1fr) 1px minmax(0, 1fr) 32px;
        align-items: center;
        column-gap: 23px;
        padding-top: 16px;
        border-top: 1px solid #eeeeee;
        box-sizing: border-box;
    }


    /* =========================
PICKUP / DROPOFF
========================= */

    .rfh-leg {
        width: 100%;
        max-width: none;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .rfh-leg-pickup {
        grid-column: 1;
    }

    .rfh-leg-dropoff {
        grid-column: 3;
    }

    .rfh-leg-top {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
    }


    /* =========================
LOCATION TEXT
========================= */

    .rfh-location {
        display: block;
        width: 100%;
        min-width: 0;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* =========================
DATE / TIME
========================= */

    .rfh-datetime {
        display: block;
        padding-left: 0;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        color: #808285;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* =========================
VERTICAL DIVIDER
========================= */

    .rfh-trip-data>.rfh-leg-divider {
        width: 1px;
        height: 43px;
        margin: 0;
        background: #999;
        display: block;
    }

    .rfh-trip-data>.rfh-leg-divider:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .rfh-trip-data>.rfh-leg-divider:nth-of-type(4) {
        display: none;
    }


    /* =========================
EDIT BUTTON
========================= */

    .rfh-edit {
        grid-column: 4;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        flex-shrink: 0;
        align-self: center;
    }

    .rfh-edit:hover {
        background: transparent;
    }

    .rfh-edit img {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .rfh-edit svg {
        width: 24px;
        height: 24px;
    }


    /* =========================
PREVENT HORIZONTAL SCROLL
========================= */

    html,
    body {
        overflow-x: hidden !important;
    }
}



/* Full height dropdown on tablet & mobile */
@media (max-width: 1024px) {

    .elementor-nav-menu--dropdown {
        height: calc(100vh - 30px) !important;
        /* 		max-height: 100vh !important; */
        overflow-y: auto !important;
        z-index: 99999;
        padding-bottom: 50px;
    }
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider,
#moove_gdpr_cookie_modal .cookie-switch .slider,
#moove_gdpr_cookie_modal .switch .cookie-slider,
#moove_gdpr_cookie_modal .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFCC00 !important;
    transition: .4s;
    margin: 0;
    padding: 0;
}

#moove_gdpr_cookie_modal .cookie-switch .gdpr-sr-disable,
#moove_gdpr_cookie_modal .switch .gdpr-sr-disable {
    display: block;
    color: #000 !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
    font-size: 14px;
    line-height: 20px;
    color: #000 !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 150px;
    padding: 8px 30px;
    transition: all .3s ease;
    border: none;
    display: inline-block;
    margin: 3px 4px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton.moove-gdpr-infobar-settings-btn,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.moove-gdpr-infobar-settings-btn {
    background: #ffcc00 !important;
    color: #000 !important;
    box-shadow: none !important;
    opacity: unset !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    min-width: auto;
    padding: 10px 15px;
    font-size: 16px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    background-color: #ffcc00 !important;
    color: #000 !important;
    border-color: #ffcc00 !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton:hover {
    background-color: #000 !important;
    color: #FFF !important;
    border-color: #000 !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close i,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {
    background-color: #ffcc00 !important;
    color: #000 !important;
    border: 1px solid #ffcc00 !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton.focus-g,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:focus,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:hover,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.focus-g,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:focus,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
    color: #FFCC00 !important;
    background-color: #000 !important;
}


.body-scroll-locked {
    overflow: hidden !important;
    height: 100vh;
}

.scroll-locked {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.elementor-81 .elementor-element.elementor-element-97af57b {
    --e-nav-menu-horizontal-menu-item-margin: 0 !important;
}


#nav_menu li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item.current-menu-item>a,
#nav_menu li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item.current_page_item>a {
    font-weight: 700 !important;
    transition: all 0.3s ease;
     smooth transition 
}

/* Sub Menu Styling0 */
.menu-item-has-children {
    position: relative;
    cursor: pointer;
}

.sub-menu {
    background: #fff;
    list-style: none;
    position: absolute;
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease;
    pointer-events: none;
    display: block !important;
    min-width: 14rem;
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0;
}

.menu-item-has-children.menu-open>.sub-menu {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
    padding: 5px 0;
}

.sub-menu>li {
    padding: 0;
    border: none !important;
}

.elementor-sub-item {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    border-inline-start: none !important;
}

.elementor-sub-item:hover {
    color: #EF0730;
    background-color: transparent;
    transform: scale(1.02);
}

/* === GTranslate Custom Styling === */
/* Main wrapper */
/* ===== GTranslate Custom Select ===== */

.gtranslate_wrapper {
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*position: relative;*/
    /*max-width: 117px;*/
    /*width: 100%;*/
    height: 38px;
    /*padding: 0 28px;*/
    /*border: 1px solid #777;*/
    /*border-radius: 6px;*/
    /*box-sizing: border-box;*/
    /*direction: ltr !important;*/
    /*vertical-align: middle;*/
        display: inline-flex;
    align-items: center;
    justify-content: center;
        border: 1px solid #007ac3;
    border-radius: 6px;
    padding: 5px 10px;
    position: relative;
    cursor: pointer;
}

/* Globe icon */
.gtranslate_wrapper::before {
    content: "";
    background: url('https://thriftydev.loymarkservices.com/wp-content/uploads/2026/10/Map-1.png') no-repeat center;
    background-size: 15px 15px;
    width: 17px;
    height: 17px;
    display: block;
    flex-shrink: 0;
    margin-right: 6px;
}

/* Select */

.gt_selector {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    /*min-width: 120px;*/
    
    padding: 8px 30px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    text-align: left;
    text-align-last: left;
    /* selected text left align */
    cursor: pointer;
    box-sizing: border-box;
}

.gtranslate_wrapper select,
.gtranslate_wrapper .gt_selector {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 1;
    width: 100%;
    /*height: 100%;*/
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
        background: transparent;
    color: #007ac3;;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 36px;
    cursor: pointer;
    box-shadow: none !important;
    text-align: left !important;
    text-align-last: left !important;
    direction: ltr !important;
}

/* Custom arrow */
.gtranslate_wrapper::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 53% !important;
    transform: translateY(-50%) !important;
    width: 19px !important;
    height: 23px !important;
    background-image: url(https://thriftydev.loymarkservices.com/wp-content/uploads/2026/10/Arrow.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
}

/* Options (open dropdown) */
.gtranslate_wrapper select option {
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    text-align: left !important;
    direction: ltr !important;
}

/* Hover / selected option */
.gtranslate_wrapper select option:hover,
.gtranslate_wrapper select option:checked {
    background: #1a73e8 !important;
    color: #fff !important;
}

/* No hover shadow */
.gtranslate_wrapper:hover {
    box-shadow: none !important;
}

/* Change COLOR for TITLES of Icon Box*/
#location .elementor-icon-box-wrapper:hover .elementor-icon-box-title,
.linkCard:hover .elementor-icon-box-wrapper .elementor-icon-box-title {
    color: #27171A !important;
    /* Consider removing !important */
}

/* Change FILL for ICONS (SVG Paths) of Icon Box*/
#location .elementor-icon-box-wrapper:hover .elementor-icon svg path,
.linkCard:hover .elementor-icon-box-wrapper .elementor-icon svg path {
    fill: #27171A !important;
    /* Consider removing !important */
}

.ltm-btn-3 img,
.ltm-btn-3 .btn-3 {
    transition: opacity 0.3s ease;
}

.ltm-btn-3:hover img,
.ltm-btn-3:hover .btn-3 {
    opacity: 0.7;
}

.linkCard:hover>.carros-img {
    transform: scale(1.05);
}

.reserva-img img,
.reserva-title,
.reserva-arrow img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.reserva-card:hover .reserva-img img,
.reserva-card:hover .reserva-title,
.reserva-card:hover .reserva-arrow img {
    opacity: 0.7;
}

.reserva-card:hover .reserva-arrow img {
    transform: translateX(5px);
}

.reserva-card a:hover .elementor-widget-image img,
.reserva-card a:hover .elementor-heading-title {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.reserva-card a .elementor-element-5dbf612 img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.reserva-card a:hover .elementor-element-5dbf612 img {
    transform: translateX(5px);
}

/* Our Icon Hover Color */
.elementor-icon:hover svg path {
    fill: #27171A !important;
}

.map-box {
    position: relative;
    min-height: 100%;
}

.map-box .elementor-custom-embed,
.map-box .elementor-widget-google_maps iframe {
    height: 100% !important;
}

/* Discount Section on Home */
@media (min-width: 1025px) and (max-width: 1920px) {
    .discountCard h2 {
        height: 75px;
    }

    .map-box {
        position: relative;
        min-height: 100%;
    }

    .map-box .elementor-custom-embed,
    .map-box .elementor-widget-google_maps iframe {
        height: 100% !important;
    }
}

/* Vehicle Card Drive type Clip */
.arrow-button {
    /* Dimensions and Color */
    width: 65px;
    height: 40px;
    background-color: #FFEB66;
    /* Similar yellow from your image */

    /* The Secret Sauce: Clip Path */
    /* This defines the points of the polygon */
    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
    border-radius: 4px;
}

/* =========================
   flota page Mobile / iPad Filter Panel
   ========================= */
/* =========================
   Mobile / iPad Filter Panel
   ========================= */
.vf-mobile-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999999;
    transition: right 0.35s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vf-mobile-panel.active {
    right: 0;
}

/* Overlay */
.vf-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.vf-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header of panel */
.vf-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.vf-panel-header h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
   font-family: "Figtree", Sans-serif;
    color: #000;
}

.vf-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #000;
    padding: 0;
}

/* Content */
.vf-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Footer */
.vf-panel-footer {
    padding: 15px 20px 30px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.vf-apply-btn {
    width: 100%;
   background: #007AC3;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
   font-family: "Figtree", Sans-serif;
    cursor: pointer;
}

/* Filter styles inside panel */
.vf-mobile-panel .vf-filter-group {
    margin-bottom: 28px;
}

.vf-mobile-panel .vf-filter-heading {
    font-size: 22px !important;
    margin-bottom: 25px !important;
    font-weight: 700 !important;
     font-family: "Figtree", Sans-serif;
    line-height: 105%;
}

/* Hide header when panel is open */
body.vf-filters-open .main-header-container {
    display: none !important;
}

/* Only for Mobile + iPad */
@media (min-width: 1025px) {

    #filtros-mobile,
    .vf-mobile-panel,
    .vf-mobile-overlay {
        display: none !important;
    }
}

.vf-sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.elementor-element.elementor-element-52929db.e-con-full.e-flex.e-con.e-child {
    padding: 0;
}

.vf-filter-group .vf-filter-heading {
    font-size: 24px;
    font-weight: 500;
    font-family: "Figtree", Sans-serif;
    margin-bottom: 25px;
    color: #000;
}

.vf-filter-group .vf-categories {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 10px;
}


.vf-cat-btn,
.vf-pass-btn,
.vf-lug-btn {
    background: transparent;
    color: #959595;
    border: 1px solid #959595;
    padding: 15px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vf-cat-btn.active,
.vf-pass-btn.active,
.vf-lug-btn.active {
    background: #007AC3;
    color: #FFF;
    font-size: 16px;
    border-color: #007AC3;
    font-weight: 600;
    font-family: "Figtree", Sans-serif;
}

.vf-cat-btn:hover,
.vf-pass-btn:hover,
.vf-lug-btn:hover {
    background: #007AC3;
    color: #FFF;

}

/* end flota sidebar*/




/* Vehicle Detail Card Features Styling */
.vehicle-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 15px;
}

.driveType h4 {
    font-size: 18px !important;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-icon {
    width: 24px;
    height: 24px;
}

.feature-label {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}

.elementor-menu-toggle {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.vehicle_cards {
    width: 100%;
    max-width: 380px;
}

/* Filter Buttons Styling */
.filter-button a {
    cursor: pointer;
}

.filter-button:hover a,
.filter-button.active-filter a {
    background-color: #F36C3D00;
    fill: #EF0730 !important;
    color: #EF0730 !important;
    border-color: #EF0730 !important;
}

.faqs svg path {
    fill: #EF0730 !important;
}

.inner-icon svg path {
    fill: #EF0730 !important;
}

/* New Suhaib */

/* Tabs and Buttons will be Dropdown on Mobile  */

@media (max-width: 767px) {


    .gtranslate_wrapper select,
    .gtranslate_wrapper .gt_selector {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        outline: none !important;
        background: transparent !important;
        color: #000;
        font-family: 'Lato', sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 36px;
        cursor: pointer;
        box-shadow: none !important;
        text-align: center !important;
        text-align-last: center !important;
        direction: ltr !important;
    }

    /* Movile Menu Dropdown */
    #mob_Nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
        height: 100vh;
        padding: 0 20px;
    }




    #menu-2-e659837>li:nth-last-child(2) {
        border: none !important;
        /* or remove any divider style */
    }

    /* 1. HIDE NAVIGATION ELEMENTS (Both original Tabs and the custom Button container) */
    .e-n-tabs-heading,
    /* Hides Elementor Tabs headers */
    .filter-button-container

    /* Hides your custom filter buttons container */
        {
        display: none !important;
    }

    /* 2. DISPLAY AND STYLE THE CUSTOM DROPDOWN WRAPPER */
    .mobile-dropdown-wrapper {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 3. STYLE THE ACTUAL SELECT ELEMENT (Default: Grey Text, Black Arrow, Blue Border) */
    #mobile-tabs-dropdown {
        width: 100%;
        padding: 6px 12px;
        margin-top:16px;
        font-size: 16px;
        line-height: 1.5;
        color: #959595;
        /*border: 1px solid #007a03;*/
        border-radius: 6px;
        background-color: #fff;
        cursor: pointer;

        /* Remove default appearance */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        /* ADD THE BLACK ARROW SVG (fill='%23000000') */
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-position: right 17px center;
        /* Updated to match 17px padding */
        background-size: 16px 16px;
    }

    /* 4. SET TEXT COLOR AND BORDER COLOR ON FOCUS/SELECT (Red) */
    #mobile-tabs-dropdown:focus,
    #mobile-tabs-dropdown:active {
        border-color: #007ac3;
        color: #007ac3; 
        outline: none;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

    /* .gtranslate_wrapper {
padding: 8px 20px;
width: 100%;
margin: 20px 0px;
} */
    #menu-2-e659837>li:nth-last-child(2) {
        border: none !important;
        /* or remove any divider style */
    }

    /* Tab Menu Dropdown */
    #mob_Nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
        padding: 0 65px;
    }

    .map-box {
        position: relative;
        min-height: 500px;
    }

}

/* Mobile */
@media (min-width: 768px) {

    /* Ensure the dropdown wrapper is hidden on desktop/tablet */
    .mobile-dropdown-wrapper {
        display: none !important;
    }


}

/* Reservastion Step Form */
#reservation_form .e-form__indicators {
    border: 1px solid #EF0730;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#reservation_form .e-form__indicators__indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

#reservation_form .e-form__indicators__indicator__separator {
    flex-grow: 1;
    height: 1px;
    background-color: #4B4E53;
    margin: 0 5px;
}

#reservation_form .e-form__indicators__indicator__label {
    white-space: nowrap;
    text-align: left;
    font-size: 20px;
    font-weight: 800;
    color: #4B4E53;
}

/* Active State */
#reservation_form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
    border-color: #EF0730;
    color: #EF0730;
}

#reservation_form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
    color: #EF0730;
}

/* --- COMPLETED STATE STYLING --- */

/* 1. Target the Completed Label (Set color to Red) */
#reservation_form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label {
    color: #EF0730;
    /* Set label text color to Red */
}

/* 2. Style the Completed Circle (Red Background & Custom Icon) */
#reservation_form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
    /* Set the background color */
    background-color: #EF0730;
    /* BRedlue Background */
    border-color: #EF0730;
    /* Red Border */
    color: transparent;
    /* Hide the original number (1, 2, 3...) */

    /* --- CRITICAL: Add your custom icon as a background image --- */
    background-image: url('https://hertzdev.loymarkservices.com/wp-content/uploads/2025/10/check-fill.png');
    /* <--- Replace with your icon's URL */
    background-size: 60%;
    /* Adjust size of the icon inside the circle (e.g., 60-70%) */
    background-position: center center;
    /* Center the icon */
    background-repeat: no-repeat;
    /* Ensure icon doesn't repeat */

    /* Ensure it remains a perfect circle (from previous CSS, make sure it's applied) */
    /* border-radius: 50%; */
}

/* Tabs Buttons Styling  for Reservation*/
#reservation_form .e-n-tabs-heading .e-n-tab-title {
    font-family: 'Lato';
    font-weight: 600;
    font-size: 18px;
    border: 1px solid #4B4E53 !important;
    color: #4B4E53 !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    transition: all 0.3s;
}

/* Style for the HOVER state */
#reservation_form .e-n-tabs-heading .e-n-tab-title:not([aria-selected="true"]):hover {
    border-color: #EF0730 !important;
    color: #EF0730 !important;
    cursor: pointer !important;
}

/* Style for the ACTIVE tab (The one with the 'All' text selected) */
#reservation_form .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] {
    border-color: #EF0730 !important;
    color: #EF0730 !important;
}


/* ✅ Show 4 slides above 1024px (desktop) */
@media (min-width: 1025px) {
    .elementor-1477 .elementor-element.elementor-element-abc64e0 {
        --swiper-slides-to-display: 4 !important;
    }
}

/* Modification Page */
.modify-reservation-details-section {
    display: none;
}

/* Onvo Payment Form Button Style */
.css-1vbl1fs {
    background-color: #ef0730 !important;
}

/* Offers Section Grid Styling  */

/* Base Grid for Offers */
.offers-grid .elementor-loop-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    width: 100%;
}

@media screen and (min-width: 1200px) and (max-width: 1370px) {
    .offers-grid .elementor-loop-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
        width: 100%;
    }
}

/* Logic for 1 Item: Center using Flex */
.offers-grid .elementor-loop-container.has-1-item {
    display: flex !important;
    justify-content: center !important;
    align-items: start !important;
}

.offers-grid .elementor-loop-container.has-1-item .e-loop-item {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
}

/* Logic for 2 Items: Centered Grid */
.offers-grid .elementor-loop-container.has-2-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    max-width: calc(66.666% + 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 20px;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .offers-grid .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .offers-grid .elementor-loop-container.has-1-item .e-loop-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .offers-grid .elementor-loop-container.has-2-items {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {

    .offers-grid .elementor-loop-container,
    .offers-grid .elementor-loop-container.has-2-items {
        grid-template-columns: 1fr !important;
    }

    .offers-grid .elementor-loop-container.has-1-item .e-loop-item {
        flex: 0 0 100% !important;
        max-width: 95% !important;
    }
}

/* header menu css Hertz */
/* header.elementor.elementor-5203.elementor-location-header {
position: sticky;
top: 0;
z-index: 99999;
background: #fff;
} */

.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    display: flex;
    flex-wrap: unset !important;
}

/*.main-header-container .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover {*/
/*    padding: 0 !important;*/
/*}*/

.main-header-container>.e-con-inner {
    gap: 78px;
    padding: 0x 25px;
}

.header-menu a.elementor-item {
    padding: 0;
}

.header-menu ul#menu-1-c193d1a {
    gap: 25px;
}

@media (max-width: 1200px) {
    .header-menu a.elementor-item {
        padding: 18px 25px;
    }

    .elementor-nav-menu--dropdown .elementor-nav-menu {
        margin-top: 40px;
    }

    .menu-item-has-children.menu-open>.sub-menu {

        padding: 0;
        width: 100%;
        height: auto !important;
        position: relative;
        border-radius: 0;
        box-shadow: none;
        padding-left: 15px;
        padding-bottom: 18px;
    }
}

/* blog page css */
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    margin-top: 40px;
position: absolute !important;
}

.custom-blog-section .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #000 !important;
    width: 13px;
    height: 13px;
}

.swiper-pagination {
    position: relative !important;
    bottom: -5px !important;
}

.custom-blog-section {
    max-width: 1300px !important;
    padding-block: 30px 70px;
    font-family: "Figtree", sans-serif;
}

.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* .blog-slider .swiper-slide, .blog-slider-standalone .swiper-slide {
height: auto;
display: flex;
flex-direction: column;
width:min(416px, calc(353px + (100vw - 1150px) * 0.13))!important;
max-width: 85vw;
} */
.blog-slider .swiper-slide,
.blog-slider-standalone .swiper-slide {
    display: flex;
    flex-direction: column;
    max-width: 85vw;
    width: clamp(353px, calc(353px + (100vw - 375px) * 0.136), 416px) !important;
}

/* .blog-card {
background: #FFF !important;
height: auto !important;
border: 1px solid #D4D4D4 !important;
border-radius: 16px;
box-shadow: unset !important;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
flex: 1;
max-width: min(416px, calc(353px + (100vw - 1150px) * 0.13))!important;
width: 100%;
} */
.blog-card {
    background: #FFF !important;
    border-radius: 16px;
    box-shadow: unset !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #D4D4D4 !important;
}

.blog-content h3 a {
    color: #000 !important;
    font-weight: 700 !important;
    font-family: "Figtree", Sans-serif;
    font-size: clamp(22px, 1.6vw, 24px) !important;
    line-height: 25.2px !important;
}

.blog-content h3 {
    min-height: 110px !important;
}

.blog-content p {
    font-family: "Figtree", sans-serif !important;
    min-height: 70px !important;
}

.blog-meta {
    font-size: 16px !important;
    color: #000000 !important;
    margin-bottom: 20px !important;
     font-family: "Figtree", Sans-serif;
}

.blog-content .blog-cats {
    margin-bottom: 21px !important;
}

.blog-content p {
     font-family: "Figtree", Sans-serif;
    min-height: 70px !important;
    font-size: 16px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0px !important;
    line-height: 22px !important;
}

.blog-content a.leer-mas {
    display: flex !important;
    font-size: 18px !important;
    align-items: center !important;
    font-family: "Figtree", Sans-serif;
    text-decoration: none !important;
    color: #000000 !important;
}

.blog-cats a {
    border-radius: 100px !important;
    padding: 8px 20px 8px 20px !important;
    font-size: clamp(14px, 1.05vw, 16px) !important;
    margin-right: 10px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid #434244 !important;
    color: #434244 !important;
 font-family: "Figtree", Sans-serif;
}

.desktop-filter-heading h3 {
    margin: 0;
    font-weight: 700 !important;
    color: #000 !important;
    font-family: "Figtree", Sans-serif;
    font-size: 24px !important;
    line-height: 35px !important;
}

.blog-desktop-search-inside input {
    width: 100%;
    padding: 8px 15px !important;
    border: unset !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    background: #F5F5F5 !important;
    font-family: "Figtree", Sans-serif;
    padding-left: 50px !important;
}

.filter-tag {
    border-radius: 100px !important;
    padding: 8px 20px 8px 20px !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid #434244 !important;
    color: #434244 !important;
 font-family: "Figtree", Sans-serif;
}

.filter-tag .remove-filter {
    cursor: pointer !important;
    border: unset !important;
    padding: 0 !important;
    scale: 1.5 !important;
    color: #000 !important;
    bottom: 0px !important;
    position: relative !important;
    margin-right: 9px !important;
    background: unset !important;
}

/* .blog-slider .swiper-slide.swiper-slide-active ,.blog-slider .swiper-slide.swiper-slide-next{
margin-right: 0 !important;
} */
.blog-container {
    max-width: 1253px;
    gap: 76px !important;
    margin-top: 65px !important;
}



.blog-filters h4 {
    margin: 0 0 12px 0;
    color: #000000 !important;
    font-size: 18px;
 font-family: "Figtree", Sans-serif;
    line-height: 28px;
    font-weight: 700;
}

.blog-filters label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    padding: 5px 0 !important;
    color: #000000 !important;
     font-family: "Figtree", Sans-serif;
    position: relative !important;
    font-weight: 400 !important;
}

.blog-filters label::before {
    content: '';
    background: #F5F5F5 !important;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.postCategories span.elementor-post-info__terms-list a {
    font-size: 16px !important;
    border: 1px solid #434244 !important;
    color: #434244 !important;
    padding: 8px 20px !important;
    border-radius: 100px !important;
    margin-right: 14px !important;
}

.postContent h2 {
    color: #000000 !important;
 font-family: "Figtree", Sans-serif;
    font-weight: 700 !important;
    font-size: 35px;
    margin-bottom: 28px !important;
}

/*.e-n-tabs-heading>button.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {*/
/*    color: #FFCC00 !important;*/
/*}*/

/*.e-n-tabs-heading>button.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {*/
/*    color: #FFCC00 !important;*/
/*    font-size: 18px !important;*/
/*    font-weight: 600 !important;*/
/* font-family: "Figtree", Sans-serif;*/
/*}*/

/*.e-n-tabs-heading>button.e-n-tab-title:hover .e-n-tab-title-text {*/
/*    color: #FFCC00 !important;*/
/*}*/

/*** FAQS Page Icon */
.e-n-accordion-item-title-icon svg path {
    fill: #007ac3!important;
}

/* .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg path {
fill: #FFCC00 !important;
}

.e-n-accordion-item-title[aria-expanded="true"] .e-n-accordion-item-title-icon svg path {
fill: #FFCC00 !important;
} */
.elementor-element.elementor-element-53921d5.offert-title.elementor-widget.elementor-widget-shortcode {
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
    margin-bottom: 50px;
}

.elementor-element.elementor-element-550308e.faqContent.elementor-widget.elementor-widget-text-editor {
    padding-top: 12px;
    font-size: 18px;
 font-family: "Figtree", Sans-serif;
}

.elementor-element-048ef7c .elementor-icon svg path {
    fill: #434244 !important;
}

.faqContent ul {
    padding-left: 20px;
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)) !important;
    }

    .blog-content h3 {
        min-height: 120px !important;
    }

    .custom-blog-section .blog-slider {
        width: 100% !important;
    }

    .blog-content {
        padding: 16px !important;
    }

    .blog-mobile-search input {
        width: 100% !important;
        padding: 12px 16px !important;
        border: unset !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        background: #F5F5F5 !important;
        padding-left: 64px !important;
    }

    .blog-mobile-header .blog-heading {
        color: #000000 !important;
        font-size: 40px !important;
        line-height: 80px !important;
        font-weight: 700 !important;
         font-family: "Figtree", Sans-serif;
    }



    /* .date-and-author
{
display: flex !important;
flex-direction: column !important;
} */
    .elementor-1612 .elementor-element.elementor-element-9387676 .elementor-heading-title {
        font-size: 16px !important;
        text-align: left !important;
        padding-bottom: 12px !important;
    }

    .swiper-pagination-bullet-active {
        background: #000 !important;
    }



    .e-n-tabs-title[aria-selected="true"] .e-n-tab-title-text {
        color: #FFCC00 !important;
    }


}

@media (min-width: 768px) {
    .elementor-2422 .elementor-element.elementor-element-91a0b96 {
        padding: 0 !important;
    }
}



/* Flota-Fleet Page Css  */
.vf-grid-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.vf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    /* width: 90%; */
}

@media (max-width: 768px) {
    .vf-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.vf-card {
    background: #F2F4F8;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    padding: 16px 28px 40px;
    cursor: pointer;
}

.vf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.vf-card-img {
    object-fit: cover;
    /* 	padding: 16px; */
    display: block;
    margin: 0 auto;
    width: 301px;
    height: 181px;
}

.vf-title {
    font-size: 24px;
    font-weight: 700;
    font-family: "Figtree", Sans-serif;
    color: #007ac3;
    margin: 0 0 24px;
    line-height: 25px;
}

.vf-card-image-wrapper {
    margin-bottom: 30px;
}

.vf-subtitle {
    font-size: 16px;
    line-height: 125%;
    color: #000000;
    margin-bottom: 14px;
    font-weight: 400;
    font-family: "Figtree", Sans-serif;
}

.vf-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 15px 30px;
    border-bottom: 1px solid #D4D4D4;
    padding-bottom: 30px;
}

.vf-badge {
    background: #ab206c;
    color: #FFF;
    border-radius: 5px;
    font-family: "Figtree", Sans-serif;
    font-size: 18px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.icon-with-text {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #000000;
    font-weight: 400;
    font-size: 16px;
    font-family: "Figtree", Sans-serif;
}

.border {
    width: 100%;
    border: 1px solid #D4D4D4;
}

.vf-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 15px 30px;
    font-family: "Figtree", Sans-serif;
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px;
    padding-top: 30px;
    color: #000000;
}

.vf-feature {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vf-feature svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.vf-btn {
    display: block;
    width: 100%;
    background: #f5c518;
    color: #1a1a1a;
    text-align: center;
    padding: 12px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.vf-btn:hover {
    background: #000;
    color: #fff !important;
}

/* Optional: WhatsApp floating button style (if needed) */
.vf-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: #25D366;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.vf-whatsapp img {
    width: 32px;
    height: 32px;
}

.elementor-element.elementor-element-2f64f97.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded {
    padding: 0;
}

.elementor-element-0aaa727 .e-n-tabs-content {
    max-width: 1200px;
    margin: 0 auto;
}

.faqs summary.e-n-accordion-item-title {
    border-bottom: none !important;
}

.banner-slider-img .swiper-wrapper {
    min-height: 647px !important;
    max-height: 647px !important;
    height: 100% !important;
}

.elementor-widget-loop-grid .carImg img {
    aspect-ratio: unset !important;
    width: 224px !important;
}

/* Desktop */
.banner-slider-img .swiper-slide-image {
    min-height: 647px !important;
    max-height: 647px !important;
    height: 647px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Mobile */
@media (max-width: 768px) {

    .vf-features,
    .icon-with-text,
    .vf-badges {
        gap: 8px !important;
        font-size: 15px;
        line-height: 125%;
    }

    .banner-slider-img .swiper-slide-image {
        min-height: 500px !important;
        max-height: 500px !important;
        height: 500px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .banner-slider-img .swiper-wrapper {
        height: 500px !important;
        min-height: 500px !important;
    }
}

.vehicle-cards {
    max-width: 318px;
    width: 100%;
}


.filter-panel-header,
.aplicar-btn-container {
    display: none !important;
}


@media (max-width: 767px) {
    .filters-menu-flota {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        /*         width: 85% !important; */
        max-width: 100% !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15) !important;
        transition: right 0.3s ease-in-out !important;
        padding: 20px !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .filters-menu-flota.active {
        right: 0 !important;
    }

    .filter-panel-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
    }

    .filter-panel-header h3 {
        margin: 0 !important;
        font-size: 20px !important;
        font-weight: bold !important;
        color: #000000 !important;
    }

    .close-filter-btn {
        cursor: pointer !important;
        font-size: 20px !important;
        font-weight: bold !important;
        color: #000000 !important;
    }

    /* Mobile ma j Aplicar Button show thase */
    .aplicar-btn-container {
        display: block !important;
        margin-top: auto !important;
        padding-top: 20px !important;
    }

    .aplicar-btn {
        width: 100% !important;
        background-color: #ffcc00 !important;
        color: #000000 !important;
        border: none !important;
        padding: 12px 0 !important;
        border-radius: 25px !important;
        font-weight: bold !important;
        font-size: 16px !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    .filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999998;
    }

    .filter-overlay.active {
        display: block;
    }
}

/* Footer Icon Css  */

.elementor-social-icon-whatsapp-line:hover,
.elementor-repeater-item-cf093c7:hover,
.elementor-repeater-item-0e45021:hover,
.elementor-repeater-item-97b9d37:hover {
    color: #fff !important;
}

.elementor-social-icon-whatsapp-line:hover svg path,
.elementor-repeater-item-cf093c7:hover svg path,
.elementor-repeater-item-0e45021:hover svg path,
.elementor-repeater-item-97b9d37:hover svg path {
    fill: #fff !important;
}


/* Tablet + Mobile */
@media (max-width: 1024px) {
    .elementor-element-b1075e3 {
        margin-bottom: 24px !important;
    }
}

/* Main card */
.cr-quote-container {
    max-width: 830px;
    margin: 0 auto;
}

.cr-quote-container .cr-quote-form {
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 9px;
    padding: 60px 55px;
    box-shadow: 2px 2px 20px 5px #95959533;
}

/* Heading - add this in Elementor above the shortcode */
.cr-form-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}

/* Two-column form */
.cr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
}

/* Fields */
.cr-field input {
    box-sizing: border-box;
    border: 1px solid #C3C3C3;
    border-radius: 6px;
    background: #fff;
    padding: 19px 14px;
    color: #434244;
    outline: none;
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

.cr-field input::placeholder {
    color: #555;
    opacity: 1;
}

.cr-field input:focus {
    border-color: #aaa;
}

/* Submit button */
.cr-submit {
    margin-top: 20px;
}

.cr-submit input[type="submit"] {
    display: block;
    width: 100%;
    height: 52px;
    font-family: "Figtree", Sans-serif;
    border: 0;
    border-radius: 18px;
    background: #ffc800;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.cr-submit input[type="submit"]:hover {
    background: #000;
    color: #FFF;
}

/* Help text */
.cr-help {
    margin-top: 15px;
    font-size: 16px;
    color: #434244;
    font-family: "Figtree", Sans-serif;
}

.cr-help a {
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #999;
}

.cr-help a:hover {
    color: #000;
}

/* Remove CF7 default spacing */
.cr-quote-form p {
    margin: 0;
}

.cr-quote-form .wpcf7-form-control-wrap {
    display: block;
}

.cr-quote-form .wpcf7-not-valid-tip {
    font-size: 16px;
    margin-top: 3px;
    font-family: "Figtree", Sans-serif;
}

/* Mobile */
@media (max-width: 767px) {

    .cr-quote-container .cr-quote-form {
        padding: 25px 20px;
    }

    .cr-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cr-field input {
        font-size: 15px;
    }

    .cr-form-title {
        font-size: 21px;
    }

    .cr-submit,
    .cr-help {
        margin-top: 15px;
    }
}

.cr-quote-container .cr-quote-form h2 {
    margin: 0 0 16px 0;
    padding: 0;
    color: #000000;
    font-family: "Figtree", Sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
    margin-bottom: 20px;
}

.blog-meta span.dot {
    color: #000000 !important;
    width: 15px;
    display: inline-block;
    font-size: 25px !important;
}

/* ========== Parent Wrapper ========== */

.single-oferta .oferta {
    width: 100%;
    margin-left: auto;
    max-width: 100%;
    margin-right: 40px;
    position: relative;
    z-index: 5;
}

.oferta {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    /*margin-right: 40px;*/
    position: relative;
    z-index: 5;
}

/* ========== Form Card ========== */
.oferta .rental-form-v2-wrapper {
    background: #ffffff !important;
    border-radius: 16px !important;
    position: relative;
    z-index: 2;
}

/* .oferta .elementor-heading-title,
.oferta h2 {
font-size: 22px !important;
font-weight: 700 !important;
color: #101828 !important;
margin-bottom: 24px !important;
text-align: left !important;
} */


/* ====== Post offerta left content ===== */
.elementor-element-fb9866e h3,
.elementor-element-fb9866e p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
}

.elementor-element-fb9866e ul li p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    margin-bottom: 0px;
}

.elementor-element-46f7fc9 h3,
.elementor-element-46f7fc9 p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
}

.elementor-element-087ea74 h3,
.elementor-element-087ea74 p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
}

.elementor-element-087ea74 ul li p {
    font-family: "Figtree", Sans-serif;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 0px;
}

/* ========== Form Groups ========== */
.oferta .form-group {
    margin-bottom: 16px !important;
}

.oferta .form-group input,
.oferta .form-group select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #101828 !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s ease;
}

.oferta .form-group input:focus,
.oferta .form-group select:focus {
    border-color: #101828 !important;
}

.oferta .form-group input::placeholder {
    color: #98A2B3 !important;
}

/* ========== Dates Row ========== */
.oferta .form-row.dates-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.oferta .form-row.dates-row .col-half {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

/* ========== Custom Checkbox Fix ========== */
.oferta .checkbox-group {
    margin: 18px 0 20px !important;
}

.oferta .custom-checkbox {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    padding-left: 23px !important;
    user-select: none !important;
}

.oferta .custom-checkbox input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

.oferta .checkbox-group {
    margin: 18px 0 20px !important;
}

.oferta .custom-checkbox {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    padding-left: 22px !important;
    user-select: none !important;
    font-size: 14px !important;
    color: #101828 !important;
}

.oferta .custom-checkbox input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

/* Box */
.oferta .custom-checkbox .checkmark {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 20px !important;
    width: 20px !important;
    background-color: #ffffff !important;
    border: 2px solid #D0D5DD !important;
    border-radius: 5px !important;
}

/* Checked state */
.oferta .custom-checkbox input:checked~.checkmark {
    background-color: #101828 !important;
    border-color: #101828 !important;
}


select#pais_reserva,
select#tipo_vehiculo,
#nombre_completo,
#correo_electronico,
#telefono,
#codigo_promocional {
    color: #434244;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    border: 1px solid #C3C3C3;
    /*height: 50px;*/
    border-radius: 6px;
    padding: 8px 14px;
}

/* Tick mark */
.oferta .custom-checkbox .checkmark:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.oferta .custom-checkbox input:checked~.checkmark:after {
    display: block !important;
}

/* Label text */
.oferta .custom-checkbox .label-text {
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-left: 0 !important;
    line-height: 1.4 !important;
}

/* ========== Submit Button ========== */
.oferta .btn-submit {
    width: 100% !important;
    height: 50px !important;
    background: #ffffff !important;
    border: 2px solid #E31C23 !important;
    /* Hertz red */
    color: #E31C23 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-top: 8px !important;
}

.oferta .btn-submit:hover {
    background: #E31C23 !important;
    color: #ffffff !important;
}

/* ========== Footer Help ========== */
.oferta .form-footer-help {
    text-align: center !important;
    margin-top: 18px !important;
    font-size: 14px !important;
    color: #667085 !important;
}

.oferta .form-footer-help a {
    color: #E31C23 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.oferta .form-footer-help a:hover {
    text-decoration: underline !important;
}

/* ========== Error Messages ========== */
.oferta .error-msg {
    display: none;
    color: #D92D20 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* ========== Mobile Responsive ========== */
@media (max-width: 768px) {
    .oferta {
        max-width: 100% !important;
        margin: 0 auto !important;
        /* padding: 0 15px !important; */
    }

    .oferta .rental-form-v2-wrapper {
        /* padding: 24px 20px !important;
border-radius: 12px !important; */
    }
}

.hertz-help {
    margin-top: 15px;
    font-size: 16px !important;
    line-height: 1.4;
    color: #434244 !important;
    font-family: "Figtree", Sans-serif;
}

.hertz-submit .wpcf7-spinner {
    position: absolute;
    right: -27px;
    top: 80%;
    transform: translateY(-50%);
    margin: 0;
}

.transfer-submit .wpcf7-spinner {
    position: absolute;
    right: -32px;
    top: 85%;
    transform: translateY(-50%);
    margin: 0;
}

.cr-submit .wpcf7-spinner {
    position: absolute;
    right: 20px;
    top: 78%;
    transform: translateY(-50%);
    margin: 0;
}

.transfer-help p {
    color: #434244;
    font-size: 16px;
 font-family: "Figtree", Sans-serif;
    font-weight: 400;
    margin-bottom: 0;
}

.transfer-help a {
    color: #434244;
    text-decoration: underline !important;
    font-family: "Figtree", Sans-serif;
    font-size: 16px;
}

.confirmation-only .reservation-results-header-main {
    display: none !important;
}

@media (max-width: 768px) {
    .gt_selector.notranslate {
        width: auto !important;
        min-width: 47px !important;
        max-width: 60px !important;
        height: 41px !important;
        font-family: "Figtree", Sans-serif;
        font-size: 20px !important;
        padding: 0 4px !important;
    }
}

/* faq pages css  */
.faq-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding-bottom: 34px;
    padding-inline: 25px;
}

.faq-tabs::-webkit-scrollbar {
    display: none;
}

.faq-tab {
    flex: 0 0 auto;
    padding: 14px 18px;
    border: 1px solid #B8B8B8;
    border-radius: 30px;
    background: #fff;
    color: #999;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-tab.active {
    background: #000;
    border-color: #000;
    color: #FFCC00;

}

.elementor-element.elementor-element-7948638.faqsMob.elementor-hidden-desktop.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded {
    padding: 0px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .faq-tabs {
        display: flex;
        align-items: center;
        justify-content: safe center;
        gap: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;

        /* iPad touch scrolling aur iOS notch/safe-area spacing */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
        padding-inline: max(25px, env(safe-area-inset-left));
    }

    /* iPad Safari par scrollbar hide karne ke liye */
    .faq-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* faq pages css end  */

/* rentalforn same click change functionlity css */
.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Custom box */
.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d0d5dd;
    /* light grey border */
    border-radius: 4px;
    background-color: #ffffff;
    /* always white when unchecked */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

/* Checked state – never black */
.checkbox-wrapper input[type="checkbox"]:checked+.custom-checkbox {
    background-color: #101828;
    /* or your brand color */
    border-color: #101828;
}

/* White checkmark */
/* .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
content: "";
width: 5px;
height: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
} */

/* Optional hover */
.checkbox-wrapper:hover .custom-checkbox {
    border-color: #98a2b3;
}



div#reservation-no-results {
    margin-bottom: 130px;
    padding-top: 70px;
    text-align: center;
}

h2.reservation-no-results-title {
    color: #000;
    font-family: "Figtree", Sans-serif;
    font-size: 40px;
    font-weight: 700;
}

p.reservation-no-results-text {
    padding-bottom: 10px;
    font-size: 18px;
    font-family: "Figtree", Sans-serif;
    color: #000;
    font-weight: 500;
}

button.reservation-edit-search-btn {
    background-color: #FFCC00;
    color: #000;
    border: none;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Lato';
    border-radius: 100px;
}

button.reservation-edit-search-btn:hover {
    background-color: #000;
    color: #FFCC00;
    border: none;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Lato';
    border-radius: 100px;
}

#vehicle-filters-sidebar {
    transition: transform 0.35s ease-in-out,
        opacity 0.35s ease-in-out,
        visibility 0.35s ease-in-out !important;
}

#vehicle-filters-sidebar.filters-closing {
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}