/* Modal Component */
/* Modal Component Styles */
@layer components.modal {
    /* Modal Component */
    .modal {
        display: none;
        position: fixed;
        z-index: var(--z-popover);
        inset: 0;
        background: light-dark(oklch(0% 0 0 / 0.6), oklch(0% 0 0 / 0.8));
        backdrop-filter: blur(0.3125rem);
        -webkit-backdrop-filter: blur(0.3125rem);
        animation: fadeIn var(--transition-base);

        & .modal-content {
            background: var(--bg-primary);
            margin-block-start: 10%;
            margin-inline: auto;
            padding: 0;
            inline-size: 90%;
            max-inline-size: 31.25rem;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            animation: slideIn var(--transition-base);
            overflow: hidden;
            position: relative;

            & .close-modal {
                position: absolute;
                inset-inline-end: var(--space-lg);
                inset-block-start: var(--space-lg);
                font-size: var(--font-size-xl);
                font-weight: 300;
                color: oklch(100% 0 0);
                transition: transform var(--transition-base);
                z-index: 100;
                background: light-dark(oklch(0% 0 0 / 0.2), oklch(100% 0 0 / 0.2));
                inline-size: 2.1875rem;
                block-size: 2.1875rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 0;
                padding: 0;
                padding-block-end: 0.125rem;

                &:hover {
                    transform: scale(1.1);
                    background: light-dark(oklch(0% 0 0 / 0.3), oklch(100% 0 0 / 0.3));
                }
            }

            & .modal-header {
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
                padding: var(--space-xl);
                color: oklch(100% 0 0);
                text-align: center;

                & .modal-flag {
                    font-size: 3rem;
                    display: block;
                    margin-block-end: var(--space-md);
                }

                & h2 {
                    font-size: var(--font-size-xl);
                }
            }

            & .modal-body {
                padding: var(--space-xl);

                & .modal-info {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: var(--space-md);
                    margin-block-end: var(--space-lg);

                    & .info-item {
                        display: flex;
                        flex-direction: column;

                        & .info-label {
                            font-size: var(--font-size-xs);
                            color: var(--text-secondary);
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                            margin-block-end: var(--space-xs);
                        }

                        & .info-value {
                            font-weight: 600;
                            color: var(--text-primary);
                        }
                    }
                }

                & .modal-description {
                    & h3 {
                        font-size: var(--font-size-lg);
                        color: var(--text-primary);
                        margin-block-end: 0.75rem;
                    }

                    & p {
                        color: var(--text-secondary);
                        line-height: 1.6;
                    }
                }
            }
        }
    }

    /* Coming Soon Modal */
    .coming-soon-modal {
        max-inline-size: 25rem;
        
        & .modal-close {
            position: absolute;
            inset-inline-end: var(--space-md);
            inset-block-start: var(--space-md);
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: var(--text-secondary);
            cursor: pointer;
            padding: var(--space-xs);
            line-height: 1;
            transition: all var(--transition-fast);
            z-index: 10;
            pointer-events: auto;
            
            &:hover {
                color: var(--text-primary);
                transform: scale(1.1);
            }
        }
        
        & .coming-soon-content {
            padding: var(--space-xl) var(--space-lg);
            text-align: center;
            
            & .coming-soon-icon {
                font-size: 4rem;
                margin-block-end: var(--space-lg);
                animation: pulse 2s infinite;
            }
            
            & h2 {
                font-family: var(--font-display);
                font-size: var(--text-2xl);
                font-weight: 800;
                color: var(--text-primary);
                margin-block-end: var(--space-md);
                text-transform: uppercase;
                letter-spacing: 0.02em;
            }
            
            & p {
                color: var(--text-secondary);
                font-size: var(--text-base);
                margin-block-end: var(--space-sm);
                
                &:last-child {
                    margin-block-end: 0;
                }
            }
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
    
    /* Login Modal Specific */
    .login-modal-content {
        & .modal-content {
            max-inline-size: 28.125rem;
            padding: 0;

            & .close-modal {
                inset-inline-end: 0.75rem;
                inset-block-start: 0.75rem;
            }
        }
    }

    .login-container {
        padding: var(--space-xl);

        & .login-header {
            text-align: center;
            margin-block-end: var(--space-xl);

            & h2 {
                font-size: var(--font-size-2xl);
                margin-block-end: var(--space-sm);
                color: var(--text-primary);
            }

            & p {
                color: var(--text-secondary);
                font-size: var(--font-size-base);
            }
        }

        & .login-footer {
            text-align: center;
            margin-block-start: var(--space-lg);
            padding-block-start: var(--space-lg);
            border-block-start: 0.0625rem solid var(--border-color);

            & p {
                margin-block-end: var(--space-sm);
                font-size: var(--font-size-sm);
                color: var(--text-secondary);
            }

            & .signup-link,
            & .forgot-link {
                color: var(--primary-color);
                text-decoration: none;
                font-weight: 500;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    
    /* Impact badge styles for top incidents */
    .impact-badge {
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.85em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        
        &.impact-international {
            background: light-dark(oklch(95% 0.08 340), oklch(25% 0.08 340));
            color: light-dark(oklch(40% 0.15 340), oklch(85% 0.08 340));
        }
        
        &.impact-national {
            background: light-dark(oklch(95% 0.08 20), oklch(25% 0.08 20));
            color: light-dark(oklch(40% 0.15 20), oklch(85% 0.08 20));
        }
        
        &.impact-regional {
            background: light-dark(oklch(95% 0.08 45), oklch(25% 0.08 45));
            color: light-dark(oklch(40% 0.15 45), oklch(85% 0.08 45));
        }
        
        &.impact-local {
            background: light-dark(oklch(95% 0.08 220), oklch(25% 0.08 220));
            color: light-dark(oklch(40% 0.15 220), oklch(85% 0.08 220));
        }
    }
}