/* =============================================
** GLOBAL CONTAINER STYLES (The Base Pattern)
** =============================================
*/

/* Shared styling for ALL boxes */
.compact-spec-box,
.equipment-box-container {
    background: #f7f7f7;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    color: #333;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Shared Title Styling */
.spec-box-title,
.quick-info-title,
.equipment-col-title {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    letter-spacing: 0.5px;
}

/* Shared Label/Value Pattern */
.spec-label,
.quick-info-label,
.cost-label {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    color: #555; /* Soft Grey */
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.spec-value,
.quick-info-value,
.cost-value {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    color: #000; /* Deep Black */
    font-weight: 700;
    font-size: 14px;
}


/* =============================================
** ==== BOX 1: MAIN CAR SPECS (The Big Box) ====
** =============================================
*/

/* Extra padding for the main specs */
.compact-spec-box:not(.quick-info-box):not(.minimal-costs-box) {
    padding: 20px;
}

/* Box Title */
.compact-spec-box .spec-box-title {
    font-size: 18px;
    border-bottom-width: 2px;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 40px; 
}

@media (min-width: 900px) {
    .spec-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Box rows */
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.spec-id-value {
    font-family: 'Consolas', monospace;
    letter-spacing: 1px;
}


/* ===========================================================
** ===== BOX 2 & 3: SIDEBAR BOXES (COSTS and QUICK INFO) =====
** ===========================================================
*/

/* Make boxes smaller */
.quick-info-box,
.minimal-costs-box {
    padding: 12px 20px; /* Reduced vertical padding */
}

/* Tighter Titles */
.quick-info-title,
.minimal-costs-box .spec-box-title {
    font-size: 14px; /* Smaller title */
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

/* Tighter Grid Gaps */
.quick-info-grid,
.cost-grid-2col {
    display: grid;
    gap: 8px 15px;
}

/* Quick Info Specifics (4 Columns) */
.quick-info-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
    .quick-info-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Costs Specifics (2 Columns) */
.cost-grid-2col { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .cost-grid-2col { grid-template-columns: repeat(2, 1fr); }
}

/* Vertical Stacking for Quick Info Items */
.quick-info-item {
    display: flex;
    flex-direction: column;
}
.quick-info-label { margin-bottom: 1px; font-size: 11px; }
.quick-info-value { font-size: 13px; }

/* Horizontal Flex for Cost Items */
.cost-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
}

/* Country of Origin Special Row */
.quick-info-item.item-origin {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed #ddd;
    margin-top: 2px;
}
.quick-info-item.item-origin .quick-info-label { margin-bottom: 0; }

/* Estimated Total Row */
.cost-total-minimal {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8fbff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cost-total-minimal .total-label {
    font-size: 16px; 
    color: #000; 
    font-weight: 700; 
}
.cost-total-minimal .total-value {
    font-size: 20px; 
    color: #27ae60; 
    font-weight: 800; 
}


/* =============================================
** ======== BOX 4: EQUIPMENT & OPTIONS =========
** =============================================
*/

/* Add some padding for the Options Box */
.equipment-box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

/* Force Title to top row */
.equipment-box-container .spec-box-title {
    flex: 0 0 100%;
    font-size: 20px;
    font-weight: 700;;
    width: 100%;
    margin-bottom: 5px;
}

.equipment-column {
    flex: 1 1 100%;
}
@media (min-width: 900px) {
    .equipment-column {
        flex: 1;
        max-width: calc(33.33% - 20px);
    }
}

.equipment-col-title {
    font-size: 15px;
    margin-top: -30px;
    color: #333;
    border-bottom-color: #4682B4; /* Brand highlight */
}

.equipment-list-ticks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.equipment-list-ticks li {
    font-size: 13.5px;
    color: #000;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f9f9f9;
}

.equipment-list-ticks .tick {
    color: #27ae60;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}


/* =============================================
** ICONS & UTILS
** ============================================= */

/* 1. Target the Wrapper (Outer Span) */
.spec-row .spec-label::before {
    /* Use the font your theme is ALREADY loading */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    
    /* Layout */
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    text-align: center;
    color: #4682B4; 
    -webkit-font-smoothing: antialiased;
}

/* 2. GHOST KILLER: Ensure the inner text span is clean */
.spec-row .spec-label > span::before {
    content: none !important;
    display: none !important;
}

/* Mapping Icons */
.specs-make span::before               { content: "\f1ad"; }
.specs-model span::before              { content: "\f1b9"; }
.specs-mileage span::before            { content: "\f3fd"; }
.specs-origin span::before             { content: "\f0ac"; }
.specs-fuel span::before               { content: "\f52f"; }
.specs-gearbox span::before            { content: "\f085"; }
.specs-horsepower span::before         { content: "\f0e7"; }
.specs-torque span::before             { content: "\f3fd"; }
.specs-first-registration span::before { content: "\f783"; }
.specs-color span::before              { content: "\f1fc"; }
.specs-body span::before               { content: "\f5e1"; }
.specs-engine-size span::before        { content: "\f1b2"; }
.specs-seats span::before              { content: "\f500"; }
.specs-emission-class span::before     { content: "\f06c"; }
.specs-co2-emissions span::before      { content: "\f06c"; }
.specs-drivetrain span::before         { content: "\f018"; }
.specs-gears span::before              { content: "\f013"; }
.specs-product-number span::before     { content: "\f02a"; }



.spec-value, 
.cost-value {
    text-align: right; /* Ensures multi-line values stay on the right */
    max-width: 60%;    /* Prevents the value from crushing the label */
    line-height: 1.3;  /* Makes multi-line text look cleaner */
}


/* FORCE ICON AND LABEL SIDE-BY-SIDE */
.spec-row .spec-label {
    display: flex;          /* Activates Flexbox */
    align-items: center;    /* Centers Icon and Text vertically */
    flex-direction: row;    /* Forces them to sit horizontally */
}

/* PREVENT ICON SQUISHING */
.spec-row .spec-label::before {
    flex-shrink: 0;         /* Guarantees the icon stays 25px wide and doesn't collapse */
}

/* Neutralize "Car History" outer box, so only the inner box works (which is the same width as Vendor's box) */