/** Repair Center — Chọn model & lỗi (module 3). PLACEHOLDER content — see template.php.
 * Rebuilt as one continuous strip with arrow separators between steps
 * (was 4 separate bordered cards, which the mockup never showed — all 4
 * step numbers are solid red there too, not grey-then-red). */
.vnt39-rc-wizard { padding: 8px 20px 40px; background: #fff; }
.vnt39-rc-wizard .container { padding: 0; }
.vnt39-rc-wizard h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 16px; color: #111318; font-size: 22px; font-weight: 800; }
.vnt39-rc-wizard__sub { color: #667085; font-size: 13.5px; font-weight: 400; }
.vnt39-rc-wizard__steps { display: flex; min-width: 0; align-items: stretch; margin: 0; padding: 10px 18px; list-style: none; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9f9fb; overflow-x: auto; }
.vnt39-rc-wizard__step { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; transition: background .15s ease; }
.vnt39-rc-wizard__num { display: grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #a30d1b; color: #fff; font-size: 13px; font-weight: 800; }
/* background:none — these are line icons (script.js's own SVGs are
 * fill="none", stroke="currentColor"), no fill/background was ever set
 * here; at the old 18px a stroke-width:2 outline reads almost solid
 * (little white space left inside the shape at that size), which can
 * look like a filled badge rather than an outline. Explicit here so it
 * stays a clear red OUTLINE now that it's bigger, not a red block. */
.vnt39-rc-wizard__step .vnt39-rc-icon { flex-shrink: 0; width: 30px; height: 30px; background: none; color: #a30d1b; }
/* HOTFIX — on request ("icon nào màu xám m chuyển về trắng"): the step
 * icons (phone/pencil/doc) were rendering with a flat GRAY fill inside
 * the outline (measured live: computed `fill: rgb(154, 154, 154)` on the
 * <svg>/<rect>, even though the SVG markup itself carries `fill="none"` —
 * some rule beyond this module's own CSS was winning over that attribute,
 * confirmed by inspecting every loaded stylesheet's `fill` declarations
 * without finding the exact one). `!important` here doesn't try to solve
 * WHY that other rule wins — it just guarantees THIS one does instead,
 * restoring the intended plain red outline with no fill. */
.vnt39-rc-wizard__step .vnt39-rc-icon svg,
.vnt39-rc-wizard__step .vnt39-rc-icon svg * { fill: none !important; }
.vnt39-rc-wizard__text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.vnt39-rc-wizard__text b { overflow-wrap: anywhere; color: #667085; font-size: 12px; font-weight: 600; }
.vnt39-rc-wizard__text em { overflow-wrap: anywhere; color: #111318; font-size: 14px; font-weight: 700; font-style: normal; }
/* Step 2: a step not yet answered shows a muted placeholder instead of an
 * example value — "Chưa chọn" (can be picked) vs "Chưa thể chọn" (locked,
 * a prior step needs answering first) are told apart by disabled state,
 * not by this style, but both read visibly different from an answered
 * value either way. */
.vnt39-rc-wizard__text em.is-empty { color: #98a2b3; font-weight: 600; }
.vnt39-rc-wizard__arrow { display: flex; flex: 0 0 auto; align-items: center; color: #c8ccd3; }
.vnt39-rc-wizard__arrow .vnt39-rc-icon { width: 16px; height: 16px; }
/* Interactive steps (brand/model/issue/services) are clickable to open the
 * options panel below; device is a passive summary of device-picker's own
 * selection (module 2), never itself clickable. */
.vnt39-rc-wizard__step.is-interactive { cursor: pointer; }
.vnt39-rc-wizard__step.is-interactive:hover,
.vnt39-rc-wizard__step.is-open { background: #f9f9fb; }
.vnt39-rc-wizard__step.is-open .vnt39-rc-wizard__num { background: #111318; }
/* Locked (its own prerequisite isn't answered yet) — dimmed, not clickable. */
.vnt39-rc-wizard__step.is-disabled { cursor: default; opacity: .5; }
.vnt39-rc-wizard__step.is-disabled .vnt39-rc-wizard__num { background: #c8ccd3; }

/* Options panel — opens directly under the steps strip for whichever step
 * was clicked, instead of a per-step floating popover (simpler to keep
 * inside the viewport on both desktop and mobile with zero risk of
 * horizontal overflow). */
.vnt39-rc-wizard__panel { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; background: #fff; }
.vnt39-rc-wizard__panel-head { margin-bottom: 10px; color: #111318; font-size: 13px; font-weight: 800; }
.vnt39-rc-wizard__panel-options { display: flex; flex-wrap: wrap; gap: 8px; }
.vnt39-rc-wizard__option { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; border: 1.5px solid #e5e7eb; border-radius: 999px; padding: 8px 14px; background: #fff; color: #344054; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.vnt39-rc-wizard__option:hover { border-color: #a30d1b; background: #fbeae9; }
.vnt39-rc-wizard__option.is-selected { border-color: #a30d1b; background: #a30d1b; color: #fff; }
.vnt39-rc-wizard__option .vnt39-rc-icon { flex-shrink: 0; width: 14px; height: 14px; }

/* REPAIR FALLBACK — "Không tìm thấy dòng máy của bạn?" / "Không thấy lỗi
 * của bạn?" row, appended after a normal options grid; same border/radius
 * language as .vnt39-rc-wizard__panel itself (nested, one level quieter)
 * so it reads as "still part of this step" rather than a new module. */
.vnt39-rc-wizard__fallback-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.vnt39-rc-wizard__fallback-row span { min-width: 0; color: #667085; font-size: 12.5px; font-weight: 600; }
.vnt39-rc-wizard__fallback-trigger { flex-shrink: 0; border: 1.5px solid #a30d1b; border-radius: 999px; padding: 7px 14px; background: #fff; color: #a30d1b; font-size: 12.5px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background .15s ease, color .15s ease; }
.vnt39-rc-wizard__fallback-trigger:hover { background: #a30d1b; color: #fff; }
/* REPAIR FALLBACK — a device with ZERO classified models (no options grid
 * to show at all, not just "none of these matched") — no border-top/dashed
 * divider here (unlike __fallback-row above), since there is no grid above
 * it to visually separate from. */
.vnt39-rc-wizard__no-models { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vnt39-rc-wizard__no-models p { min-width: 0; margin: 0; color: #667085; font-size: 13px; font-weight: 600; }
/* Custom-model input / fallback description textarea — same field chrome
 * this plugin's other real <input>/<textarea>s already use (see e.g.
 * case-search/style.css's own input rule), not a second, different look. */
.vnt39-rc-wizard__fallback-form { display: flex; flex-direction: column; gap: 10px; }
.vnt39-rc-wizard__fallback-form label { display: flex; flex-direction: column; gap: 5px; color: #344054; font-size: 12.5px; font-weight: 700; }
.vnt39-rc-wizard__fallback-input,
.vnt39-rc-wizard__fallback-textarea { width: 100%; border: 1px solid #d0d5dd; border-radius: 8px; padding: 10px 12px; background: #fff; color: #111318; font-family: inherit; font-size: 13.5px; font-weight: 400; resize: vertical; }
.vnt39-rc-wizard__fallback-input { height: 42px; }
.vnt39-rc-wizard__fallback-input:focus,
.vnt39-rc-wizard__fallback-textarea:focus { border-color: #a30d1b; outline: 2px solid #fbeae9; outline-offset: 0; }
.vnt39-rc-wizard__fallback-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.vnt39-rc-wizard__fallback-back { border: 0; background: none; padding: 4px 0; color: #667085; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.vnt39-rc-wizard__fallback-back:hover { color: #a30d1b; }
.vnt39-rc-wizard__fallback-submit { flex-shrink: 0; border: 0; border-radius: 8px; padding: 10px 18px; background: #a30d1b; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background .15s ease; }
.vnt39-rc-wizard__fallback-submit:hover { background: #8f0b18; }
/* "Kiểm tra & chẩn đoán" confirmation — same burgundy "Miễn phí" language
 * matched-services/booking-form already use for a real Diagnostic product
 * (see those modules' own __price-note / __price-box-note rules), kept in
 * sync deliberately so this reads as the SAME outcome, not a different one. */
.vnt39-rc-wizard__diagnostic-confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vnt39-rc-wizard__diagnostic-confirm p { margin: 0; }
.vnt39-rc-wizard__diagnostic-confirm p:first-child strong { color: #a30d1b; font-size: 16px; font-weight: 800; }
.vnt39-rc-wizard__diagnostic-confirm p:nth-child(2) { color: #8a1620; font-size: 12px; font-weight: 600; }
.vnt39-rc-wizard__diagnostic-confirm .vnt39-rc-wizard__fallback-submit { margin-top: 10px; }

@media (max-width: 849px) {
	.vnt39-rc-wizard { padding: 4px 16px 28px; }
	/* One step per row, full width, with a thin divider — matches the
	 * mockup's mobile list exactly (not a 2-column wrap). */
	.vnt39-rc-wizard__steps { flex-direction: column; overflow-x: visible; }
	.vnt39-rc-wizard__step { flex: 1 1 auto; padding: 12px 2px; border-bottom: 1px solid #e5e7eb; }
	.vnt39-rc-wizard__step:last-child { border-bottom: 0; }
	.vnt39-rc-wizard__arrow { display: none; }
	.vnt39-rc-wizard__panel { padding: 12px; }
	.vnt39-rc-wizard__option { padding: 8px 12px; font-size: 12.5px; }

	/* Phase 11.7 — "Chọn model" only (brand/issue panels untouched: this
	 * relies on script.js now stamping data-vnt39-wizard-open-step on the
	 * persistent .vnt39-rc-wizard__panel node, see that file's own comment
	 * on the line that sets it). iPhone alone has ~31 models — unwrapped,
	 * that used to push the whole page hundreds of px taller on mobile.
	 * 2-column grid (data/model list itself untouched — same option.id/
	 * label from Repair data, script.js unchanged besides the one
	 * attribute) + its own internal vertical scroll instead. */
	.vnt39-rc-wizard__panel[data-vnt39-wizard-open-step="model"] .vnt39-rc-wizard__panel-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 10px;
		max-height: 300px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	/* Fill the grid cell + center the label — pills no longer size to their
	 * own text width in a 2-column grid (would leave a ragged, hard-to-tap
	 * layout), but stay the same pill visual (border/radius/colors/
	 * font untouched, only alignment inside the cell changes here). */
	.vnt39-rc-wizard__panel[data-vnt39-wizard-open-step="model"] .vnt39-rc-wizard__option {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}
/* Placeholder text if JS is disabled — the whole steps/panel UI is
 * JS-rendered (see script.js), so without it the section would otherwise
 * show nothing at all. */
.vnt39-rc-wizard__noscript { margin: 12px 0 0; color: #a30d1b; font-size: 13px; font-weight: 600; }

/* ---- UX-02 — phones/tablets: the fallback entry fields are real form fields (16px = no iOS zoom) and every fallback button is a 44px target ---- */
@media (max-width: 849px) {
	.vnt39-rc-wizard__fallback-input,
	.vnt39-rc-wizard__fallback-textarea { font-size: 16px; }
	.vnt39-rc-wizard__fallback-input { height: 48px; }
	.vnt39-rc-wizard__fallback-textarea { min-height: 96px; }
	.vnt39-rc-wizard__fallback-trigger,
	.vnt39-rc-wizard__fallback-submit,
	.vnt39-rc-wizard__fallback-back { min-height: 44px; font-size: 14px; }
}