/* Modal slide-up animation (for #vehicleSpecs and others) */
.modal.modal-slide-up .modal-dialog {
    transform: translateY(150px) !important;
    /* start slightly below */
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.modal.show.modal-slide-up .modal-dialog {
    transform: translateY(0) !important;
}

/* Prevent default fading when using slide-up */
.modal.modal-slide-up .modal-content {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .modal.modal-slide-up .modal-dialog {
        transition: none;
        transform: none !important;
    }
}

/* Override: slow down fadeInUp a touch */
.fadeInUp {
    --fiu-duration: 1.25s;
}

@media (prefers-reduced-motion: reduce) {
    .fadeInUp {
        --fiu-duration: 0ms;
    }
}

#logo_deepal {
    margin-left: 5px;
}

#logo_deepal img {
    height: 30px;
    margin-top: 3px;
}

#logo_almajdouie {
    margin-left: 4px;
}

#logo_almajdouie img {
    margin-top: 1px;
}

/* Fade-in-up utility */
.fadeInUp {
    /* Tunable defaults via CSS variables */
    --fiu-distance: 50px;
    --fiu-duration: 1.9s;
    --fiu-delay: 0s;
    --fiu-ease: cubic-bezier(.22, 1, .36, 1);

    opacity: 0;
    transform: translateY(var(--fiu-distance)) scale(0.98);
    transition: opacity var(--fiu-duration) var(--fiu-ease) var(--fiu-delay),
        transform var(--fiu-duration) var(--fiu-ease) var(--fiu-delay);
    will-change: opacity, transform;
}

.fadeInUp.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {

    .fadeInUp,
    .fadeInUp.is-visible {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Buttons on dark backgrounds should have white text */
.btn.btn-dark,
.btn.bg-dark,
.btn.btn-black,
.btn.bg-black,
.bg-dark .btn,
.bg-black .btn {
    color: #fff !important;
}

.btn {
    backdrop-filter: none;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-family: "fzlantingheis-m-gbregular", sans-serif;
    border: 0;
}

.btn.btn-alt {
    border-color: rgba(0, 0, 0, 0.4);
}

.btn.btn-alt:hover {
    border-color: rgba(0, 0, 0);
}

.btn.btn-dark:hover {
    color: rgba(0, 0, 0) !important;
}

.btn.btn-dark.hover-alt:hover {
    color: rgba(0, 0, 0) !important;
    background-color: white !important;
}

.btn.btn-white.hover-none:hover {
    color: rgb(33, 37, 41) !important;
    background-color: white !important;
}

/* Smooth transition for Models menu under #navbarNav */
#navbarNav #menu-open-close {
    /* Bootstrap controls height; we enhance perceived smoothness */
    will-change: height, opacity;
}

#navbarNav #menu-open-close .open-close {
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(.25, 1, .5, 1);
}

#navbarNav #menu-open-close.collapsing .open-close,
#navbarNav #menu-open-close.show .open-close {
    opacity: 1;
}

/* Ensure height animation of the collapsing container feels smooth */
#navbarNav #menu-open-close.collapsing {
    overflow: hidden;
    transition: height 0.35s cubic-bezier(.25, 1, .5, 1);
}

/* Crossfade between Models (opener) and Close (inside collapse) */
#navbarNav .left-info .opener {
    transition: opacity 0.25s cubic-bezier(.25, 1, .5, 1);
}

#navbarNav .left-info .opener[aria-expanded="true"] {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    #navbarNav #menu-open-close .open-close,
    #navbarNav #menu-open-close.collapsing {
        transition: none !important;
    }
}

/* Staggered fade-in for vehicle top menu items */
#navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.25s cubic-bezier(.25, 1, .5, 1),
        transform 0.25s cubic-bezier(.25, 1, .5, 1);
    will-change: opacity, transform;
}

@keyframes menuItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#navbarNav #menu-open-close.show .open-close #nav_vehicle_top_menu li {
    visibility: visible;
    animation: menuItemFadeIn 0.25s cubic-bezier(.25, 1, .5, 1) both;
}

