/* SKINOURA Shared Stylesheet - 2026 Medical Aesthetic */

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes float-large {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.1); }
}

@keyframes scan-pulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

@keyframes progress-bar {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out-down {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Custom Utilities */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-large {
    animation: float-large 8s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 5s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-rotate-slow {
    animation: rotate-slow 20s linear infinite;
}

/* Glassmorphism Components */
.glass-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-dark {
    background: rgba(10, 25, 47, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.glass-header {
    background: rgba(250, 248, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-b: 1px solid rgba(255, 255, 255, 0.6);
}

/* Background Patterns */
.bg-mesh {
    background-color: #faf8ff;
    background-image: 
        radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.06) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 82, 255, 0.05) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(219, 234, 254, 0.3) 0px, transparent 50%);
}

.bg-mesh-dark {
    background-color: #030a1c;
    background-image: 
        radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.1) 0px, transparent 40%),
        radial-gradient(at 100% 100%, rgba(0, 82, 255, 0.08) 0px, transparent 40%),
        radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.5) 0px, transparent 60%);
}

.hero-pattern {
    background-image: radial-gradient(rgba(0, 104, 120, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

.hero-pattern-dark {
    background-image: radial-gradient(rgba(20, 184, 166, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Scanner Simulation Components */
.scanner-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 2px solid rgba(20, 184, 166, 0.3);
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.1);
}

.scanner-laser {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(to right, rgba(20, 184, 166, 0), #14b8a6 15%, #22d3ee 50%, #14b8a6 85%, rgba(20, 184, 166, 0));
    box-shadow: 0 0 18px 4px rgba(34, 211, 238, 0.75), 0 0 44px 10px rgba(20, 184, 166, 0.45);
    animation: scan-laser 3.2s ease-in-out infinite;
    z-index: 30;
    pointer-events: none;
}

/* The beam sweeps the full frame and never clips out of view. */
@keyframes scan-laser {
    0% { top: 0; }
    50% { top: calc(100% - 6px); }
    100% { top: 0; }
}

.scanner-pulse-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, transparent 80%);
    animation: scan-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
}

.scanner-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #14b8a6;
    transition: all 0.3s ease;
}

.marker-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.marker-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.marker-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.marker-br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(250, 248, 255, 0.5);
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 78, 91, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 78, 91, 0.4);
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.material-symbols-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* SKINOURA teal brand accents */
.text-brand { color: #0d4a52; }
.bg-brand { background-color: #0d4a52; }
.border-brand { border-color: #0d4a52; }

/* RTL adjustments */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea {
    font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
}

/* Star rating */
.rating-star { cursor: pointer; color: #bec8cb; transition: color 0.15s ease; }
.rating-star.active { color: #f59e0b; }

/* Pre-scan guidance (psg) */
#psg-overlay { display: none; }
#psg-overlay.psg-open { display: flex; }
.psg-step { display: none; }
.psg-step.psg-active { display: flex; animation: psg-step-in .45s cubic-bezier(.16,1,.3,1); }
@keyframes psg-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.psg-corner { position: absolute; width: 22px; height: 22px; border-color: #14b8a6; border-style: solid; animation: psg-corner-pulse 2.4s ease-in-out infinite; }
.psg-corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: 8px; }
.psg-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: 8px; }
.psg-corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 8px; }
.psg-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 8px; }
@keyframes psg-corner-pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.psg-scanline { position: absolute; left: 8%; width: 84%; height: 3px; border-radius: 3px; background: linear-gradient(to right, transparent, #14b8a6, #22d3ee, #14b8a6, transparent); box-shadow: 0 0 10px 2px rgba(20,184,166,.5); animation: psg-scan-move 3s ease-in-out infinite; }
@keyframes psg-scan-move { 0%,100% { top: 12%; } 50% { top: 88%; } }
.psg-glow { box-shadow: 0 0 24px rgba(20,184,166,.35); }
.psg-dot-base { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: all .3s ease; }
.psg-dot-todo { background: rgba(190,200,203,.3); color: #3f484b; }
.psg-dot-current { background: #0d4a52; color: #fff; }
.psg-dot-done { background: #14b8a6; color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .psg-corner, .psg-scanline, .psg-step.psg-active { animation: none !important; }
}

/* Printable report area */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: absolute; inset: 0; padding: 2rem; }
}

/*/* Skeleton shimmer (loading placeholders) */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
    background: linear-gradient(90deg, rgba(150,160,170,.12) 25%, rgba(150,160,170,.28) 37%, rgba(150,160,170,.12) 63%);
    background-size: 400px 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: .5rem;
}