/* ─────────────────────────────────────────────────────────────────────────────
   _image-upload.css  —  styles for the _ImageUpload.cshtml partial widget
   Add a reference in your _Layout.cshtml or site.css:
       <link rel="stylesheet" href="~/css/_image-upload.css" />
───────────────────────────────────────────────────────────────────────────── */

.image-drop-zone {
    border-color: #dee2e6 !important;
    background-color: #f8f9fa;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.image-drop-zone:hover {
    background-color: #eef3ff;
    border-color: #0d6efd !important;
}

/* Highlight when dragging a file over the zone */
.image-drop-zone.border-primary {
    background-color: #eef3ff;
    border-color: #0d6efd !important;
}

/* Circle preview for player photos */
.image-drop-zone img.rounded-circle {
    width: 96px;
    height: 96px;
    object-fit: cover;
}

/* Square preview for logos / products */
.image-drop-zone img.rounded {
    max-height: 120px;
    max-width: 200px;
    object-fit: cover;
}