/* Stagger delays per item */
#navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li:nth-child(1) {
    animation-delay: 0s;
}

#navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li:nth-child(2) {
    animation-delay: 0.06s;
}

#navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li:nth-child(3) {
    animation-delay: 0.12s;
}

#navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li:nth-child(4) {
    animation-delay: 0.18s;
}

/* Prevent overlap: keep opener hidden during any collapsing state */
#navbarNav #menu-open-close.collapsing+.opener {
    opacity: 0 !important;
}

/* Fade-out (right-to-left) when closing */
@keyframes menuItemFadeOutRight {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(8px);
    }
}

#navbarNav #menu-open-close.collapsing:not([style*="height: 0"]) .open-close #nav_vehicle_top_menu li {
    visibility: visible;
    animation: menuItemFadeOutRight 0.22s cubic-bezier(.25, 1, .5, 1) both;
}

/* During opening (height starting at 0), keep items invisible to avoid flash */
#navbarNav #menu-open-close.collapsing[style*="height: 0"] .open-close #nav_vehicle_top_menu li {
    visibility: hidden;
    opacity: 0;
}

/* Stagger from right to left using nth-last-child */
#navbarNav #menu-open-close.collapsing .open-close #nav_vehicle_top_menu li:nth-last-child(1) {
    animation-delay: 0s;
}

#navbarNav #menu-open-close.collapsing .open-close #nav_vehicle_top_menu li:nth-last-child(2) {
    animation-delay: 0.06s;
}

#navbarNav #menu-open-close.collapsing .open-close #nav_vehicle_top_menu li:nth-last-child(3) {
    animation-delay: 0.12s;
}

#navbarNav #menu-open-close.collapsing .open-close #nav_vehicle_top_menu li:nth-last-child(4) {
    animation-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
    #navbarNav #menu-open-close .open-close #nav_vehicle_top_menu li {
        transition: none !important;
        animation: none !important;
    }
}

