/* =============================================================
   GD Diagnostic — Styles
   ============================================================= */

:root {
    --gd-primary:      #162489;
    --gd-primary-dk:   #1342b5;
    --gd-success:      #059669;
    --gd-warning:      #d97706;
    --gd-text:         #111827;
    --gd-muted:        #6b7280;
    --gd-border:       #e5e7eb;
    --gd-bg:           #f9fafb;
    --gd-white:        #ffffff;
    --gd-radius:       10px;
    --gd-radius-lg:    18px;
    --gd-shadow:       0 1px 3px rgba(0,0,0,.08);
    --gd-shadow-md:    0 4px 12px rgba(0,0,0,.08);
    --gd-shadow-lg:    0 12px 32px rgba(0,0,0,.1);
    --gd-trans:        .2s ease;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.gd-diag {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px 48px;
    font-family: Amulya, "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--gd-text);
}

/* Form is narrower; results use full width */
.gd-diag__form {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.gd-diag__results {max-width: 80rem;margin-left: auto;margin-right: auto;}

/* ── Form card ───────────────────────────────────────────── */
.gd-diag__form {
    /* background: var(--gd-white); */
    border-radius: var(--gd-radius-lg);
    padding: 0px;
    @media (width >= 48rem) {
        padding: 40px;
    }
}

/* ── Header ──────────────────────────────────────────────── */
.gd-diag__header { text-align: center; margin-bottom: 28px; }
.gd-diag__title  {
    font-size: 26px;
    font-weight: 800;
    color: var(--gd-text);
    margin-bottom: 8px;

    @media (width >= 48rem) {
        font-size: 22px;
    }
}
.gd-diag__subtitle { font-size: 14px; color: var(--gd-muted); }

/* ── Progress ────────────────────────────────────────────── */
.gd-diag__progress {
    height: 6px;
    background: var(--gd-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.gd-diag__progress-bar {
    height: 100%;
    background: var(--gd-primary);
    border-radius: 3px;
    transition: width .4s ease;
}
.gd-diag__step-label {
    font-size: 12px;
    color: var(--gd-muted);
    text-align: right;
    margin-bottom: 18px;
    @media (width >= 48rem) {
        margin-bottom: 28px;
    }
}

/* ── Steps ───────────────────────────────────────────────── */
.gd-diag__step { display: none; }
.gd-diag__step.active {
    display: block;
    animation: gd-diag-in .28s ease both;
}

@keyframes gd-diag-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gd-diag--shake { animation: gd-diag-shake .45s ease; }
@keyframes gd-diag-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.gd-diag__q {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}
.gd-diag__q-hint {
    font-size: 13px;
    color: var(--gd-muted);
    margin-bottom: 18px;
}

/* ── Option grid ─────────────────────────────────────────── */
.gd-diag__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.gd-diag__options--4 { grid-template-columns: repeat(2, 1fr); }
.gd-diag__options--5 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 480px) {
    .gd-diag__options,
    .gd-diag__options--4,
    .gd-diag__options--5 {
        grid-template-columns: 1fr;
    }
}

/* ── Option card ─────────────────────────────────────────── */
.gd-diag__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--gd-border);
    border-radius: var(--gd-radius);
    cursor: pointer;
    background: var(--gd-white);
    transition: border-color var(--gd-trans), background var(--gd-trans), box-shadow var(--gd-trans);
    position: relative;
    user-select: none;
}

.gd-diag__opt:hover {
    border-color: var(--gd-primary);
    background: #eff6ff;
    box-shadow: var(--gd-shadow);
}

.gd-diag__opt input[type=radio],
.gd-diag__opt input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Selected state for radio (set via JS after change event) */
.gd-diag__opt:has(input[type=radio]:checked),
.gd-diag__opt.is-selected {
    border-color: var(--gd-primary);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.gd-diag__opt-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.gd-diag__opt-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Checkbox-style options (Q6) ─────────────────────────── */
.gd-diag__opt--check .gd-diag__check-mark {
    margin-left: auto;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--gd-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: transparent;
    transition: all var(--gd-trans);
}

.gd-diag__opt--check.is-selected .gd-diag__check-mark {
    background: var(--gd-primary);
    border-color: var(--gd-primary);
    color: var(--gd-white);
}

/* ── Navigation ──────────────────────────────────────────── */
.gd-diag__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.gd-diag__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: var(--gd-radius);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--gd-trans);
    white-space: nowrap;
}

