/* ==========================================================================
   Vehicle damage selector + estimate request (Novax, 4 Nov 2026)
   The vehicle stage is always dark (automotive look); the panel and form follow
   the site's light / dark look through the theme tokens.
   ========================================================================== */

.damage { padding: var(--space-top) 0 var(--space-section); }
.damage__head { max-width: 760px; display: grid; gap: 14px; margin-bottom: 28px; }
.damage__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1023px) { .damage__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Stage ---------- */
.damage-stage {
	background: #0D0F12;
	border: 1px solid #262A30;
	border-radius: 18px;
	padding: 16px;
	color: #E3E5E8;
}
.damage-stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.damage-views { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #1B1D21; border: 1px solid #2A2E35; border-radius: 999px; }
.damage-views__tab {
	border: 0; background: transparent; color: #BDC0C6; cursor: pointer;
	font: 700 0.8125rem/1 var(--f-body); letter-spacing: .02em;
	padding: 10px 14px; border-radius: 999px; transition: background-color .18s ease, color .18s ease;
}
.damage-views__tab:hover { color: #fff; }
.damage-views__tab[aria-selected="true"] { background: #FF1724; color: #fff; }
.damage-views__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.damage-count { font-size: 0.8125rem; font-weight: 700; color: #BDC0C6; }
.damage-count [data-count] { color: #fff; }
.damage-stage__canvas { position: relative; margin-top: 10px; }
.damage-view { padding: 8px 0 2px; }
.damage-stage__hint { margin: 6px 0 0; font-size: 0.8125rem; color: #9A9EA6; }

/* ---------- Vehicle SVG ---------- */
.vehicle-svg { display: block; width: 100%; height: auto; max-height: 420px; margin: 0 auto; overflow: visible; }
.damage-view[data-view="front"] .vehicle-svg,
.damage-view[data-view="rear"] .vehicle-svg { max-width: 560px; }
.vehicle-svg__shadow { fill: rgba(0, 0, 0, .55); }
.vehicle-svg__body { fill: #1E2126; stroke: #3A3E46; stroke-width: 1.5; }
.vehicle-svg__line { fill: none; stroke: #5B6068; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.vehicle-svg__plate { fill: #D6D8DC; pointer-events: none; }
.vehicle-svg__wheels { pointer-events: none; }
.vehicle-svg .tire { fill: #08090B; stroke: #2A2D33; stroke-width: 2; }
.vehicle-svg .rim { fill: #3A3E46; stroke: #5B6068; stroke-width: 2; }
.vehicle-svg .hub { fill: #868A92; }

.vp {
	fill: #2B2F36;
	stroke: #4C515A;
	stroke-width: 1.5;
	stroke-linejoin: round;
	cursor: pointer;
	outline: none;
	transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}
.vp--glass { fill: #1A2731; }
.vp--light { fill: #C9CED6; }
.vp--tail { fill: #6E1A1F; }
.vp--grille { fill: #121417; }
.vp:hover,
.vp:focus-visible {
	fill: #FF1724;
	stroke: #FF6A72;
	filter: drop-shadow(0 0 6px rgba(255, 23, 36, .55));
}
.vp.is-selected { fill: #FF1724; stroke: #FFB3B7; }
.vp.is-selected:hover { fill: #FF3E49; }
.vp:focus-visible { stroke: #FFFFFF; stroke-width: 2.5; }

/* ---------- Tooltip ---------- */
.damage-tip {
	position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
	background: #FFFFFF; color: #0D0F12; border-radius: 8px;
	font: 700 0.75rem/1.2 var(--f-body); padding: 7px 10px; white-space: nowrap;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7);
}

/* ---------- Selected parts panel ---------- */
.damage-panel {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: 18px;
	display: grid;
	gap: 14px;
	color: var(--c-text);
}
.damage-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.damage-panel__title { margin: 0; font: 400 0.875rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; }
.damage-badge { display: inline-flex; min-width: 24px; height: 24px; padding: 0 7px; align-items: center; justify-content: center; border-radius: 999px; background: #FF1724; color: #fff; font: 800 0.75rem/1 var(--f-body); }
.damage-clear { border: 1px solid var(--c-line-2); background: transparent; color: var(--c-text); border-radius: 999px; padding: 8px 12px; font: 700 0.75rem/1 var(--f-body); cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.damage-clear:hover:not(:disabled) { border-color: #FF1724; color: #FF1724; }
.damage-clear:disabled { opacity: .45; cursor: default; }
.damage-clear:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: 2px; }
.damage-panel__empty { margin: 0; font-size: 0.875rem; color: var(--c-muted); }

.damage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.damage-item { border: 1px solid var(--c-line-2); border-left: 3px solid #FF1724; border-radius: 0 12px 12px 0; padding: 12px; display: grid; gap: 10px; background: var(--c-bg-2); }
.damage-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.damage-item__name { font-weight: 800; font-size: 0.9375rem; }
.damage-item__remove { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--c-muted); cursor: pointer; }
.damage-item__remove:hover { color: #FF1724; background: rgba(255, 23, 36, .1); }
.damage-item__remove:focus-visible { outline: 2px solid var(--c-accent-light); }
.damage-item__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
@media (max-width: 479px) { .damage-item__row { grid-template-columns: minmax(0, 1fr); } }
.damage-item__col { display: grid; gap: 4px; }
.damage-item__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.damage-item .field__input { min-height: 40px; padding: 8px 10px; font-size: 0.875rem; }

.damage-flags { display: grid; gap: 8px; }
.damage-check { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; cursor: pointer; }
.damage-check input { width: 18px; height: 18px; accent-color: #FF1724; }

.damage-services { border-top: 1px solid var(--c-line); padding-top: 12px; display: grid; gap: 10px; }
.damage-services__title { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.damage-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.damage-chip { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255, 23, 36, .45); background: rgba(255, 23, 36, .1); color: var(--c-text); font-size: 0.8125rem; font-weight: 700; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
a.damage-chip:hover { background: rgba(255, 23, 36, .2); border-color: #FF1724; }
.damage-services__note { margin: 0; font-size: 0.75rem; color: var(--c-muted); line-height: 1.5; }
.damage-panel__cta { justify-self: start; font-weight: 800; font-size: 0.875rem; color: var(--c-accent-light); text-decoration: none; }
.damage-panel__cta:hover { text-decoration: underline; }

/* ---------- Request form ---------- */
.damage-request { margin-top: 28px; scroll-margin-top: calc(var(--header-offset) + 16px); }
.damage-request__title { margin: 0 0 16px; font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.2 var(--f-display); text-transform: uppercase; color: var(--c-ink); }
.damage-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.damage-form__wide { grid-column: 1 / -1; }
.damage-form .req { color: #FF1724; }
.damage-summary { margin: 16px 0; padding: 14px; border-radius: 12px; background: var(--c-light); border: 1px solid var(--c-light-line); color: var(--c-ink); }
.damage-summary__label { margin: 0 0 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-muted); }
.damage-summary__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.875rem; }
.damage-summary__empty, .damage-summary__services { margin: 0; font-size: 0.875rem; color: var(--c-ink-muted); }
.damage-summary__services { margin-top: 8px; }
.damage-form__submit { width: 100%; }

@media (max-width: 639px) {
	.damage-stage { padding: 12px; border-radius: 14px; }
	.damage-views { width: 100%; justify-content: space-between; }
	.damage-views__tab { flex: 1 1 auto; padding: 10px 8px; }
	.damage-count { width: 100%; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.vp, .damage-views__tab, .damage-clear, .damage-chip { transition: none; }
	.vp:hover, .vp:focus-visible { filter: none; }
}

/* Fixes after testing (4 Nov 2026) */
.damage-form__label { display: inline; }
.damage-clear { white-space: nowrap; }
@media (max-width: 479px) { .damage-panel__title { font-size: 0.8125rem; } }