/* Vehicle dropdown: open on hover of #nav_vehicle_top_menu items */
@media (min-width: 992px) {

    /* Overlay approach: header stays transparent; ::after grows downward */
    header#header {
        position: relative;
        background-color: transparent;
        --overlay-target-height: 100%;
    }

    header#header::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        background: #fff;
        opacity: 0;
        transition: height 1.0s cubic-bezier(.25, 1, .5, 1), opacity 0.35s ease;
        z-index: 1;
        pointer-events: none;
    }

    /* When expanding/open, grow the overlay to cover header + dropdown */
    header#header.menu-expanding::after,
    header#header.menu-open::after {
        height: var(--overlay-target-height, 100%);
        opacity: 1;
    }

    /* Ensure header nav content sits above overlay */
    header#header #menu-main {
        position: relative;
        z-index: 2;
        transition: color 0.2s ease;
    }

    header#header #menu-main a,
    header#header #menu-main .nav-link,
    header#header #menu-main .navbar-brand,
    header#header #menu-main .menu-item>a {
        transition: color 0.2s ease, border-color 0.2s ease;
    }

    /* Invert colors for readability on white overlay */
    header#header.menu-expanding #menu-main,
    header#header.menu-open #menu-main {
        color: #111;
    }

    header#header.menu-expanding #menu-main a,
    header#header.menu-open #menu-main a,
    header#header.menu-expanding #menu-main .nav-link,
    header#header.menu-open #menu-main .nav-link,
    header#header.menu-expanding #menu-main .navbar-brand,
    header#header.menu-open #menu-main .navbar-brand,
    header#header.menu-expanding #menu-main .menu-item>a,
    header#header.menu-open #menu-main .menu-item>a {
        color: #111 !important;
        border-color: #111;
    }

    #header.menu-open .location-bordered {
        border-color: rgba(0, 0, 0, 0.4);
    }

    /* If SVGs use currentColor, this will darken them; otherwise harmless */
    header#header.menu-expanding #menu-main svg,
    header#header.menu-open #menu-main svg {
        stroke: currentColor;
    }

    /* Preserve white text on dark buttons even when inverting nav colors */
    header#header.menu-expanding #menu-main .btn.btn-dark,
    header#header.menu-open #menu-main .btn.btn-dark,
    header#header.menu-expanding #menu-main .btn.bg-dark,
    header#header.menu-open #menu-main .btn.bg-dark,
    header#header.menu-expanding #menu-main .btn.btn-black,
    header#header.menu-open #menu-main .btn.btn-black,
    header#header.menu-expanding #menu-main .btn.bg-black,
    header#header.menu-open #menu-main .btn.bg-black {
        color: #fff !important;
        border-color: #fff;
    }

    #header.menu-open .btn.btn-dark.hover-alt:hover {
        background-color: rgba(0, 0, 0, 0.25) !important;
        color: #000 !important;
    }

    /* Base hidden state for dropdowns (no layout impact) */
    #vehicle-dropdown-holder,
    #deepal-dropdown-holder {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 900;
        display: block;
        /* keep in flow for animation but absolute removes layout space */
        overflow: hidden;
        /* contain inner slide */
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        pointer-events: none;
        /* No artificial delay; JS sequences with overlay expansion */
        transition: transform 0.75s cubic-bezier(.25, 1, .5, 1),
            opacity 0.75s cubic-bezier(.25, 1, .5, 1),
            visibility 0s linear 0s;
        will-change: transform, opacity;
    }

    /* Fast close to avoid slow fade-out glitch */
    #vehicle-dropdown-holder.is-closing,
    #deepal-dropdown-holder.is-closing {
        transition: transform 0.2s cubic-bezier(.25, 1, .5, 1),
            opacity 0.2s cubic-bezier(.25, 1, .5, 1),
            visibility 0s linear 0s;
    }

    /* Open state via class (JS-managed) */
    #vehicle-dropdown-holder.is-open,
    #deepal-dropdown-holder.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        background-color: transparent;
        /* overlay provides the white background */
    }

    /* CSS-only open: vehicle menu on vehicle nav hover or dropdown hover */
    /* Hover CSS-only open removed to prevent premature white background */

    /* CSS-only open: main menu on My Deepal hover or dropdown hover */
    /* Hover CSS-only open removed to prevent premature white background */

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {

        #vehicle-dropdown-holder,
        #deepal-dropdown-holder {
            transition: none !important;
        }
    }
}

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

    #vehicle-dropdown-holder,
    #deepal-dropdown-holder {
        display: none;
    }
}

#header .navbar-toggler {
    width: 41px;
    height: 10px;
}

#header .navbar-toggler span {
    opacity: 0 !important;
}

#header .navbar-toggler:not(.collapsed)::after,
#header .navbar-toggler:not(.collapsed)::before {
    top: 5px
}

#header.sticky .location-bordered {
    border-color: rgba(0, 0, 0, 0.4);
}

#header.sticky svg {
    stroke: rgb(0, 0, 0);
}

#header .right_info ul {
    margin-right: 6px;
    margin-top: 3px;
}

/* Smooth slide-in from right with an immediate peek */
.modal.modal-slide-right .modal-dialog {
    margin-left: auto;
    /* anchor to the right */
    transform: translateX(0) !important;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Step 1: instantly show some modal */
.modal.modal-slide-right.pre-peek .modal-dialog {
    transform: translateX(90%) !important;
    transition: none;
    /* no animation for the peek */
}

/* Step 2: animate the remaining slide */
.modal.modal-slide-right.animate-in .modal-dialog {
    transform: translateX(0) !important;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ensure no fade effect interferes */
.modal.modal-slide-right .modal-content {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal.modal-slide-right .modal-dialog {
        transition: none;
        transform: none !important;
    }
}

.product-detail-wrap {
    position: relative;
}

.location-bordered {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0px 10px !important;
    border-top: 0;
    border-bottom: 0;
    margin: 0 4px;
}

.customize-product-wrap .customize-box ul li {
    padding: 0;
    margin: 0 18px;
}

#header .deepal-dropdown-holder ul {
    column-count: 2;
}

#header .deepal-dropdown-holder ul li {
    float: none;
    width: 100%;
}