/*
 * iTONA — Photo Capture Styles
 * ADD these rules to the bottom of canwyf-app/public/app/css/app.css
 * ============================================================
 */

/* ─── Photo Zone ───────────────────────────────────────────────────────────── */
.photo-zone {
  background:    var(--bg-card);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  padding:       14px;
  margin-bottom: 4px;
}

.photo-preview-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin-bottom: 12px;
}
.photo-preview-row:empty { margin-bottom: 0; }

.photo-thumb {
  position:      relative;
  width:         80px;
  height:        80px;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  border:        1.5px solid var(--green);
  flex-shrink:   0;
}
.photo-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.photo-thumb-info {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  background: rgba(0,0,0,0.6);
  padding:    2px 4px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}
.photo-size {
  font-size: 0.6rem;
  color:     rgba(255,255,255,0.8);
}
.photo-status {
  font-size: 0.65rem;
}
.photo-status.uploaded { color: #7fff7f; }
.photo-status.pending  { color: var(--gold); }

.photo-remove {
  position:         absolute;
  top:              2px;
  right:            2px;
  background:       var(--red);
  border:           none;
  border-radius:    50%;
  color:            white;
  width:            18px;
  height:           18px;
  font-size:        0.65rem;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  line-height:      1;
  -webkit-tap-highlight-color: transparent;
}

/* Photo action buttons */
.photo-actions {
  display: flex;
  gap:     8px;
}
.btn-photo {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         12px 8px;
  background:      var(--bg-input);
  border:          1.5px solid var(--green);
  border-radius:   var(--radius-sm);
  color:           var(--green);
  font-size:       0.85rem;
  font-weight:     600;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-photo:active { opacity: 0.7; }
.btn-photo:disabled {
  border-color: var(--border);
  color:        var(--text-muted);
  cursor:       not-allowed;
}
.btn-photo-gallery {
  border-color: var(--blue);
  color:        #7abaff;
}

.photo-hint {
  font-size:  0.72rem;
  color:      var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

.photo-error {
  font-size:  0.8rem;
  color:      var(--red);
  margin-top: 8px;
}