.gd-diag__btn--primary {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: .65rem;
    margin-left: auto;
}

.gd-diag__btn--cta {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: .875rem;
    margin-left: auto;
}

.gd-diag__btn--ghost {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;

    @media (width >= 40rem) {
        --bs-btn-padding-x: 2rem;
        --bs-btn-padding-y: .65rem;
    }
}



/* ── Results section ─────────────────────────────────────── */
.gd-diag__results {padding-top: 0;}

.gd-diag__results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    margin-bottom: 24px;

    @media (width >= 48rem) {
        background: linear-gradient(45deg, #0005180f, transparent);
        padding: .5rem;
        border-radius: 156px;
        overflow: hidden;
        padding-inline-start: 1rem;
    }
}
.gd-diag__results-title { font-size: 20px; margin-bottom: 0;  font-weight: 800; }

/* ── Loading ─────────────────────────────────────────────── */
.gd-diag__loading {
    text-align: center;
    padding: 64px 24px;
    color: var(--gd-muted);
}
.gd-diag__loading p {
    font-size: 14px;
    margin-top: 16px;
    letter-spacing: .02em;
}

.gd-diag__loading-bar-wrap {
    width: 100%;
    max-width: 360px;
    height: 26px;
    border: 2px solid #78bee6;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto;
    background: transparent;
    padding: 2px;
}

.gd-diag__loading-bar {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg, #78bee6 0%, #6366f1 100%);
    transition: width .35s ease;
}

.gd-diag__loading-bar.is-running {
    animation: gd-load-progress 9s cubic-bezier(.15, .05, .25, 1) forwards;
}

.gd-diag__loading-bar.is-complete {
    animation: none;
    width: 100% !important;
    transition: width .3s ease;
}

@keyframes gd-load-progress {
    0%   { width:  0%; }
    25%  { width: 40%; }
    50%  { width: 62%; }
    75%  { width: 78%; }
    100% { width: 88%; }
}


.gd-diag__loading-title {
    font-size: clamp(1.25rem, 0.8214rem + 1.4286vw, 1.625rem);
    font-weight: 800;
    color: var(--gd-primary);
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

.gd-diag__q8-fuel-note {
    background: var(--gd-primary);
    color: #fff;
    padding: .5rem 1rem;
    margin-top: 1rem;
    border-radius: 6px;
    font-size: .875rem;
}

.gd-diag__benefit-img {
    width: 100%;
    max-width: 26rem;
    height: auto;
}
/* ── Empty state ─────────────────────────────────────────── */
.gd-diag__empty {
    text-align: center;
    padding: 48px 0;
    color: var(--gd-muted);
}
.gd-diag__empty-icon { font-size: 48px; margin-bottom: 12px; }
.gd-diag__empty p    { margin-bottom: 20px; font-size: 15px; line-height: 1.6; }

/* ── No image placeholder ────────────────────────────────── */
.gd-diag__no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--gd-border);
    background: var(--gd-bg);
}
.gd-diag__grid {
    max-width: 80rem;
}

/* ═══════════════════════════════════════════════════════════
   FEATURED CARD
   ═══════════════════════════════════════════════════════════ */

.gd-diag__benefit {
    display: flex;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin: 0 2px 2px 0;
    padding: 5px 10px;
    background: #393b72;
    color: #fff;
    align-items: center;
    gap: 6px;
}

.gd-diag__benefit::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23e3e3e3'><path d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

.gd-diag__featured {
    border-radius: var(--gd-radius-lg);
    overflow: hidden;
    animation: gd-diag-in .35s ease both;
}

/* Rank header */
.gd-diag__featured-rank {
    text-align: right;
    margin-bottom: 1rem;
}
.gd-diag__rank-label {
    font-size: clamp(1.125rem, 0.6964rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gd-primary);
    text-transform: uppercase;
    margin-bottom: 0;
}
.gd-diag__rank-match {
    font-size: clamp(1.125rem, 0.6964rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    color: var(--gd-secondary);
    margin-top: 0;
}

/* Two-column body */
.gd-diag__featured-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Left column ─────────────────────────────────────────── */
.gd-diag__featured-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* grid-column: span 5 / span 5; */
}

