/* Общие стили и обнуление */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body, html { 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    overflow: hidden; 
}

/* Основной контейнер */
.container { 
    display: flex; 
    width: 100vw; 
    height: 100vh; 
    background-color: #fff; 
}

/* Боковая панель с логотипом */
.sidebar { 
    width: 200px; 
    background-color: #d9d9d9; 
    border-radius: 0 50px 50px 0; 
    display: flex; 
    justify-content: center; 
    padding-top: 50px; 
}

.logo-pin { 
    width: 120px; 
    height: 160px; 
    background-color: #7b3e19; 
    border-radius: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.logo-circle { 
    width: 80px; 
    height: 80px; 
    background-color: #f2f2f2; 
    border-radius: 50%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    font-weight: bold; 
    font-size: 24px; 
}

/* Контейнер для формы и соцсетей */
.form-container { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    gap: 20px;
}

form { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

.input-group { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

label { 
    width: 180px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 20px; 
}

input { 
    width: 450px; 
    height: 60px; 
    background-color: #999; 
    border: 2px solid #000; 
    border-radius: 30px; 
    padding: 0 25px; 
    font-size: 18px; 
    outline: none; 
    color: #000;
}

input::placeholder {
    color: #444;
}

/* Кнопка регистрации / входа */
.submit-btn { 
    width: 450px; 
    height: 60px; 
    background-color: #7b3e19; 
    color: #fff; 
    border: none; 
    border-radius: 30px; 
    font-size: 22px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s ease; 
}

.submit-btn:hover { 
    background-color: #5c2d11; 
    transform: scale(1.02);
}

.spacer { 
    width: 180px; 
}

/* Google */
.social-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding-left: 210px; 
}

.social-login p {
    font-size: 16px;
    color: #555;
    font-weight: bold;
}

.social-login a {
    color: #7b3e19;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s ease;
}

.social-login a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.google-btn {
    width: 450px; 
    height: 60px; 
    background-color: #fff; 
    color: #000; 
    border: 2px solid #000; 
    border-radius: 30px; 
    font-size: 20px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s ease; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.google-btn:hover { 
    background-color: #f1f1f1; 
    transform: scale(1.02);
}

/* Toast уведомления */
.toast-container {
    position: fixed;
    top: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99999;
}

.toast {
    min-width: 280px;
    max-width: 420px;
    padding: 16px 18px;
    border-radius: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background: linear-gradient(135deg, #2e7d32, #43a047);
}

.toast.error {
    background: linear-gradient(135deg, #c62828, #e53935);
}

.toast.info {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
}

/* Адаптивность */
@media (max-width: 900px) {
    .container { 
        flex-direction: column; 
        overflow-y: auto; 
    }

    .sidebar { 
        width: 100%; 
        height: 100px; 
        border-radius: 0 0 30px 30px; 
        padding-top: 10px; 
    }

    .logo-pin { 
        width: 80px; 
        height: 80px; 
        border-radius: 50%; 
    }

    .form-container { 
        padding: 40px 20px; 
    }

    input, .submit-btn, .google-btn { 
        width: 300px; 
    }

    .social-login { 
        padding-left: 0; 
    }

    label, .spacer { 
        display: none; 
    }

    .toast-container {
        top: 15px;
        right: 15px;
        left: 15px;
    }

    .toast {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}