/* ---------------------------------------------------------------------------
   Suvidha Mobiles — device photo upload field (public repair / sell forms).

   Loaded only by partials/photoupload.blade.php, which pushes the <link> into
   the layout's head stack. Everything here is scoped under .photofield so it
   can never leak into the rest of a form.

   Palette tokens come from theme.css, which every layout already loads.
   --------------------------------------------------------------------------- */

.photofield .phhint{
  font-size:12.5px;line-height:1.45;color:var(--muted);margin:-2px 0 8px;
}

/* The native file button is left alone — it is the one control every browser,
   screen reader and Android keyboard already agrees on. Only the box around
   it is brought in line with .field inputs. */
.photofield input[type=file]{
  padding:10px 12px;font-size:13.5px;cursor:pointer;
  background:var(--surface-2);
}
.photofield input[type=file]::file-selector-button{
  font:inherit;font-weight:700;cursor:pointer;margin-right:10px;
  padding:7px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
}
.photofield input[type=file]:hover::file-selector-button{border-color:var(--brand);color:var(--brand-d);}

/* ---- chosen-file previews ---------------------------------------------- */
/* `hidden` has to be restated: a display rule on the same element would
   otherwise beat the browser's own [hidden] { display:none }. */
.photofield .phlist{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;}
.photofield .phlist[hidden]{display:none;}

.photofield .phitem{
  width:74px;text-align:center;font-size:11px;line-height:1.35;color:var(--muted);
  overflow:hidden;
}
.photofield .phitem img{
  width:74px;height:74px;object-fit:cover;display:block;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  margin-bottom:5px;
}
.photofield .phitem b{
  display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Client-side warning (too many files / oversized file). The server checks the
   same things again — this only saves the customer a failed round trip. */
.photofield .phwarn{
  font-size:12.5px;font-weight:650;color:var(--coral);margin-top:9px;
}
.photofield .phwarn[hidden]{display:none;}