/* Custom Styles for Aesthetic Clinic Diagnostic App */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.filled-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Step transitions */
.step {
    display: none;
    animation: fadeIn 0.4s ease-out;
}
.step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Radio card styles */
.radio-card-input:checked + .radio-card-content {
    border-color: #1392ec;
    background-color: rgba(19, 146, 236, 0.05);
    box-shadow: 0 0 0 1px #1392ec;
}
.radio-card-input:checked + .radio-card-content .radio-indicator {
    background-color: #1392ec;
    border-color: #1392ec;
}
.radio-card-input:checked + .radio-card-content .radio-indicator::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Photo upload */
.photo-slot {
    transition: all 0.3s ease;
}
.photo-slot:hover {
    border-color: #1392ec;
}
.photo-slot.has-photo {
    border-style: solid;
    border-color: #1392ec;
}

/* Loader animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes scanLine {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}

.loader-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.loader-spin {
    animation: spin 1s linear infinite;
}
.scan-line {
    animation: scanLine 2s ease-in-out infinite;
}

/* Score gauge animation */
.gauge-circle {
    transition: stroke-dashoffset 1s ease-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Score colors */
.score-excellent { color: #22c55e; }
.score-good { color: #3b82f6; }
.score-moderate { color: #eab308; }
.score-attention { color: #ef4444; }

.bg-score-excellent { background-color: #22c55e; }
.bg-score-good { background-color: #3b82f6; }
.bg-score-moderate { background-color: #eab308; }
.bg-score-attention { background-color: #ef4444; }

/* Priority badges */
.priority-high { background-color: #fef2f2; color: #dc2626; border-color: #fecaca; }
.priority-medium { background-color: #fefce8; color: #ca8a04; border-color: #fef08a; }
.priority-low { background-color: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.shake {
    animation: shake 0.3s ease-in-out;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #dbe1e6;
    border-radius: 20px;
}

/* Drag and drop hover */
.dropzone-hover {
    border-color: #1392ec !important;
    background-color: rgba(19, 146, 236, 0.1) !important;
}