.gd-diag__featured-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border-radius: 1.8rem;
    border: 1px solid #eee;
}
.gd-diag__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;

}

/* CTA buttons */
.gd-diag__featured-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: column;

    @media (width >= 40rem) {
        flex-direction: row;
    }
}

.gd-diag__btn-testdrive,
.gd-diag__btn-details {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 1rem;
    font-size: clamp(1rem, 0.8571rem + 0.4762vw, 1.125rem);
    font-weight: 400;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all var(--gd-trans);
    white-space: nowrap;
    min-width: 0;
}
.gd-diag__btn-testdrive {
    background: var(--gd-secondary);
    color: var(--gd-white);
    border: 2px solid transparent;
}
.gd-diag__btn-testdrive:hover { background: var(--gd-primary); border-color: var(--gd-primary); color: var(--gd-white); }

.gd-diag__btn-details {
    background: transparent;
    color: var(--gd-primary);
    border: 2px solid var(--gd-primary);
}
.gd-diag__btn-details:hover { background: var(--gd-primary); color: var(--gd-white); }


.gd-diag__specs {
    color: var(--gd-primary);
    padding-bottom: .5rem;
    display: flex;
    row-gap: .5rem;
    column-gap: 1rem;
    font-size: clamp(1.25rem, 1.1071rem + 0.4762vw, 1.375rem);
    flex-wrap: wrap;
}


.gd-diag__specs-icon {
    display: inline-flex;
    align-items: center;
    padding-left: 30px;
    position: relative;
}

