/**
 * Face Detection Overlay Styles
 * Minimalistic design with primary/secondary colours
 */

/* Container for face overlays on main image */
#face-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Individual face bounding box */
.face-overlay {
    position: absolute;
    border: 2px solid var(--bs-primary);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.9;
}

.face-overlay:hover {
    border-color: var(--bs-primary);
    border-width: 3px;
    z-index: 10;
    opacity: 1;
}

/* Face number label */
.face-overlay .face-label {
    position: absolute;
    top: -26px;
    left: 0;
    background: var(--bs-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.face-overlay:hover .face-label {
    background: var(--bs-primary);
}

/* Face thumbnail cards */
.face-card {
    transition: transform 0.15s ease;
    cursor: pointer;
    position: relative;
}

.face-search-link {
    display: block;
    text-decoration: none;
}

.face-card:hover {
    transform: scale(1.05);
}

.face-card:hover .face-thumbnail-container {
    border-color: var(--bs-primary) !important;
    border-width: 2px !important;
}

.face-card.highlighted .face-thumbnail-container {
    border-color: var(--bs-primary) !important;
    border-width: 3px !important;
}

/* Face thumbnail container */
.face-thumbnail-container {
    background: var(--bs-body-bg);
    position: relative;
}

.face-thumbnail-container img {
    transform-origin: top left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .face-overlay .face-label {
        font-size: 10px;
        padding: 2px 6px;
        top: -22px;
    }
}

/* Smooth fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}

.face-overlay {
    animation: fadeIn 0.2s ease forwards;
}