/* ════════════════════════════════════════════════════════════════════════
   bo-photos.css — booking photos (mirrors iOS PhotosPicker → booking-photos
   bucket). Thumbnails + upload control inside the booking detail pane.
   Private bucket → images load via signed URLs. Tokens only (DESIGN.md).
   ════════════════════════════════════════════════════════════════════════ */

.bo-photos-block { display: grid; gap: 10px; }
.bo-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.bo-photos-empty { font-size: 13px; color: var(--text-muted); }

.bo-photo-cell { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-tertiary); border: 1px solid var(--border-color); }
.bo-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-photo-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-muted); font-size: 18px; }
.bo-photo-del {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(14, 12, 11, 0.72); color: var(--paper, #ece2cd); font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.bo-photo-del:hover { background: var(--danger); color: #fff; }

.bo-photos-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--crimson); padding: 11px;
  background: rgba(var(--crimson-rgb), 0.10);
  border: 1px solid rgba(var(--crimson-rgb), 0.3); border-radius: 11px;
}
.bo-photos-add:hover { background: rgba(var(--crimson-rgb), 0.16); }