/* ============================================================================
 📄 Comparison Section CSS
 🎨 Styles for vehicle comparison cards, badges, and verdict section
 STYLE: tabs only; annotated; z-index hardened; responsive breakpoints expanded
 GOAL: Granular screen size optimizations with clear organization
============================================================================ */

/* ╔══════════════════════════════════╗
   ║            DESIGN TOKENS          ║
   ╚══════════════════════════════════╝
   - Centralized variables for consistent theming
   - Used across comparison cards, badges, and buttons
*/
:root {
    --card-radius: 14px;
    --card-width: clamp(320px, 70vw, 760px);
    --card-min-h: 180px;
    --base-font: clamp(16px, 1.05vw + 12px, 18px);
    --title-font: clamp(22px, 1.2vw + 18px, 30px);
    --xp-blue-300: #8db2e3;
    --xp-blue-500: #3a7bf2;
    --xp-ink: #0b1220;
    --xp-panel-900: #0c1324;
    --xp-panel-800: #111a2f;
    --xp-panel-700: #17213b;
    --xp-panel-650: #1b2645;
    --xp-green: #2aa84a;
    --xp-yellow: #ffd35a;
    --xp-red: #d94b45;
    --xp-silver: #dfe6f3;
    --glow: 0 0 0.75rem rgba(58,123,242,.25);
    --glow-strong: 0 0 1.25rem rgba(58,123,242,.4);
    --shadow: 0 8px 24px rgba(12,19,36,.28), 0 1px 0 rgba(255,255,255,.03) inset;
    --bevel: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25);
}

/* ╔══════════════════════════════════╗
   ║            KEYFRAMES              ║
   ╚══════════════════════════════════╝
   - Animations for card entry and badge effects
*/
@keyframes slotIn {
    from { transform: translateY(12px) scale(.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes sweep {
    from { transform: translateX(-20%) translateY(0); }
    to { transform: translateX(120%) translateY(0); }
}
@keyframes cmpFlipDown {
    0% { transform: rotateX(-90deg); opacity: 0; filter: blur(1px); }
    55% { transform: rotateX(12deg); opacity: 1; filter: blur(0); }
    100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes skyShift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2vh); }
}

/* ╔══════════════════════════════════╗
   ║          GLOBAL / BASE            ║
   ╚══════════════════════════════════╝
   - Sets up page layout, typography, and background effects
   - Includes fixed decorative overlays with z-index isolation
*/
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Kanit", sans-serif;
    font-size: var(--base-font);
    line-height: 1.55;
    color: var(--xp-silver);
    background:
        radial-gradient(1200px 600px at 50% 120%, rgba(6,14,30,.55), transparent 60%) no-repeat,
        linear-gradient(180deg, #5aa5ff 0%, #2f62dd 38%, #1c2a62 72%, var(--xp-ink) 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 55vh 0 0 0;
    pointer-events: none;
    background: repeating-conic-gradient(from 45deg, rgba(255,255,255,.06) 0 25%, rgba(0,0,0,.06) 0 50%) 0 0/80px 80px;
    transform: perspective(800px) rotateX(55deg) translateZ(0);
    filter: blur(.75px) saturate(1.05);
    opacity: .35;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(18vmax 12vmax at 10% -10%, rgba(255,212,0,.10), transparent 60%),
        radial-gradient(14vmax 10vmax at 90% 10%, rgba(0,160,48,.12), transparent 60%),
        radial-gradient(20vmax 16vmax at 50% -20%, rgba(230,0,18,.10), transparent 70%);
    mix-blend-mode: screen;
    animation: skyShift 22s ease-in-out infinite alternate;
    z-index: 0;
}


.vi-soft {
    backdrop-filter: blur(.75px);
}

.hidden {
    display: none !important;
}

/* ╔══════════════════════════════════╗
   ║         COMPARE SECTION           ║
   ╚══════════════════════════════════╝
   - Main comparison layout with flexible columns
   - Cards and middle verdict section
*/
.cmp-section {
    position: relative;
    z-index: 1;
}

.cmp-wrap {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 0 24px;
}

.cmp-col {
    flex: 1 1 0;
    min-width: 0;
}

.cmp-left, .cmp-right {
    display: flex;
}

#cmp-grid-a, #cmp-grid-b {
    width: 100%;
}

.cmp-middle {
    flex: 0 1 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 8px 4px;
}