.gd-diag__specs-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background: no-repeat center/contain;
}
.icon-year{
    padding: .35rem 1rem;
    border: 3px solid #78bee6;
    border-radius: .875rem;
    line-height: 1;
}
._icon-year::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_293_167)'%3E%3Cpath d='M13.3333 2.5C13.7607 2.5 14.1129 2.8217 14.1611 3.23615L14.1667 3.33333V4.16667H15.8333C16.712 4.16667 17.4318 4.84656 17.4954 5.70895L17.5 5.83333V15.8333C17.5 16.712 16.8201 17.4318 15.9577 17.4954L15.8333 17.5H4.16667C3.28803 17.5 2.5682 16.8201 2.50457 15.9577L2.5 15.8333V5.83333C2.5 4.9547 3.1799 4.23486 4.04228 4.17124L4.16667 4.16667H5.83333V3.33333C5.83333 2.8731 6.20643 2.5 6.66667 2.5C7.09403 2.5 7.44626 2.8217 7.49439 3.23615L7.5 3.33333V4.16667H12.5V3.33333C12.5 2.8731 12.8731 2.5 13.3333 2.5ZM15.8333 10H4.16667V15.8333H15.8333V10ZM15.8333 5.83333H4.16667V8.33333H15.8333V5.83333Z' fill='%23535862'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_293_167'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.icon-fuel::before {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_293_183)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.16675 2.5C3.24627 2.5 2.50008 3.24619 2.50008 4.16667V15.8333C2.03985 15.8333 1.66675 16.2064 1.66675 16.6667C1.66675 17.1269 2.03985 17.5 2.50008 17.5H12.5001C12.9603 17.5 13.3334 17.1269 13.3334 16.6667C13.3334 16.2064 12.9603 15.8333 12.5001 15.8333V11.6667H13.3334V13.75C13.3334 14.9006 14.2662 15.8333 15.4167 15.8333C16.5673 15.8333 17.5001 14.9006 17.5001 13.75V8.6785C17.5001 8.23648 17.3245 7.81256 17.0119 7.5L14.756 5.24408C14.4306 4.91864 13.9029 4.91864 13.5775 5.24408C13.2521 5.56952 13.2521 6.09715 13.5775 6.42259L14.495 7.34012C14.4731 7.36966 14.4521 7.39997 14.4322 7.43102C14.2762 7.67317 14.1857 7.95162 14.1694 8.23918C14.1532 8.52675 14.2117 8.81367 14.3393 9.07183C14.4669 9.33 14.6592 9.55075 14.8976 9.7125C15.136 9.87417 15.4122 9.97142 15.6992 9.99458C15.744 9.99817 15.7887 10 15.8334 10V13.75C15.8334 13.9801 15.6468 14.1667 15.4167 14.1667C15.1867 14.1667 15.0001 13.9801 15.0001 13.75V11.6667C15.0001 10.7462 14.2539 10 13.3334 10H12.5001V4.16667C12.5001 3.24619 11.7539 2.5 10.8334 2.5H4.16675ZM10.8334 9.16667V4.16667H4.16675V9.16667H10.8334ZM4.16675 10.8333H10.8334V15.8333H4.16675V10.8333Z' fill='%2378bee6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_293_183'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.icon-mileage::before {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_293_175)'%3E%3Cpath d='M6.86873 2.52487C7.31523 2.63649 7.58669 3.08893 7.47507 3.53543L4.14173 16.8687C4.03012 17.3152 3.57767 17.5867 3.13118 17.4751C2.68468 17.3635 2.41321 16.9111 2.52483 16.4646L5.85817 3.13121C5.96979 2.68471 6.42223 2.41324 6.86873 2.52487ZM14.1417 3.13121L17.475 16.4646C17.5867 16.9111 17.3152 17.3635 16.8687 17.4751C16.4222 17.5867 15.9698 17.3152 15.8582 16.8687L12.5249 3.53543C12.4132 3.08893 12.6847 2.63649 13.1312 2.52487C13.5777 2.41324 14.0301 2.68471 14.1417 3.13121ZM9.99996 14.1667C10.4273 14.1667 10.7796 14.4883 10.8277 14.9028L10.8333 15V16.6667C10.8333 17.1269 10.4602 17.5 9.99996 17.5C9.57258 17.5 9.22037 17.1783 9.17223 16.7638L9.16663 16.6667V15C9.16663 14.5397 9.53971 14.1667 9.99996 14.1667ZM9.99996 8.33332C10.4602 8.33332 10.8333 8.70641 10.8333 9.16665V10.8333C10.8333 11.2936 10.4602 11.6666 9.99996 11.6666C9.53971 11.6666 9.16663 11.2936 9.16663 10.8333V9.16665C9.16663 8.70641 9.53971 8.33332 9.99996 8.33332ZM9.99996 2.49998C10.4273 2.49998 10.7796 2.82169 10.8277 3.23613L10.8333 3.33332V4.99998C10.8333 5.46022 10.4602 5.83332 9.99996 5.83332C9.57258 5.83332 9.22037 5.51162 9.17223 5.09717L9.16663 4.99998V3.33332C9.16663 2.87308 9.53971 2.49998 9.99996 2.49998Z' fill='%2378bee6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_293_175'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}


.suggestion_specs {
    gap: 0.5rem;
    font-size: clamp(0.75rem, 0.6071rem + 0.4762vw, 0.875rem);
    font-size: clamp(0.625rem, 0.4821rem + 0.4762vw, 0.75rem);
}



.suggestion_specs .gd-diag__specs-icon {
    display: inline-flex;
    align-items: center;
    padding-left: 26px;
    position: relative;
}

.suggestion_specs .icon-year{
    padding: .2rem .5rem;
    border: 2px solid #78bee6;
    border-radius: .5rem;
    line-height: 1;
}
.suggestion_specs .gd-diag__specs-icon::before {
    width: 20px;
    height: 20px;
}

.gd-diag__meta-container{
    display: flex;
    justify-content: space-between;
    gap:1rem;
    align-items: start;
    flex-direction: column;
    @media (width >= 40rem) {
        flex-direction: row;
    }
}

.gd-diag__featured-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    max-width: 25rem;
    order:1;


    @media (width >= 40rem) {
        order:0;
    }
}
.gd-diag__featured-title {
    font-size: clamp(1.25rem, 0.3929rem + 2.8571vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    color: #162489;
}
.gd-diag__featured-version {
    font-size: 12px;
    color: var(--gd-muted);
}
.gd-diag__featured-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem 1rem;
    border-radius: 1rem;
    font-size: clamp(1.25rem, 0.8214rem + 1.4286vw, 1.625rem);
    font-weight: 400;
    background: transparent;
    color: var(--gd-primary);
    border: 2px solid var(--gd-primary);
}

