/* =============================================
   Carformance AutoTrader – Single + Grid Styles
   Colors: #4cc414 (green) + #000000 (black)
   ============================================= */

:root {
    --cf-green: #4cc414;
    --cf-green-dark: #3da010;
    --cf-black: #000000;
    --cf-dark: #111111;
    --cf-gray: #666666;
    --cf-light: #f7f7f7;
    --cf-white: #ffffff;
    --cf-radius: 12px;
    --cf-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ---------- Single Vehicle ---------- */
.cf-single-vehicle {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cf-black);
}

/* Hero */
.cf-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start;
}

.cf-hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
    display: block;
}

.cf-no-image {
    background: var(--cf-light);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cf-radius);
    color: var(--cf-gray);
}

.cf-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 15px;
    line-height: 1.25;
    color: var(--cf-black);
}

.cf-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cf-green);
    margin-bottom: 30px;
}

/* Buttons */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cf-btn-primary {
    background: var(--cf-green);
    color: var(--cf-white);
}

.cf-btn-primary:hover {
    background: var(--cf-green-dark);
    color: var(--cf-white);
}

.cf-btn-secondary {
    background: var(--cf-black);
    color: var(--cf-white);
}

.cf-btn-secondary:hover {
    background: #222;
    color: var(--cf-white);
}

.cf-btn-outline {
    background: transparent;
    border-color: var(--cf-green);
    color: var(--cf-green);
}

.cf-btn-outline:hover {
    background: var(--cf-green);
    color: var(--cf-white);
}

.cf-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Sections */
.cf-section {
    margin-bottom: 50px;
}

.cf-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.cf-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--cf-green);
}

/* Overview Grid */
.cf-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.cf-overview-item {
    background: var(--cf-light);
    border-radius: var(--cf-radius);
    padding: 20px 15px;
    text-align: center;
    transition: transform 0.2s ease;
}

.cf-overview-item:hover {
    transform: translateY(-3px);
}

.cf-overview-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85;
}

/* Simple icon placeholders using CSS (you can replace with real SVGs later) */
.cf-icon-mileage   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234cc414' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E"); }
.cf-icon-reg       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234cc414' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 4h2v2H9V4zm0 4h2v2H9V8zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-12h2v2h-2V4zm0 4h2v2h-2V8zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.cf-icon-owners    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234cc414' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.cf-icon-body,
.cf-icon-cab,
.cf-icon-wheelbase,
.cf-icon-engine,
.cf-icon-emission,
.cf-icon-gearbox,
.cf-icon-colour,
.cf-icon-seats,
.cf-icon-fuel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234cc414' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
}

.cf-overview-label {
    font-size: 0.85rem;
    color: var(--cf-gray);
    margin-bottom: 4px;
}

.cf-overview-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cf-black);
}

.cf-see-all {
    text-align: center;
    margin-top: 10px;
}

/* Description */
.cf-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

.cf-description p {
    margin-bottom: 1.2em;
}

/* Contact Block */
.cf-contact-block {
    background: var(--cf-black);
    color: var(--cf-white);
    border-radius: var(--cf-radius);
    padding: 40px 30px;
    text-align: center;
    margin-top: 40px;
}

.cf-contact-block h3 {
    font-size: 1.6rem;
    margin: 0 0 10px;
}

.cf-contact-block p {
    margin: 0 0 25px;
    opacity: 0.85;
}

.cf-contact-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* ---------- Grid Shortcode ---------- */
.cf-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.cf-vehicle-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius);
    overflow: hidden;
    box-shadow: var(--cf-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cf-vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.cf-vehicle-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cf-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.cf-card-content {
    padding: 18px 20px 22px;
}

.cf-card-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.35;
    color: var(--cf-black);
}

.cf-card-content .cf-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cf-green);
    margin-bottom: 4px;
}

.cf-card-content .cf-mileage {
    font-size: 0.9rem;
    color: var(--cf-gray);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .cf-hero {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cf-title {
        font-size: 1.7rem;
    }

    .cf-price {
        font-size: 2rem;
    }
}

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

    .cf-cta-buttons,
    .cf-contact-buttons {
        flex-direction: column;
    }

    .cf-btn {
        width: 100%;
    }

    .cf-single-vehicle {
        padding: 15px 12px 40px;
    }
}

/* Pagination - Final strong version */
.cf-pagination {
    margin: 50px 0 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cf-pagination a,
.cf-pagination span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px !important;
    margin: 0 3px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #000 !important;
    background-color: #f1f1f1 !important;
    border: none !important;
    transition: all 0.2s ease;
}

.cf-pagination a:hover {
    background-color: #4cc414 !important;
    color: #ffffff !important;
}

.cf-pagination span.current {
    background-color: #4cc414 !important;
    color: #ffffff !important;
}