.cmp-card {
    width: 100%;
    max-width: var(--card-width);
    min-height: var(--card-min-h);
    margin: 0 auto;
    border-radius: var(--card-radius);
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%),
        linear-gradient(180deg, #1a2544 0%, #17213b 60%, #121a30 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    color: var(--xp-silver);
    position: relative;
    overflow: visible;
    animation: slotIn .45s cubic-bezier(.2,.9,.25,1) both;
}

.cmp-card::after {
    content: "";
    position: absolute;
    inset: -40% -40% auto -40%;
    height: 60%;
    background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
    animation: sweep 6s linear infinite;
    opacity: .35;
}

.cmp-card header h3 {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: var(--title-font);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 8px rgba(58,123,242,.25);
    margin: 0 0 6px;
}

.cmp-sub {
    color: #b9c9ff;
}

.cmp-gridbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 12px;
}

.cmp-field .cmp-label {
    display: block;
    font-size: .9rem;
    color: #cfe1ff;
    opacity: .9;
}

.cmp-field .cmp-val {
    font-weight: 700;
    color: #fff;
}

.cmp-scorewrap {
    margin-top: 12px;
}

.cmp-scorelabel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--xp-silver);
}

.cmp-bar {
    width: 100%;
    height: 12px;
    background: linear-gradient(180deg, #0f1a33, #0b1426);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.cmp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8db2e3, #3a7bf2);
    box-shadow: inset 0 0 6px rgba(0,0,0,.25);
    transition: width .35s ease;
}

.cmp-cats {
    margin-top: 14px;
}

.cmp-cats h4 {
    margin: 0 0 8px;
}

.cmp-catrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-top: 1px dashed rgba(255,255,255,.12);
    perspective: 800px;
}

.cmp-badge {
    min-width: 40px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 800;
    transform-style: preserve-3d;
}

.cmp-badge.neutral { background: #23365a; color: #e6f0ff; }
.cmp-badge.win { background: #66e08a; color: #043214; }
.cmp-badge.lose { background: #ff7e76; color: #3b0d0d; }
.cmp-badge.tie { background: #3B82F6; color: #fff; }

.cmp-badge.is-pre {
    transform-origin: top center;
    transform: rotateX(-90deg);
    opacity: 0;
}

.cmp-badge.flip-in {
    transform-origin: top center;
    animation: cmpFlipDown 520ms cubic-bezier(.2,.8,.2,1) var(--cmp-flip-delay,0ms) both;
    will-change: transform, opacity;
}

/* ╔══════════════════════════════════╗
   ║          MEDAL LAYOUT             ║
   ╚══════════════════════════════════╝
   - Centered medal between info columns in a 5-column grid
   - Responsive adjustments for smaller screens
*/
.medal-layout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: 12px;
}

.cmp-medal-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 3;
}

.cmp-ribbon {
    position: static;
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
    transform: scale(1);
    transition: transform .2s ease, filter .2s ease;
}

.cmp-ribbon:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}

.cmp-ribbon[data-hidden="true"] {
    display: none !important;
}

/* ╔══════════════════════════════════╗
   ║           VERDICT SECTION         ║
   ╚══════════════════════════════════╝
   - Middle column content with verdict card and actions
*/
.cmp-verdict {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: var(--card-width);
    max-width: 100%;
    text-align: center;
}

.cmp-lady {
    width: 180px;
    height: auto;
}

.cmp-say {
    border: 2px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, #1a223d 0%, #16233f 60%, #111b33 100%);
    color: var(--xp-silver);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow), var(--glow);
}

.cmp-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin-top: 12px;
    padding: 0 16px;
}

.cmp-hint {
    font-size: .95rem;
    color: #dfe8ff;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
    margin: 0;
}

.cmp-primary, .sort-btn, .ux-btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    border: 0;
    cursor: pointer;
    font: 900 .95rem/1 "Inter", "Segoe UI", system-ui, sans-serif;
    background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 30%),
        linear-gradient(180deg, #6bd480, var(--xp-green));
    color: #08140c;
    box-shadow:
        0 6px 18px rgba(12,19,36,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .05s ease, filter .12s ease, box-shadow .18s ease;
}

.cmp-primary:hover, .sort-btn:hover, .ux-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.06) brightness(1.02);
    box-shadow:
        0 10px 24px rgba(12,19,36,.34),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.cmp-primary:disabled, .sort-btn:disabled, .ux-btn:disabled {
    filter: grayscale(.9) brightness(.7);
    cursor: not-allowed;
}

