/*
 * Fix Text Cropping and Add Ellipsis
 * This CSS file overrides all other styles to fix text cropping issues
 * and ensure ellipsis is displayed for long text
 */

/* Override all other styles for car year */
.car-card .card-body .car-year,
.car-card .card .card-body .car-year,
.car-card .card-body div .car-year,
.car-card .card-body div div .car-year,
.car-year {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Override all other styles for card title */
.car-card .card-body .card-title,
.car-card .card .card-body .card-title,
.car-card .card-body div .card-title,
.car-card .card-body div div .card-title,
.card-title {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Override all other styles for car price */
.car-card .card-body .car-price,
.car-card .card .card-body .car-price,
.car-card .card-body div .car-price,
.car-card .card-body div div .car-price,
.car-price {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.125rem 5px !important; /* Reduced padding by 50% as requested */
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Override all other styles for the container divs */
.car-card .card-body > div,
.car-card .card .card-body > div,
.car-card .card-body div > div,
.car-card .card-body div div > div {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
    .car-card .card-body .car-price,
    .car-card .card .card-body .car-price,
    .car-card .card-body div .car-price,
    .car-card .card-body div div .car-price,
    .car-price {
        padding: 0.075rem 5px !important; /* Reduced padding by 50% as requested */
    }
}

@media (max-width: 576px) {
    .car-card .card-body .car-price,
    .car-card .card .card-body .car-price,
    .car-card .card-body div .car-price,
    .car-card .card-body div div .car-price,
    .car-price {
        padding: 0.05rem 5px !important; /* Reduced padding by 50% as requested */
    }
}

/* !important styles to ensure text doesn't get cropped */
.car-card * {
    text-overflow: ellipsis !important;
}

/* Force only specific text elements to have proper ellipsis */
.car-card .card-body .car-year,
.car-card .card-body .card-title,
.car-card .card-body .car-price {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Restore feature section spacing */
.car-card .features {
    padding-top: 0.5rem !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    display: block !important;
}

/* Fix feature row layout */
.car-card .features .row.g-0 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix feature columns */
.car-card .features .col-auto {
    display: flex !important;
    flex: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Fix feature boxes */
.car-card .features .feature-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.1rem 0.25rem !important;
    gap: 0.1rem !important;
    width: auto !important;
    max-width: none !important;
}

/* Fix feature text */
.car-card .features .feature-text {
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    width: auto !important;
    max-width: none !important;
}

/* Fix feature dividers */
.car-card .features .feature-divider {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.car-card .features .vertical-line {
    display: block !important;
    height: 20px !important;
    width: 1px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 0.5rem !important;
}