/* =====================================================================
   COMPONENT STYLES: <bk-photo-slot>
   A 4:3 photo box; the photo is shown whole (contain), never cropped.
   ===================================================================== */
.bk-photo-slot { display: grid; gap: 6px; align-content: start; }
.bk-photo-slot__label { font-weight: 700; font-size: var(--bk-step--1); }
html[lang="ur"] .bk-photo-slot__label { font-size: var(--bk-step-0); }

/* ---- 1. Frame ------------------------------------------------------ */
.bk-photo-slot__frame {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bk-cream); border: 2px dashed #d3c5ae; border-radius: var(--bk-radius);
  transition: border-color 160ms, background-color 160ms;
}
.bk-photo-slot.has-photo .bk-photo-slot__frame { border-style: solid; border-color: var(--bk-line); background: var(--bk-milk); }
.bk-photo-slot.is-drag .bk-photo-slot__frame { border-color: var(--bk-tan); background: #f3e9da; }
.bk-photo-slot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---- 2. Empty state: big "+ Add photo" button --------------------- */
.bk-photo-slot__add {
  display: grid; justify-items: center; align-content: center; gap: 4px; width: 100%; height: 100%;
  border: 0; background: transparent; color: var(--bk-ink-soft); font: inherit; font-weight: 700; cursor: pointer;
}
.bk-photo-slot__add span { font-size: 2rem; line-height: 1; color: var(--bk-tan); }
.bk-photo-slot__add:hover { color: var(--bk-ink); }
.bk-photo-slot__busy { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }

/* ---- 3. Replace / remove + error ---------------------------------- */
.bk-photo-slot__actions { display: flex; gap: var(--bk-space-3); }
.bk-photo-slot__error { color: var(--bk-henna-deep); font-size: var(--bk-step--1); }