/* SP-38 (Intake Revision) - Survey Intake 2 photo widget states (drop zone styles live in vp1.css). */
.cr-photo-drop.is-over{ border-color:var(--cr-brand); background:#f4f9f6; }
.cr-photo-card{
  display:flex; align-items:flex-start; gap:18px; padding:14px 16px; max-width:560px;
  border:1.5px solid #cbd3db; border-radius:10px; background:#fff;
}
.cr-photo-card.is-attached{ border-color:#8bd39b; background:#f7fcf8; }
.cr-photo-card__img{ flex:none; width:auto; max-width:220px; max-height:160px; object-fit:contain; border-radius:6px; background:#eef1f4; }
.cr-photo-card__nopreview{ flex:none; width:150px; height:100px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; color:var(--cr-muted); background:#eef1f4; border-radius:6px; padding:6px; }
.cr-photo-card__body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.cr-photo-card__name{ font-size:15.5px; color:var(--cr-dark); overflow-wrap:anywhere; }
.cr-photo-card__meta{ font-size:13.5px; color:var(--cr-muted); }
.cr-photo-card__note{ font-size:13px; color:var(--cr-muted); margin-top:2px; }
.cr-photo-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.cr-photo-card__actions .cr-btn--primary{ height:40px; padding:0 18px; font-size:14px; }
.cr-photo-msg{ margin:8px 0 0; max-width:560px; font-size:13.5px; color:var(--cr-muted); }
.cr-photo-msg:empty{ display:none; }
.cr-photo-msg.is-error{ color:#9c2b2b; }
@media (max-width:720px){
  .cr-photo-card{ flex-direction:column; }
  .cr-photo-card__img{ max-width:100%; }
}

/* Drop feedback on the whole photo row. */
#photo-root.is-dragging{ outline:2px dashed var(--cr-brand); outline-offset:6px; border-radius:10px; }

/* Confirmation page: the contributor's photo, small, at the bottom of the
   top-right column (R25, 2026-09-23) - .hub__top/.hub__top-right's own
   layout lives in vp1.css; this file just sizes the photo itself. */
.hub__photo{ flex:none; }
.hub__photo[hidden]{ display:none; }
.hub__photo img{ display:block; width:200px; max-width:100%; height:auto; border-radius:8px; border:1px solid var(--cr-border); }
@media (max-width:720px){
  .hub__top{ flex-direction:column; gap:14px; }
  .hub__top-right{ align-items:flex-start; }
  .hub__photo img{ width:160px; }
}

/* ---- R18: "Photo and Contact" in two columns - contact information left, photo upload + preview right ---- */
.cr-closing__cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:44px; align-items:start; margin-top:26px; }
.cr-closing__cols > #contact-root{ margin-top:0; }
#photo-root > .cr-q-label{ margin:2px 0 18px; font-size:19px; font-weight:700; line-height:1.35; color:var(--cr-dark); }
#photo-root .cr-photo-drop{ flex-direction:column; align-items:center; text-align:center; max-width:none; gap:14px; padding:26px 22px; }
#photo-root .cr-photo-drop__text{ align-items:center; flex:none; }
#photo-root .cr-photo-drop__art{ width:170px; }
#photo-root .cr-photo-card{ flex-direction:column; max-width:none; }
#photo-root .cr-photo-card__img{ width:100%; max-width:100%; max-height:320px; object-fit:contain; align-self:center; }
#photo-root .cr-photo-msg{ max-width:none; }
@media (max-width:760px){
  .cr-closing__cols{ grid-template-columns:1fr; row-gap:36px; }
}

/* R19: "Add another car" carries the contact details over; the note sits on the Contact Information heading line. */
.cr-carry-note{ margin-left:12px; font-size:13px; font-weight:400; color:var(--cr-muted); }
.cr-carry-note__clear{ background:none; border:0; padding:0; font:inherit; color:var(--cr-brand); cursor:pointer; text-decoration:none; font-weight:600; }