.registration-form {
padding: 60px 20px;
background: linear-gradient(135deg, #1F2C5C 0%, #2D3E84 50%, #3D5BB0 100%);
}
.registration-form__container {
max-width: 800px;
margin: 0 auto;
}
.registration-form__wrapper {
background: #ffffff;
border-radius: 20px;
padding: 48px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}
.registration-form__header {
text-align: center;
margin-bottom: 32px;
}
.registration-form__heading {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 700;
color: #2D3E84;
margin: 0 0 8px;
}
.registration-form__subheading {
font-size: 15px;
color: #666666;
margin: 0;
}
.registration-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.registration-form__field {
display: flex;
flex-direction: column;
}
.registration-form__label {
font-size: 14px;
font-weight: 600;
color: #333333;
margin-bottom: 6px;
}
.registration-form__required {
color: #E53935;
}
.registration-form__input,
.registration-form__select {
padding: 12px 16px;
border: 2px solid #E0E0E0;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
color: #333333;
background: #ffffff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.registration-form__input:focus,
.registration-form__select:focus {
outline: none;
border-color: #2D3E84;
box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}
.registration-form__input::placeholder {
color: #BDBDBD;
}
.registration-form__select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.registration-form__message {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 16px;
text-align: center;
}
.registration-form__message--success {
background-color: #F0F4FF;
color: #1F2C5C;
border: 1px solid #B6C5F2;
}
.registration-form__message--error {
background-color: #FFEBEE;
color: #C62828;
border: 1px solid #EF9A9A;
}
.registration-form__actions {
text-align: center;
margin-top: 8px;
}
.registration-form__submit {
display: inline-block;
padding: 14px 48px;
color: #ffffff;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-family: inherit;
}
.registration-form__submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 111, 0, 0.3);
}
.registration-form__submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.registration-form__submit--loading {
position: relative;
}
@media (max-width: 768px) {
.registration-form {
padding: 40px 16px;
}
.registration-form__wrapper {
padding: 32px 20px;
}
.registration-form__heading {
font-size: 22px;
}
.registration-form__row {
grid-template-columns: 1fr;
gap: 16px;
}
}