* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; background: #ECF0F1; min-height: 100vh; }

.reg-container { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.reg-image { 
    flex: 1; 
    background: url('../img/reg_fon.png') center/cover no-repeat; 
    position: relative; 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    padding: 60px 40px; 
    overflow: hidden; 
}
.reg-image::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(135deg, rgba(198, 98, 53, 0.35) 0%, rgba(240, 208, 95, 0.25) 50%, rgba(0, 0, 0, 0.45) 100%); 
    z-index: 1; 
}
.reg-image::after { 
    content: ''; 
    position: absolute; 
    bottom: -100px; left: -100px; 
    width: 400px; height: 400px; 
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); 
    border-radius: 50%; 
    z-index: 2; 
}
.reg-image-content { position: relative; z-index: 3; text-align: center; color: white; width: 100%; max-width: 400px; margin-bottom: 40px; }
.reg-image-content h2 { font-family: 'Montserrat', sans-serif; font-size: 42px; font-weight: 700; margin-bottom: 15px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); letter-spacing: 1px; }
.reg-image-content p { font-size: 18px; opacity: 0.95; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); font-weight: 300; }
.reg-image-content .decor-line { width: 80px; height: 4px; background: linear-gradient(90deg, #f0d05f, #c66235); margin: 20px auto; border-radius: 2px; }

.floating-svg { position: absolute; z-index: 2; opacity: 0.15; pointer-events: none; }
.floating-svg svg { fill: white; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); }
.float-1 { top: 10%; left: 10%; animation: float 6s ease-in-out infinite; }
.float-2 { top: 20%; right: 15%; animation: float 8s ease-in-out infinite reverse; }
.float-3 { bottom: 30%; left: 5%; animation: float 7s ease-in-out infinite; }
.float-4 { top: 50%; right: 8%; animation: float 9s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }

.reg-form-container { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 40px; 
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 50%, #fff9f5 100%); 
    position: relative; 
    overflow: hidden; 
}

.bg-svg-pattern { position: absolute; pointer-events: none; opacity: 0.08; z-index: 0; }
.bg-svg-pattern.pattern-1 { top: 10%; left: 5%; width: 120px; height: 120px; animation: rotate 20s linear infinite; }
.bg-svg-pattern.pattern-2 { top: 15%; right: 10%; width: 100px; height: 100px; animation: float 10s ease-in-out infinite; }
.bg-svg-pattern.pattern-3 { bottom: 20%; left: 8%; width: 80px; height: 80px; animation: rotate 15s linear infinite reverse; }
.bg-svg-pattern.pattern-4 { bottom: 15%; right: 5%; width: 140px; height: 140px; animation: float 12s ease-in-out infinite reverse; }
.bg-svg-pattern.pattern-5 { top: 50%; left: 3%; width: 60px; height: 60px; animation: rotate 18s linear infinite; }
.bg-svg-pattern.pattern-6 { top: 8%; left: 50%; width: 70px; height: 70px; animation: pulse 4s ease-in-out infinite; }
.bg-svg-pattern.pattern-7 { bottom: 30%; right: 12%; width: 90px; height: 90px; animation: float 11s ease-in-out infinite; }
.bg-svg-pattern.pattern-8 { top: 40%; right: 2%; width: 110px; height: 110px; animation: rotate 25s linear infinite reverse; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.1); opacity: 0.12; } }