/* ── Right column ────────────────────────────────────────── */
.gd-diag__featured-right {
    display: flex;
    flex-direction: column;
    /* grid-column: span 4 / span 4; */
    /* grid-column-start: 7; */
}

.gd-diag__match-text{
    background: #f9fefe;
    border: 2px solid var(--gd-secondary);
    padding: .875rem 1.5rem;
    border-radius: 1rem;
    color: var(--gd-primary);
    font-weight: 400;
}

.gd-diag__match-text p{
    margin-bottom:0;
    font-size: .875rem;
}
/* Others section */
.gd-diag__others {
    width:100%;
    /*padding-top: 4rem;*/
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 36rem;
    margin-left: auto;

    @media (width >= 40rem) {
        gap: 2rem;
    }
}
.gd-diag__others-title {
    font-size: clamp(1.125rem, 0.6964rem + 1.4286vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--gd-primary);
    margin-bottom: 16px;
    padding-bottom: .5rem;
    border-width: 0;
    border-bottom: 4px;
    border-style: solid;
    border-image: linear-gradient(90deg,rgba(120, 190, 230, 1) 0%, rgba(120, 190, 230, 0) 100%) 1;
    margin-bottom: 0;
}
.gd-diag__others-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    @media (width < 48rem) {
            grid-template-columns: 1fr;
    }
}

/* Suggestion card */

.gd-diag__suggestion {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: .875rem;
    overflow: hidden;
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, rgba(120, 190, 230, 1) 0%, rgb(22, 36, 137) 100%) border-box;

    border-radius: 1.6rem;
    border: 4px solid transparent;
}

.gd-diag__suggestion:hover {
    border-color: var(--gd-primary);
    box-shadow: var(--gd-shadow);
}

.gd-diag__suggestion-img {
    width: 100%;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}
.gd-diag__suggestion-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    object-position: center;
}

.gd-diag__suggestion-body {

}
.gd-diag__suggestion-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--gd-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


.gd-diag__suggestion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    flex-wrap: wrap;
}
.gd-diag__suggestion-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--gd-primary);
    background: rgba(22,36,137,.08);
    padding: 2px 8px;
    border-radius: 20px;
    width: 100%;
    text-align: center;
}
.gd-diag__btn-learn-more {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gd-white);
    background: var(--gd-primary);
    padding: 6px 10px;
    border-radius: 56px;
    transition: background var(--gd-trans);
    white-space: nowrap;
    line-height: 1.4;
    width: 100%;
    text-align: center;
}
.gd-diag__btn-learn-more:hover { background: var(--gd-primary); color: var(--gd-white); }

/* Stock CTA */
.gd-diag__stock-cta {
    align-self: center;
    text-align: center;
}
.gd-diag__btn-stock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .5rem 1.8rem;
    background: var(--gd-primary);
    color: var(--gd-white);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 1.2rem;
    transition: background var(--gd-trans);
    /* padding-inline: 1rem; */
}
.gd-diag__btn-stock:hover { background: var(--gd-primary); color: var(--gd-white); }

/* ── Responsive ──────────────────────────────────────────── */
@media (width < 64rem) {
    .gd-diag__featured-body {
        grid-template-columns: 1fr;
    }
    .gd-diag__featured-left {
        border-right: none;
        border-bottom: 1px solid var(--gd-border);
        gap: 1.5rem;
    }
    .gd-diag__rank-label { font-size: 18px; }
    .gd-diag__featured-price { font-size: 20px; }
    .gd-diag__suggestion-img {width: 100%; height: 180px;}
    .gd-diag__others{ padding-top: 1rem;  max-width: 100%;}
    .gd-diag__suggestion-footer{ flex-wrap: nowrap}
    .gd-diag__suggestion-title {font-size:1rem}
}

/* ── Lead form ───────────────────────────────────────────── */
.gd-diag__step--lead .gd-diag__lead-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}
.gd-diag__step--lead .gd-diag__field { display: flex; flex-direction: column; }

/* ── Error ───────────────────────────────────────────────── */
.gd-diag__error {
    text-align: center;
    color: #b91c1c;
    padding: 24px 0;
}


