/* rv_repair.css -- the repair request page (information/repair.tpl), 2026-10-03 (ticket 2026-10-01_11-49-03_Russell). Only what is the page's own:
 * the CMS text above the form, the delivery choice, the photo picker, the message under Submit and the video row. Cards, fields, buttons, choices, messages, field states and
 * the telephone come from rv_theme.css; the form's columns, stages, staff search and dialogs from rv_addrform.css (#rv-repair is in its list); the videos from rv_site.css. */


/* ---- the CMS text (Catalog > Information, "Rexair Authorized Rainbow Vacuum Repair & Service Center"): staff write it with inline styles meant for the old white page.
   The two that matter are mapped here instead of rewriting the stored text (the old page still shows it until promotion): a yellow highlight becomes the theme's
   amber note, and the floated picture keeps its float on wide screens. */
.rv-repair-intro { color:var(--txt); font-size:15px; line-height:1.65; max-width:900px; }
.rv-repair-intro p { margin:0 0 14px; }
.rv-repair-intro h2 { margin:22px 0 10px; font-size:20px; color:var(--txt); clear:both; }
.rv-repair-intro a { color:var(--accent2); }
.rv-repair-intro ul { margin:0 0 16px 20px; padding:0; list-style:disc; }
.rv-repair-intro li { margin:0 0 6px; }
.rv-repair-intro strong, .rv-repair-intro b { color:#fff; }
/* the yellow highlight mapping moved to rv_theme.css "ADMIN-WRITTEN TEXT" (2026-10-07): one rule for the repair intro, the information pages and the Contact card */
.rv-repair-intro span[style*="background-color"] strong, .rv-repair-intro span[style*="background-color"] span { color:#fbbf24; }
.rv-repair-intro img[style*="float"] { margin:4px 18px 10px 0; border-radius:14px; max-width:40%; height:auto !important; }
.rv-repair-intro .video-wrapper { max-width:720px; margin:6px 0 18px; }
@media (max-width:600px) { .rv-repair-intro img[style*="float"] { float:none !important; display:block; max-width:70%; margin:0 auto 12px; } }

/* ---- the form */
#rv-repair { margin-top:26px; clear:both; }
#rv-repair > h2 { margin:0 0 8px; font-size:22px; color:var(--txt); }
#rv-repair .rv-repaircols { margin-top:14px; }
#rv-repair textarea { min-height:140px; resize:vertical; }
#rv-repair input[type=date] { color-scheme:dark; max-width:240px; }
/* "What happens next": numbered steps in our cyan (--accent2), easy to read (Russell 10/3: "very small and not very inviting to read") */
#rv-repair .rv-next { margin:2px 0 10px; padding:13px 15px 12px; border:1px solid rgba(34,211,238,.35); border-left:4px solid var(--accent2); border-radius:10px; background:rgba(34,211,238,.07); color:var(--txt); font-size:14px; line-height:1.55; }
#rv-repair .rv-next b { color:var(--txt); }
#rv-repair .rv-next-h { margin:0 0 8px; color:var(--accent2); font-weight:700; font-size:15px; }
#rv-repair .rv-next ol { margin:0; padding:0; list-style:none; counter-reset:rvstep; }
#rv-repair .rv-next li { position:relative; margin:0 0 7px; padding-left:34px; counter-increment:rvstep; }
#rv-repair .rv-next li::before { content:counter(rvstep); position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%; background:var(--accent2); color:#06202a; font-weight:700; font-size:13px; line-height:23px; text-align:center; }
#rv-repair .rv-next-f { margin:9px 0 0; padding-top:8px; border-top:1px solid rgba(34,211,238,.22); color:var(--muted); font-size:13px; }
#rv-repair .rv-dropoff a { font-weight:600; }
#rv-repair .rv-methods { margin-bottom:12px; }
#rv-repair .rv-method .rv-fieldhint { margin:0; }

/* photos: the native picker is hidden (still focusable and announced) behind a themed button; the picked files are a list with a remove x each */
#rv-repair .rv-fileinput { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
#rv-repair .rv-filebtn { display:inline-flex; width:auto; text-transform:none; letter-spacing:0; font-size:13px; color:var(--txt); margin:0; }
#rv-repair .rv-fileinput:focus-visible + .rv-filebtn { outline:2px solid var(--accent2); outline-offset:2px; }
#rv-repair .rv-filebtn.is-off { opacity:.55; cursor:not-allowed; }
#rv-repair .rv-filelist { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
#rv-repair .rv-filelist:empty { display:none; }
#rv-repair .rv-filelist li { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:#0a1020; font-size:13px; }
#rv-repair .rv-fname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); }
#rv-repair .rv-fsize { flex:none; color:var(--muted); font-size:12px; }
#rv-repair .rv-fdel { flex:none; width:28px; height:28px; padding:0; border:1px solid var(--line2); border-radius:8px; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
#rv-repair .rv-fdel:hover { border-color:var(--bad); color:var(--bad); }

/* the message under Submit (a problem with no box of its own, the duplicate-ticket question, "sent") */
#rv-repair .rv-formmsg { margin-top:12px; max-width:760px; }
#rv-repair .rv-formmsg:empty { display:none; }
#rv-repair .rv-formmsg .rowmsg { margin:0; font-size:13.5px; line-height:1.55; }
#rv-repair .rv-dupe .rv-btnrow { margin-top:12px; }
#rv-repair #rv-repair-submit.is-busy { opacity:.65; cursor:progress; }

/* ---- the two videos under the form (the home page's .video-row / .video-col) */
.rv-repair .rv-repair-more { margin-top:34px; }
.rv-repair .rv-repair-more h2 { color:var(--txt); }

/* Success page: the next steps as Step cards (lib/rv_repair_steps.php rv_repair_steps_web; the e-mails show the same steps as inline-styled cards). Russell 10/3:
   "Step 1 bullet points, Step 2 bullet points ... make them like cards to make it super simple". Two across on a wide screen, one column on a phone. */
.rv-repairdone .rv-donelead { margin:0 0 16px; font-size:16px; color:var(--txt); }
.rv-repairdone .rv-stepcards { list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.rv-repairdone .rv-stepcard { margin:0; padding:16px 18px 14px; border:1px solid rgba(34,211,238,.35); border-left:4px solid var(--accent2); border-radius:12px; background:rgba(34,211,238,.07); color:var(--txt); }
.rv-repairdone .rv-stepnum { margin:0; color:var(--accent2); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.rv-repairdone .rv-stepcard h3 { margin:2px 0 8px; font-size:18px; line-height:1.3; color:var(--txt); }
.rv-repairdone .rv-stepcard ul { margin:0; padding-left:18px; }
.rv-repairdone .rv-stepcard li { margin:0 0 6px; font-size:14px; line-height:1.55; }
.rv-repairdone .rv-stepcard li::marker { color:var(--accent2); }
.rv-repairdone .rv-stepbtn { margin:10px 0 0; }
@media (max-width:720px) { .rv-repairdone .rv-stepcards { grid-template-columns:minmax(0, 1fr); } }
/* walk-in card: the satellite picture with the ENTRANCE arrow (lib/rv_repair_steps.php) */
.rv-repairdone .rv-stepimg { margin:10px 0 0; }
.rv-repairdone .rv-stepimg img { display:block; width:100%; max-width:560px; height:auto; border-radius:8px; border:1px solid rgba(34,211,238,.35); }
.rv-repairdone .rv-stepimg small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }
/* rv_site.css gives every .btn width:100% (old theme); on this page a button is as wide as its words. The poster is a plain "how to pack" still (the old one said
   "UPS or FedEx will arrive ... pick up", wrong for a drop-off and FedEx is not offered), made 10/3 like the drop-off e-mail's thumbnail. */
.rv-repairdone .btn { width:auto; }