.reg-form-container::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(240, 208, 95, 0.15) 0%, transparent 70%); border-radius: 50%; z-index: 0; }
.reg-form-container::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(198, 98, 53, 0.1) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.reg-form { width: 100%; max-width: 450px; position: relative; z-index: 1; }
.reg-form h1 { font-family: 'Montserrat', sans-serif; font-size: 36px; color: #333; margin-bottom: 10px; text-align: center; }
.reg-form .subtitle { color: #666; text-align: center; margin-bottom: 20px; font-size: 16px; }
.login-link-top { text-align: center; margin-bottom: 30px; color: #666; font-size: 14px; }
.login-link-top a { color: #c66235; text-decoration: none; font-weight: 600; }
.login-link-top a:hover { text-decoration: underline; }

.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; font-size: 14px; }
.form-group input { width: 100%; padding: 14px 16px; border: 2px solid #ddd0af; border-radius: 8px; font-size: 15px; font-family: 'Roboto', sans-serif; background: #f8f8f8; transition: all 0.3s ease; }
.form-group input:focus { outline: none; border-color: #f0cf5f; background: #ffffff; box-shadow: 0 0 0 4px rgba(240, 207, 95, 0.2); }
.form-group input::placeholder { color: #aaaaaa; }
.form-group input.error { border-color: #e74c3c; background: #fff; }
.form-group input.error:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1); }

.field-error { display: flex; align-items: center; gap: 6px; color: #e74c3c; font-size: 13px; margin-top: 6px; }
.field-error svg { width: 14px; height: 14px; fill: #e74c3c; flex-shrink: 0; }
.field-hint { font-size: 12px; color: #666; margin-top: 6px; }

.input-wrapper { position: relative; }
.input-wrapper input { width: 100%; padding: 14px 50px 14px 16px; border: 2px solid #ddd0af; border-radius: 8px; font-size: 15px; font-family: 'Roboto', sans-serif; background: #f8f8f8; transition: all 0.3s ease; }
.input-wrapper input:focus { outline: none; border-color: #f0cf5f; background: #ffffff; box-shadow: 0 0 0 4px rgba(240, 207, 95, 0.2); }
.input-wrapper input::placeholder { color: #aaaaaa; }
.input-wrapper input.error { border-color: #e74c3c; background: #fff; }
.input-wrapper input.error:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1); }

.toggle-password { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity 0.3s ease; }
.toggle-password:hover { opacity: 1; }
.toggle-password svg { width: 20px; height: 20px; }
.toggle-password .eye-closed { display: block; }
.toggle-password .eye-open { display: none; }
.toggle-password.is-open .eye-closed { display: none; }
.toggle-password.is-open .eye-open { display: block; }
.toggle-password path { fill: none; stroke: #666; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-submit { width: 100%; padding: 16px; background: #f0d05f; border: none; border-radius: 8px; color: #333; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; }
.btn-submit:hover { background: #dfba53; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(240, 208, 95, 0.4); }

.errors { background: #fee; border: 1px solid #fcc; color: #c00; padding: 15px; border-radius: 8px; margin-bottom: 25px; font-size: 14px; }
.errors ul { margin: 0; padding-left: 20px; }
.errors li { margin: 5px 0; }

/* === СТИЛИ ДЛЯ ЧЕКБОКСА СОГЛАШИЯ === */
.checkbox-group { margin-bottom: 25px; }
.custom-checkbox { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
    font-size: 13px; 
    color: #555; 
    line-height: 1.4; 
}
.custom-checkbox input { display: none; }
.checkmark { 
    width: 20px; 
    height: 20px; 
    min-width: 20px; 
    border: 2px solid #ddd0af; 
    border-radius: 4px; 
    background: #f8f8f8; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease; 
    margin-top: 0; 
}
.custom-checkbox input:checked + .checkmark { background: #f0d05f; border-color: #f0d05f; }
.checkmark::after { 
    content: ''; 
    width: 5px; 
    height: 10px; 
    border: solid #333; 
    border-width: 0 2px 2px 0; 
    transform: rotate(45deg) scale(0); 
    transition: transform 0.2s ease; 
    margin-bottom: 2px; 
}
.custom-checkbox input:checked + .checkmark::after { transform: rotate(45deg) scale(1); }
.checkbox-text a { color: #c66235; text-decoration: none; font-weight: 600; }
.checkbox-text a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .reg-container {
        grid-template-columns: 1fr;
        /* Делаем контейнер относительным для позиционирования фона */
        position: relative;
        /* Добавляем фон прямо на контейнер */
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%),
                    url('../img/reg_fon.png') center/cover no-repeat fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
    }

    /* Скрываем левую колонку полностью */
    .reg-image {
        display: none !important;
    }

    .reg-form-container {
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 40px 30px;
        width: 100%;
        max-width: 460px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        margin: 0;
    }

    .bg-svg-pattern { display: block !important; opacity: 0.08; }
    .bg-svg-pattern.pattern-1 { width: 80px; height: 80px; }
    .bg-svg-pattern.pattern-2 { width: 65px; height: 65px; }
    .bg-svg-pattern.pattern-3 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-4 { width: 90px; height: 90px; }
    .bg-svg-pattern.pattern-5 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-6 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-7 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-8 { width: 75px; height: 75px; }
}

@media (max-width: 700px) {
    .reg-form-container { padding: 35px 25px; max-width: 440px; }
    .reg-form h1 { font-size: 32px; }
    .bg-svg-pattern.pattern-1 { width: 70px; height: 70px; }
    .bg-svg-pattern.pattern-4 { width: 80px; height: 80px; }
    .bg-svg-pattern.pattern-8 { width: 65px; height: 65px; }
}

@media (max-width: 650px) {
    .reg-form-container { padding: 30px 20px; max-width: 400px; }
    .reg-form h1 { font-size: 30px; }
    .bg-svg-pattern { opacity: 0.07; }
    .bg-svg-pattern.pattern-1 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-2 { width: 55px; height: 55px; }
    .bg-svg-pattern.pattern-4 { width: 70px; height: 70px; }
}

@media (max-width: 600px) {
    .reg-form-container { margin: 20px auto; padding: 25px 20px; max-width: 90%; }
    .form-group input, .input-wrapper input { padding: 12px 14px; font-size: 16px; }
    .bg-svg-pattern.pattern-1 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-3 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-6 { width: 40px; height: 40px; }
}

@media (max-width: 550px) {
    .reg-form h1 { font-size: 28px; }
    .reg-form .subtitle { font-size: 15px; }
    .bg-svg-pattern { opacity: 0.06; }
    .bg-svg-pattern.pattern-1 { width: 45px; height: 45px; }
    .bg-svg-pattern.pattern-4 { width: 60px; height: 60px; }
    .bg-svg-pattern.pattern-7 { width: 50px; height: 50px; }
}

@media (max-width: 500px) {
    .reg-form-container { padding: 20px 15px; }
    .form-group { margin-bottom: 20px; }
    .custom-checkbox { font-size: 12px; }
    .checkmark { width: 18px; height: 18px; min-width: 18px; }
    .bg-svg-pattern.pattern-1 { width: 40px; height: 40px; }
    .bg-svg-pattern.pattern-2 { width: 35px; height: 35px; }
    .bg-svg-pattern.pattern-5 { width: 30px; height: 30px; }
    .bg-svg-pattern.pattern-8 { width: 50px; height: 50px; }
}

@media (max-width: 450px) {
    .reg-form h1 { font-size: 26px; }
    .btn-submit { padding: 14px; font-size: 15px; }
    .bg-svg-pattern { opacity: 0.05; }
    .bg-svg-pattern.pattern-4 { width: 50px; height: 50px; }
    .bg-svg-pattern.pattern-6 { width: 35px; height: 35px; }
}

@media (max-width: 400px) {
    .reg-form-container { padding: 15px 12px; margin: 10px auto; }
    .reg-form h1 { font-size: 24px; margin-bottom: 5px; }
    .form-group label { font-size: 13px; }
    .form-group input, .input-wrapper input { padding: 10px 12px; font-size: 15px; }
    .toggle-password svg { width: 18px; height: 18px; }
    .bg-svg-pattern.pattern-1 { width: 30px; height: 30px; }
    .bg-svg-pattern.pattern-3 { width: 25px; height: 25px; }
    .bg-svg-pattern.pattern-7 { width: 40px; height: 40px; }
}

@media (max-width: 350px) {
    .reg-form h1 { font-size: 22px; }
    .bg-svg-pattern { opacity: 0.04; }
    .bg-svg-pattern.pattern-2 { width: 25px; height: 25px; }
    .bg-svg-pattern.pattern-8 { width: 35px; height: 35px; }
}