.photo-workflow{min-width:0}.photo-workflow .photo-guide{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2,var(--panel))}.photo-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.photo-guide-heading h3{margin:4px 0 0}.photo-progress-count{font-size:28px;color:var(--accent,var(--gold));white-space:nowrap}.photo-progress-count small{font-size:13px;color:var(--muted)}.photo-workflow progress{width:100%;height:6px;margin:14px 0 0;accent-color:var(--accent,var(--gold))}.photo-angle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.photo-angle{display:flex;align-items:center;flex-wrap:wrap;gap:8px;text-align:left;min-height:54px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}.photo-angle-number{font-size:12px;color:var(--muted);font-weight:700}.photo-angle small{width:100%;padding-left:26px;color:var(--muted);font-size:10px}.photo-angle.saved .photo-angle-number{color:#4dbd8f}.photo-angle[aria-pressed=true]{border-color:var(--accent,var(--gold));box-shadow:inset 0 0 0 1px var(--accent,var(--gold))}.photo-angle:disabled{opacity:.5;cursor:default}.photo-shot-hint{padding:12px;border-radius:12px;background:var(--panel);margin:12px 0}.photo-shot-hint p{margin:6px 0 0;font-size:13px;color:var(--muted)}.photo-selected{margin:12px 0;min-width:0}.photo-selected img{width:100%;max-height:260px;object-fit:contain;background:var(--bg);border-radius:12px}.photo-selected p{overflow-wrap:anywhere}.photo-selected[hidden]{display:none}.photo-file-label{display:block;margin:12px 0}.photo-workflow [data-photo-pick],.photo-workflow>button[type=submit]{width:100%}.photo-workflow input[type=file]{max-width:100%;font-size:12px}.photo-workflow input[type=file]::file-selector-button{max-width:100%}.photo-workflow button:focus-visible{outline:2px solid var(--accent,var(--gold));outline-offset:3px}@media(min-width:900px){.photo-angle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:350px){.photo-angle-grid{gap:6px}.photo-angle{font-size:12px;padding:8px}}
.photo-workflow .photo-angle-select{display:none}
.photo-angle-art{width:100%;height:76px;color:var(--muted);opacity:.8}.photo-angle[aria-pressed=true] .photo-angle-art{color:var(--accent,var(--gold));opacity:1}.photo-angle{justify-content:flex-start}.photo-angle .photo-angle-art{flex-basis:100%}

.photo-angle .photo-angle-art{display:block;width:100%;height:auto;aspect-ratio:1;background-image:url('/photo-angles-m5-gold.png');background-repeat:no-repeat;background-size:400% 200%;opacity:1;flex-basis:auto}
[data-photo-angle=front] .photo-angle-art{background-position:0% 0%}[data-photo-angle=rear] .photo-angle-art{background-position:33.333333% 0%}[data-photo-angle=left] .photo-angle-art{background-position:66.666667% 0%}[data-photo-angle=right] .photo-angle-art{background-position:100% 0%}[data-photo-angle=interior_front] .photo-angle-art{background-position:0% 100%}[data-photo-angle=interior_rear] .photo-angle-art{background-position:33.333333% 100%}[data-photo-angle=trunk] .photo-angle-art{background-position:66.666667% 100%}[data-photo-angle=defects] .photo-angle-art{background-position:100% 100%}
@media(min-width:700px){.car-wizard .photo-angle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.photo-intro{box-sizing:border-box;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel,#141419);color:var(--text,#fff);border:1px solid var(--line,#36323c);border-radius:24px;padding:24px;box-shadow:0 24px 90px #0009}.photo-intro::backdrop{background:#000b;backdrop-filter:blur(5px)}.photo-intro h2{margin:16px 0 8px}.photo-intro h3{font-size:16px;margin:22px 0 12px}.photo-intro p,.photo-intro li{font-size:14px;line-height:1.6}.photo-intro ul{padding-left:20px}.photo-intro li{margin:10px 0}.photo-intro .btn{width:100%;margin-top:14px}.photo-intro-art{height:150px;border-radius:16px;background:#09090d url('/photo-angles-m5-gold.png') 66.666667% 0% / 400% 200% no-repeat;aspect-ratio:1;width:150px;margin:auto}

.photo-angle-art,.photo-intro-art{clip-path:inset(0 0 3% 0 round 8px)}
/* Full-screen photo instructions; one continuous canvas, no nested cards. */
.photo-intro{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:max(20px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:#09090d;color:#fff;overflow:auto}.photo-intro::backdrop{background:#09090d;backdrop-filter:none}.photo-intro>*{max-width:560px;margin-left:auto;margin-right:auto}.photo-intro h2{font-size:32px;line-height:1.1;margin-top:28px}.photo-intro h3{font-size:18px}.photo-intro li,.photo-intro p{font-size:15px;line-height:1.5}.photo-intro ul{padding-left:20px}.photo-intro .photo-intro-art{width:100%;max-width:560px;height:240px;aspect-ratio:auto;margin:8px auto;background:#09090d url('/photo-angles-m5-gold.png') 66.666667% 12% / 400% auto no-repeat;clip-path:none;border-radius:0;mask-image:radial-gradient(ellipse 64% 65% at 50% 50%,#000 42%,transparent 85%)}.photo-intro .btn{display:block;min-height:54px;margin-top:20px}.photo-intro-back{display:block;margin:0 auto 0 0;width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;text-align:left}.photo-stage{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column}.photo-stage>h2{order:0}.photo-stage>p{order:1}.photo-stage>.notice{display:none}.photo-stage>.photo-workflow{order:2}.photo-stage>.photo-grid{order:3}.photo-stage>.help:last-child{order:4}.photo-workflow .photo-guide{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}.photo-angle-grid{gap:20px 12px}.photo-angle{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px;padding:0 0 12px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:center;border-bottom:1px solid #ffffff1a!important}.photo-angle[aria-pressed=true]{border-bottom-color:#f7c84a!important}.photo-angle .photo-angle-art{grid-column:1/-1;width:100%;aspect-ratio:1;clip-path:none;border-radius:0;mask-image:radial-gradient(ellipse 75% 65% at 50% 47%,#000 40%,transparent 82%)}.photo-angle-number{justify-self:end}.photo-angle-number+span{justify-self:start}.photo-angle.saved .photo-angle-number{color:#4dbd8f}.photo-defects{padding:24px 0;border-top:1px solid var(--line);margin-top:20px}.photo-defects h3{margin:0}.photo-defects>.btn{width:100%;margin-top:12px}.defect-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.defect-preview{background:none;border:0;padding:0;width:100%;cursor:pointer}.defect-preview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.defect-photos .text-link{background:none;border:0;font:inherit;font-size:12px;padding:8px 0;color:var(--muted);cursor:pointer}.photo-shot-hint{background:none!important;border:0;padding:12px 0}.photo-file-label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.photo-viewer{background:#09090d;border:0;color:#fff;padding:16px;max-width:95vw}.photo-viewer::backdrop{background:#000d}.photo-viewer img{display:block;width:100%;max-height:75dvh;object-fit:contain}.photo-viewer .btn{display:block;margin:16px auto 0}
@media(min-width:700px){.photo-intro{padding-top:28px}.photo-intro .photo-intro-art{height:280px}.photo-angle-grid{gap:22px}}
html:has(.photo-intro[open]),body:has(.photo-intro[open]){overflow:hidden}
html[data-ifareiq-business][data-theme] .photo-intro h2,.photo-intro h2{font-size:32px!important;line-height:1.1!important;margin:18px auto 12px!important;outline:none}
html[data-ifareiq-business][data-theme] .photo-intro h3,.photo-intro h3{font-size:18px!important;margin:20px auto 12px!important}
.photo-intro ul{margin:0 auto}.photo-intro li{margin:8px 0;font-size:15px}.photo-intro .photo-intro-art{height:190px}.photo-intro>.help{font-size:12px!important;margin:0 auto}.photo-intro .photo-intro-back{outline:none}.photo-intro .btn{margin-top:16px}

/* Actual images replace the guide artwork, with equal square slots. */
.photo-angle-thumbnail{display:block;grid-column:1/-1;width:100%;aspect-ratio:1;overflow:hidden;border-radius:14px;background:var(--panel);position:relative}
.photo-angle-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.photo-angle.saved .photo-angle-thumbnail{box-shadow:inset 0 0 0 1px #4dbd8f55}
.photo-angle-pending{grid-column:1/-1!important;width:auto!important;padding:0!important;justify-self:center!important;color:var(--accent,var(--gold))!important;font-size:11px!important}
.photo-pending-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.photo-pending-card{display:flex;flex-direction:column;gap:8px;min-width:0}.photo-pending-card>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}.photo-pending-card>small{color:var(--muted)}.photo-pending-status{font-size:12px;color:var(--accent,var(--gold))}.photo-pending-card .actions{display:flex;flex-wrap:wrap;gap:6px}.photo-pending-card .text-link{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:12px}