/* ╔══════════════════════════════════╗
   ║         VIN LINE STYLING          ║
   ╚══════════════════════════════════╝
   - Subtle VIN display below YMM
*/
.cmp-vin-line {
    display: block;
    font-size: .95rem;
    opacity: .9;
    margin-top: 2px;
    letter-spacing: .3px;
}

/* ╔══════════════════════════════════╗
   ║         SCORE BAR & POPUP         ║
   ╚══════════════════════════════════╝
   - Score bar and popup for comparison metrics
*/
.score-bar-container {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.score-popup {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
}

/* ╔══════════════════════════════════╗
   ║         ACCESSIBILITY             ║
   ╚══════════════════════════════════╝
   - Focus states and reduced motion support
*/
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #cde0ff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(58,123,242,.25);
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    .cmp-badge.is-pre,
    .cmp-badge.flip-in {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ╔══════════════════════════════════╗
   ║       HIDDEN RELIABILITY ROWS     ║
   ╚══════════════════════════════════╝
   - Hides reliability rows robustly
*/


/* ╔══════════════════════════════════╗
   ║       SCREEN SIZE OPTIMIZATIONS   ║
   ╚══════════════════════════════════╝
   - Granular breakpoints for responsive design
   - Breakpoints: small mobile (≤480px), mobile (481px–749px), tablet (750px–999px),
     desktop (1000px–1399px), large desktop (1400px–1799px), ultra-wide (≥1800px)
   - Organized from smallest to largest for clarity
   - Overrides only necessary properties per breakpoint
*/

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    :root {
        --card-radius: 8px;
        --card-width: clamp(280px, 90vw, 360px);
        --base-font: clamp(13px, 1vw + 10px, 14px);
        --title-font: clamp(16px, 1.1vw + 12px, 18px);
    }
    .cmp-wrap {
        flex-direction: column-reverse;
        gap: 12px;
        padding: 0 8px;
    }
    .cmp-col {
        width: 100%;
        max-width: 100%;
    }
    .cmp-middle {
        order: -1;
        padding: 0 8px;
    }
    .cmp-left[data-winner="true"],
    .cmp-right[data-winner="true"] {
        order: 0;
    }
    .cmp-left[data-winner="false"],
    .cmp-right[data-winner="false"] {
        order: 1;
    }
    .cmp-card {
        max-width: 100%;
        padding: 10px;
    }
    .cmp-card header {
        text-align: center;
    }
    .cmp-card header h3,
    .cmp-card .cmp-sub {
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    .cmp-sub {
        font-size: .85rem;
    }
    .cmp-gridbox {
        gap: 8px 12px;
    }
    .medal-layout {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 6px;
    }
    .cmp-medal-slot {
        grid-column: span 2;
        margin-top: 4px;
    }
    .cmp-lady {
        width: 120px;
    }
    .cmp-actions {
        flex-direction: column;
        gap: 8px;
    }
    .cmp-primary, .sort-btn, .ux-btn {
        width: 100%;
        height: 40px;
        padding: 0 16px;
    }
}

/* Mobile (481px–749px) */
@media (min-width: 481px) and (max-width: 749px) {
    :root {
        --card-radius: 10px;
        --card-width: clamp(300px, 85vw, 400px);
        --base-font: clamp(14px, 1vw + 11px, 15px);
        --title-font: clamp(18px, 1.1vw + 14px, 20px);
    }
    .cmp-wrap {
        flex-direction: column-reverse;
        gap: 16px;
        padding: 0 12px;
    }
    .cmp-col {
        width: 100%;
        max-width: 95vw;
    }
    .cmp-middle {
        order: -1;
        padding: 0 10px;
    }
    .cmp-left[data-winner="true"],
    .cmp-right[data-winner="true"] {
        order: 0;
    }
    .cmp-left[data-winner="false"],
    .cmp-right[data-winner="false"] {
        order: 1;
    }
    .cmp-card {
        max-width: 100%;
        padding: 12px;
    }
    .cmp-card header {
        text-align: center;
    }
    .cmp-card header h3,
    .cmp-card .cmp-sub {
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    .cmp-sub {
        font-size: .9rem;
    }
    .medal-layout {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 6px;
    }
    .cmp-medal-slot {
        grid-column: span 2;
        margin-top: 6px;
    }
    .cmp-lady {
        width: 140px;
    }
    .cmp-actions {
        flex-direction: column;
        gap: 10px;
    }
    .cmp-primary, .sort-btn, .ux-btn {
        width: 100%;
        height: 42px;
    }
}

/* Tablet (750px–999px) */
@media (min-width: 750px) and (max-width: 999px) {
    :root {
        --card-radius: 12px;
        --card-width: clamp(320px, 80vw, 480px);
        --base-font: clamp(15px, 1vw + 12px, 16px);
        --title-font: clamp(20px, 1.1vw + 16px, 24px);
    }
    .cmp-wrap {
        gap: 16px;
        padding: 0 16px;
    }
    .cmp-col {
        max-width: 90vw;
    }
    .cmp-card {
        max-width: 90%;
        padding: 14px;
    }
    .cmp-lady {
        width: 150px;
    }
    .medal-layout {
        gap: 8px;
    }
    .cmp-actions {
        gap: 12px;
    }
    .cmp-primary, .sort-btn, .ux-btn {
        height: 44px;
    }
}

/* Desktop (1000px–1399px) */
@media (min-width: 1000px) and (max-width: 1399px) {
    :root {
        --card-radius: 14px;
        --card-width: clamp(340px, 75vw, 600px);
        --base-font: clamp(16px, 1.05vw + 12px, 18px);
        --title-font: clamp(22px, 1.2vw + 18px, 28px);
    }
    .cmp-wrap {
        gap: 18px;
        padding: 0 20px;
    }
    .cmp-col {
        max-width: 90%;
    }
    .cmp-card {
        max-width: 90%;
    }
    .cmp-lady {
        width: 160px;
    }
    .cmp-actions {
        gap: 14px;
    }
}

/* Large Desktop (1400px–1799px) */
@media (min-width: 1400px) and (max-width: 1799px) {
    :root {
        --card-radius: 14px;
        --card-width: clamp(360px, 70vw, 720px);
        --base-font: clamp(16px, 1.05vw + 12px, 18px);
        --title-font: clamp(24px, 1.2vw + 20px, 30px);
    }
    .cmp-wrap {
        gap: 20px;
        padding: 0 24px;
    }
    .cmp-col {
        max-width: 85%;
    }
    .cmp-card {
        max-width: 85%;
        padding: 18px;
    }
    .cmp-lady {
        width: 170px;
    }
    .cmp-actions {
        gap: 16px;
    }
}

/* Ultra-Wide (≥1800px) */
@media (min-width: 1800px) {
    :root {
        --card-radius: 16px;
        --card-width: clamp(380px, 65vw, 800px);
        --base-font: clamp(17px, 1.05vw + 13px, 19px);
        --title-font: clamp(26px, 1.2vw + 22px, 32px);
    }
    .cmp-wrap {
        gap: 24px;
        padding: 0 32px;
    }
    .cmp-col {
        max-width: 80%;
    }
    .cmp-card {
        max-width: 80%;
        padding: 20px;
    }
    .cmp-lady {
        width: 180px;
    }
    .cmp-actions {
        gap: 18px;
    }
    .cmp-primary, .sort-btn, .ux-btn {
        height: 48px;
        padding: 0 24px;
    }
}

/** PINK TASK **/ Garage depreciation snapshot card */
.garage-depreciation-card {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px;
	background: rgba(12,19,36,.7);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
	font-size: .9rem;
}
.garage-depreciation-card h4 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 600;
	color: #e9eef6;
}
.garage-dep-bullets {
	margin: 4px 0 0;
	padding-left: 18px;
	font-size: .85rem;
}
.garage-dep-bullets li {
	margin-bottom: 2px;
}
.garage-dep-subtitle {
	margin: 8px 0 4px;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8db2e3;
}
.garage-dep-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .8rem;
}
.garage-dep-table td {
	padding: 3px 6px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	vertical-align: top;
}
.garage-dep-table td:nth-child(2) {
	font-weight: 600;
	color: #ffd35a;
	text-align: right;
	width: 70px;
}
.garage-dep-table tr:last-child td {
	border-bottom: none;
}
.garage-value-card {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px;
	background: rgba(15,19,30,.75);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.garage-value-card h4 {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 1rem;
}
.garage-value-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .9rem;
}
.garage-value-row {
	display: flex;
	justify-content: space-between;
}
.garage-value-row span:nth-child(2) {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.garage-legal-note {
	margin-top: 10px;
	font-size: .8rem;
	color: rgba(255,255,255,.65);
	line-height: 1.3;
}
        #cmp-reliability-a,
#cmp-reliability-b {
	display: none !important;
}