/* Custom animation for scanning effect */
@keyframes scan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

.scan-container {
    position: relative;
    width: 160px;
    height: 160px;
}

.scan-container img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    overflow: hidden;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(34, 197, 94, 0.4), transparent);
    animation: scan 2s linear infinite;
}

/* Spinner animation used in modals and during scanning */
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 2rem;
    height: 2rem;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #38bdf8; /* Accent color */
    border-radius: 9999px;
    animation: rotate 1s linear infinite;
    margin-left: auto;
    margin-right: auto;
}