﻿    
    
/* ================================
BO ADD: Car Cards (Grid + Row)
================================ */

.bo-cards-page {
font-family: "Gabarito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

    /* Base card tweaks */
.bo-car-card {
    background: #fff;
    border-radius: 24px;
    height: -webkit-fill-available;
}

.bo-car-card-content {
    margin-top: auto;
}

.bo-car-card__media {
background: #f1f3f5;
}

.bo-car-card__img {
display: block;
object-fit: cover;
}

/* Grid image height */
.bo-car-card--grid .bo-car-card__img {

}

/* Row image height (match card height) */
.bo-car-card--row .bo-car-card__img {
    height: 100%;
    min-height: 220px;
}

/* Rounded media corners like Figma */
.bo-car-card--grid .bo-car-card__media {
/*border-top-left-radius: 24px;*/
/*border-bottom-left-radius: 24px;*/
overflow: hidden;
}

.bo-car-card--row .bo-car-card__media {
/*border-top-left-radius: 24px;*/
/*border-bottom-left-radius: 24px;*/
overflow: hidden;
}

/* On mobile (row becomes stacked) */
@media (max-width: 767.98px) {
.bo-car-card--row .bo-car-card__media {
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0;
}
}

/* Badge style (soft blue pill) */
.bo-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .45rem .6rem;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
line-height: 1;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.bo-badge--soft {
background: #dff0ff;
color: #0a2233;
}

/* Small pill: Begagnad */
.bo-pill {
display: inline-flex;
align-items: center;
padding: .30rem .55rem;
border-radius: 10px;
background: #0f1720;
color: #fff;
font-weight: 600;
font-size: .75rem;
}

/* Location */
.bo-loc {
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 600;
color: #0f1720;
}

/* Favorite button */
.bo-car-card__fav {
width: 40px;
height: 40px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.92);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
color: #111;
}

.bo-car-card__fav:hover {
transform: translateY(-1px);
}

/* Title */
.bo-car-card__title {
letter-spacing: -.01em;
}

/* Meta */
.bo-car-meta {
margin: 0;
padding-left: 0;
list-style: none;
color: #0f1720;
}

.bo-meta-ico {
font-size: 18px;
line-height: 1;
margin-bottom: 6px;
color: #0f1720;
}

/* Meta - bullets (horizontal) */
.bo-car-meta--bullets {
display: flex;
gap: 18px;
flex-wrap: wrap;
}

.bo-car-meta--bullets li {
position: relative;
padding-left: 14px;
font-weight: 600;
}

.bo-car-meta--bullets li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #0f1720;
opacity: .85;
}

/* Meta - inline icons */
.bo-car-meta--inline span {
font-weight: 600;
}

/* Price row */
.bo-price-row .text-primary {
opacity: .55; /* match “soft” monthly” look in figma */
}

/* CTA buttons (match soft blue + icon) */
.bo-btn-cta {
border-radius: 12px;
font-weight: 700;
}

.bo-car-card__cta .btn-light {
background: #dff0ff;
border-color: transparent;
}

.bo-car-card__cta .btn-primary {
background: #dff0ff;
border-color: transparent;
color: #0a2233;
}

.bo-car-card__cta .btn-primary:hover,
.bo-car-card__cta .btn-light:hover {
filter: brightness(.98);
}

/* Row layout: keep content clean */
.bo-car-card--row .bo-car-card__title {
font-size: 1.35rem;
}

@media (max-width: 991.98px) {
.bo-car-card--row .bo-car-card__title {
    font-size: 1.2rem;
}
}

/* Subtle separators (matches figma lines) */
.bo-car-meta.border-top,
.bo-car-meta.border-bottom {
border-color: rgba(15, 23, 32, .08) !important;
}

/* Make badges not stick to edges too tight on small screens */
@media (max-width: 575.98px) {
.bo-car-card__badges {
    padding: 12px !important;
    gap: 8px !important;
}
}


/* Icons */



/* Badges */