/* Bug 65 — shared image upload field styling for the
 * templates/include/image_upload_field.html macro. Kept in a
 * dedicated file (rather than css/zimun.css) because the core file
 * is at its 5000-line cap. Loaded from any page that uses the
 * macro. */

.image-upload-field { display: flex; flex-direction: column; gap: 8px; }
.image-upload-preview { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: rgba(251, 247, 241, 0.6); display: flex; align-items: center; justify-content: center; }
.image-upload-preview--square { aspect-ratio: 1 / 1; width: 200px; max-width: 100%; }
.image-upload-preview--wide   { aspect-ratio: 16 / 9; width: 100%; max-width: 400px; }
.image-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-upload-placeholder { color: var(--muted); font-size: 14px; padding: 12px; text-align: center; }

.image-upload-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.image-upload-clear[hidden] { display: none; }
.image-upload-remove-current { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-left: 4px; }
.image-upload-remove-current input[type="checkbox"] { margin: 0; }