/* NOTE:
   The following selectors were invalid (they contained JS template placeholders like ${ad.id}).
   They would never match in CSS and could also confuse tools.
   Replaced with stable, reusable classes that work on every page.
*/

/* ---------- Global responsive safety ---------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Prevent long content (URLs, IDs, long titles) from breaking layout */
.text-break,
.break-word {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- Modals ---------- */
.modal-body {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Common media blocks (cards/previews) ---------- */
.vehicle-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Spare part/product grid image consistency */
.card-img-fixed {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ---------- Slider images (generic) ---------- */
/* Use these classes in your HTML/JS if needed */
.slider-main img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.slider-thumb img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
    cursor: pointer;
}

.slider-thumb .slick-current img {
    border: 2px solid #e20000;
}

/* ---------- Tables ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Offcanvas & header spacing on mobile ---------- */
@media (max-width: 575.98px) {
    /* Reduce large paddings that cause extra scroll */
    .py-10,
    .pt-10,
    .pb-10 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Offcanvas cart: make lists usable */
    .offcanvas .list-group-item {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Make buttons stack nicely */
    .d-grid.gap-2.d-sm-flex {
        display: grid !important;
    }

    /* Prevent any accidental fixed-width blocks from forcing horizontal scroll */
    .container,
    .container-fluid {
        overflow-x: hidden;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .vehicle-img,
    .card-img-fixed {
        height: 220px;
    }
}

@media (min-width: 992px) {
    .vehicle-img,
    .card-img-fixed {
        height: 240px;
    }
}