/* ── Fallback consultant banner ── */
.gd-diag__fallback {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 24px;
}
.gd-diag__fallback-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.4;
    display: none;
}
.gd-diag__fallback p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #92400e;
}


/* ── Contextual hint banner (inside form) ── */
.gd-diag__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ebf5ff;
    border-left: 4px solid #3b82f6;
    border-radius: 6px;
    padding: 8px 12px;
    margin-block: 10px;
}
.gd-diag__hint-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.5;
}
.gd-diag__hint p {
    margin: 0;
    font-size: 12px;
    line-height: 1rem;
    color: #00254d;
    font-weight: 400;
    word-break: break-word;
}

/* ── Refinement prompt banner (results) ── */
.gd-diag__refinement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
}
.gd-diag__refinement-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.4;
}
.gd-diag__refinement p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #166534;
}
.gd-diag__btn--sm {
    padding: 6px 14px;
    font-size: 13px;
}

.gd-diag__btn--alt {
    background: #16a34a;
    color: #fff;
    font-weight: 500;
}

/* ── Per-vehicle matched equipment reason ── */
.gd-diag__match-reason {
    font-size: 12px;
    color: var(--gd-muted);
    font-style: italic;
    margin: 4px 0 6px;
    line-height: 1.4;
    display: none;
}

/* ── Assistente Virtual ── */
.gd-va {
    position: relative;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}
.gd-va__robot {
    width: 64px;
    height: 64px;
    display: block;
    animation: gd-va-float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
    pointer-events: auto;
    cursor: default;
}
._gd-va__robot.is-talking {
    animation: gd-va-talk .4s ease-in-out 3, gd-va-float 3s ease-in-out infinite 1.2s;
}
.gd-va__bubble {
    background: var(--gd-white);
    border: 1px solid var(--gd-border);
    border-radius: 12px 12px 4px 12px;
    box-shadow: var(--gd-shadow-md);
    padding: 10px 14px;
    max-width: 220px;
    pointer-events: auto;
    animation: gd-va-fadein .25s ease;
}
.gd-va__bubble p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gd-text);
}
/* tail */
.gd-va__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    border: 8px solid transparent;
    border-top-color: var(--gd-white);
    border-bottom: 0;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
    gap: 16px;
}
.gd-va__bubble { position: relative; }

@keyframes gd-va-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes gd-va-talk {
    0%, 100% { transform: translateY(-4px) scale(1); }
    50%      { transform: translateY(-4px) scale(1.06) rotate(-2deg); }
}
@keyframes gd-va-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {

    .gd-va__robot {
        width: 48px;
        height: 48px;
    }
    .gd-va__bubble {
        max-width: calc(100vw - 125px);
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* ── Inline test-drive form ── */
.gd-diag__td-form {
    background: var(--gd-white);
    border: 1px solid #F1F0F0;
    border-radius:  24px;
    padding: 20px 22px 18px;
    box-shadow: rgba(99, 99, 99, 0.06) 0px 2px 8px 0px;
}
.gd-diag__td-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gd-primary);
    margin-bottom: 16px;
}
.gd-diag__td-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}
@media (max-width: 520px) {
    .gd-diag__td-grid {
        grid-template-columns: 1fr;
    }
}
.gd-diag__td-grid .form-control,
.gd-diag__td-grid .form-select {
    color: var(--gd-text);
    font-size: 14px;
}
.gd-diag__td-grid .form-control:focus,
.gd-diag__td-grid .form-select:focus {
    border-color: var(--gd-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--gd-primary) 20%, transparent);
}
.gd-diag__td-grid .form-floating > label {
    color: var(--gd-muted);
    font-size: 13px;
}
.gd-diag__td-grid .invalid-feedback{
    font-size: .75rem;
}
.gd-diag__td-msg {
    font-size: 12px;
    color: #dc2626;
    min-height: 16px;
    margin-top: 8px;
}
.gd-diag__td-success {
    display: block;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #166534;
    font-weight: 500;
    margin: 0;
}
.gd-diag__td-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.gd-diag__td-actions .btn-primary {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;
    font-weight: 600;
    font-size: .875rem;
    padding-block: 0.65rem;
    border-radius: .875rem;
}