/* Forms Component */
/* Forms Component Styles */
@layer components.forms{
    /* Social Login */
    .social-login {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-block-end: var(--space-lg);

        & .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            inline-size: 100%;
            padding: 0.875rem;
            border: 0.125rem solid var(--border-color);
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: var(--font-size-base);
            transition: all var(--transition-base);
            color: var(--text-primary);

            &:hover {
                background: var(--light);
                transform: translateY(-0.125rem);
                box-shadow: var(--shadow-md);
            }

            &.google-btn:hover {
                border-color: oklch(62% 0.25 240);
            }

            &.microsoft-btn:hover {
                border-color: oklch(65% 0.20 210);
            }
        }
    }

    /* Divider */
    .divider {
        text-align: center;
        position: relative;
        margin-block: var(--space-lg);

        &::before {
            content: '';
            position: absolute;
            inset-block-start: 50%;
            inset-inline: 0;
            block-size: 0.0625rem;
            background: var(--border-color);
        }

        & span {
            background: var(--bg-primary);
            padding-inline: var(--space-md);
            position: relative;
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
        }
    }

    /* Email Login Form */
    .email-login-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);

        & .login-input {
            inline-size: 100%;
            padding-block: 0.875rem;
            padding-inline: var(--space-md);
            border: 0.125rem solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            transition: all var(--transition-base);
            background: var(--bg-primary);

            &:focus {
                outline: none;
                border-color: var(--primary-color);
                box-shadow: 0 0 0 0.1875rem rgba(99, 102, 241, 0.1);
            }
        }

        & .terms-container {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-block: var(--space-md);
            padding: var(--space-md);
            background: var(--light);
            border-radius: var(--radius-md);

            & .checkbox-label {
                display: flex;
                align-items: flex-start;
                gap: var(--space-sm);
                cursor: pointer;
                font-size: var(--font-size-sm);
                color: var(--text-secondary);
                line-height: 1.5;

                & input[type="checkbox"] {
                    margin-block-start: 0.125rem;
                    cursor: pointer;
                    inline-size: 1rem;
                    block-size: 1rem;
                    accent-color: var(--primary-color);
                }

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

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        & .submit-btn {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: oklch(100% 0 0);
            padding: 0.875rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: var(--font-size-lg);
            transition: all var(--transition-base);
            margin-block-start: var(--space-sm);

            &:hover {
                background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
                transform: translateY(-0.125rem);
                box-shadow: var(--shadow-md);
            }

            &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }
    }

    /* Type Badge Component */
    .type-badge {
        display: inline-block;
        padding-block: var(--space-xs);
        padding-inline: 0.75rem;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: white;

        &.national {
            background: var(--danger-color);
        }

        &.regional {
            background: var(--warning-color);
        }

        &.traditional,
        &.cultural {
            background: var(--secondary-color);
        }
    }
}