/* Основен контейнер */
.container {
    display: flex;
    height: 900px; /* Използваме височината на видимата част на браузера */
    margin: 0px;
    padding: 0px;
    background-color: #f4f4f4; /* Светъл фон */
}
.message-box {
    display: none; /* Initially hidden */
    padding: 20px;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-out;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.message-box.success {
    background: linear-gradient(135deg, #00c6ff, #0072ff); /* Blue gradient */
    border: 1px solid #0072ff;
}

.message-box.error {
    background: linear-gradient(135deg, #ff6b6b, #d84949); /* Red gradient */
    border: 1px solid #d84949;
}

.message-box p {
    margin: 0;
    font-weight: bold;
}

.message-box .close-btn {
    background: transparent;
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.message-box .close-btn:hover {
    opacity: 1;
}

/* Animation for sliding in the message box */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Основен стил за Select2 с по-голяма височина */
.select2-container--default .select2-selection--single {
    height: 55px; /* Увеличаване на височината */
    padding: 10px 15px; /* Корекция за вътрешния отстъп */
    font-size: 18px; /* Малко по-голям текст */
    padding-bottom: 21px;
    padding-top: 0px;
    width: 462px;
}

/* Вътрешно текстово съдържание */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px; /* Вертикално центриране */
    font-size: 16px;
}

/* Плейсхолдър стил */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: 45px; /* Вертикално центриране */
    font-size: 16px;
}

/* Резултати в dropdown */
.select2-container--default .select2-results__option {
    padding: 15px; /* По-голямо пространство около текста */
    font-size: 16px;
}

/* Акцентиране на избрания елемент */
.select2-container--default .select2-results__option--highlighted {
    padding: 15px;
    font-size: 16px;
}

/* Лява част */
.left-side {
    flex: 1; /* Заема част от ширината на контейнера */
    display: flex;
    justify-content: center; /* Центрира изображението хоризонтално */
    align-items: center; /* Центрира изображението вертикално */
}

.left-side img {
    width: 625px; /* Конкретна ширина на изображението */
    height: 1150px; /* Височината ще бъде зададена на 100% от височината на видимата част на браузера */
    object-fit: cover; /* Премахва изкривяването на изображението */
    border-radius: 0px; /* Заоблени ъгли на изображението */
}
.right-side {
    flex: 1; /* Заема част от ширината на контейнера */
    display: flex;
    justify-content: center; /* Центрира изображението хоризонтално */
    align-items: center; /* Центрира изображението вертикално */
}

.right-side img {
    width: 590px; /* Конкретна ширина на изображението */
    height: 1150px; /* Височината ще бъде зададена на 100% от височината на видимата част на браузера */
    object-fit: cover; /* Премахва изкривяването на изображението */
    border-radius: 0px; /* Заоблени ъгли на изображението */
}

/* Средна част */
.middle-side {
    flex: 2; /* Запълва по-голямата част от ширината на контейнера */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрира съдържанието вертикално */
    align-items: center; /* Центрира съдържанието хоризонтално */
    padding: 5px; /* Вътрешно разстояние */
}

/* Основен контейнер за съдържанието */
.content {
    max-width: 800px; /* Ограничаваме максималната ширина */
    width: 100%; /* Запълва наличното пространство */
    background: #fff; /* Фон на съдържанието */
    padding: 5px; /* Вътрешно разстояние */
    border-radius: 40px;/* Заоблени ъгли */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Лека сянка */
    text-align: center; /* Центриране на текста */
    margin-top: 80px;
    
}

/* Основни стилове за изображението в съдържанието */
.content img {
    .content img {
        width: 100%; /* Задава ширина 100% от родителския контейнер */
        height: 240px; /* Автоматична височина, за да запази пропорциите */
        margin: 0;
        max-width: 625px; /* Максимална ширина, за да не надвишава оригиналния размер */
    }
}
.content img{
    margin-top: 4%;
}
/*
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
*/
.content h1 {
    margin-top: 20px;
    font-size: 50px;
    color: #333;
    font-family: 'Leckerli One', cursive;
    margin-right: 101px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    white-space: nowrap;
}
/*
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}
.fade-in {
    animation: fade 0.2s ease-in-out;
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
*/

/* Стилове за формата и floating labels */
form {
    width: 100%;
    max-width: 500px; /* Ограничаваме ширината на формата */
    margin: 0 auto; /* Центриране на формата */
    padding: 20px;
    box-sizing: border-box;
}

.form-group {
    position: relative;
    margin-bottom: 20px; /* Намаляваме разстоянието между полетата */
}
.date-input {
    width: 89%;
    padding: 12px;
    font-size: 16px;
    background-color: #f5f5f5; /* Светъл фон */
    border: 2px solid #ddd; /* Лека рамка */
    border-radius: 8px; /* Закръглени ъгли */
    color: #333; /* Тъмен текст */
    text-align: center; /* Центриране на текста */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.date-input:focus {
    outline: none;
    border-color: #00A0E1; /* Синя рамка при фокус */
    box-shadow: 0 0 5px rgba(0, 160, 225, 0.5); /* Лек акцент при фокус */
}

.date-input::-webkit-calendar-picker-indicator {
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.date-input::-webkit-input-placeholder {
    color: #888; /* Цветът на placeholder */
}

.date-input::-moz-placeholder {
    color: #888; /* Цветът на placeholder за Firefox */
}

.date-input:-ms-input-placeholder {
    color: #888; /* Цветът на placeholder за IE */
}

.date-input:focus::-webkit-input-placeholder {
    color: transparent; /* Прозрачен placeholder при фокус */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    width: 100%;
    padding: 10px; /* Намаляваме padding-а за по-малко разстояние */
    font-size: 18px; /* Увеличаваме размера на шрифта */
    border: none;
    border-bottom: 2px solid #ddd; /* Долната линия на полето */
    background: transparent;
    outline: none;
    box-sizing: border-box;
    text-align: center; /* Центриране на текста вътре в полето */
}

/* Стилове за етикетите */
label {
    position: absolute;
    bottom: 0; /* Поставяме етикета в долната част на полето */
    left: 10px; /* Поставяме етикета вляво от линията */
    font-size: 10px; /* Намаляваме размера на шрифта на етикетите */
    color: rgba(170, 170, 170, 0.8); /* Леко прозрачен цвят */
    font-weight: bold; /* Дебел текст */
    pointer-events: none;
    transition: 0.2s ease all;
}

/* Не скривай етикетите за името и фамилията, когато полетата са фокусирани или не са празни */
input:focus ~ label,
input:not(:placeholder-shown) ~ label,
select:focus ~ label,
select:not(:placeholder-shown) ~ label {
    bottom: 0;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.8);
}


/* Табове за превключване */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-button {
    background: #2196f3; /* Син фон на табовете */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 5px;
    border-radius: 5px;
    color: #fff;
    transition: background 0.3s ease;
}

.tab-button.active {
    background: #ffeb3b; /* Жълт фон за активния таб */
    color: #000;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.button-53 {
    background-color: #3DD1E7;
    border: 0 solid #E5E7EB;
    box-sizing: border-box;
    color: #000000;
    display: flex;
    font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.75rem;
    padding: .75rem 1.65rem;
    position: relative;
    text-align: center;
    text-decoration: none #000000 solid;
    text-decoration-thickness: auto;
    width: 100%;
    max-width: 460px;
    cursor: pointer;
    transform: rotate(-2deg);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-53:focus {
    outline: 0;
}

.button-53:after {
    content: '';
    position: absolute;
    border: 1px solid #000000;
    bottom: 4px;
    left: 4px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}

.button-53:hover:after {
    bottom: 2px;
    left: 2px;
}

/* Специфични цветови класове */
.button-53-red {
    background-color: #ff4f4f; /* Червен цвят */
}

.button-53-red:hover {
    background-color: #d21f1b; /* Тъмен червен цвят при hover */
}

.button-53-orange {
    background-color: #ff9a00; /* Оранжев цвят */
}

.button-53-orange:hover {
    background-color: #e67e22; /* Тъмен оранжев цвят при hover */
}

.button-53-yellow {
    background-color: #ffeb3b; /* Жълт цвят */
}

.button-53-yellow:hover {
    background-color: #fdd835; /* Тъмен жълт цвят при hover */
}

.error-message {
    color: #D8000C; /* Червен цвят за съобщенията */
    font-size: 0.9em;
    margin-top: 5px;
    display: none; /* Скрива се по подразбиране */
}

input.error {
    border-color: #D8000C; /* Подчертава полето с червена рамка при грешка */
}


.hint-message {
    color: #666;
    font-size: 0.8em;
    display: none;
    margin-top: 5px;
}

/* Контейнер за формата и изображенията */
.registration-container {
    display: flex;
    justify-content: space-between; /* Разпределя изображението и формата */
    align-items: flex-start; /* Подравнява вертикално */
    height: 900px; /* Използва височината на видимата част на браузера */
}

.hidden-label {
    display: none;
}
@media (max-width: 1700px) {
    .left-side img {
        width: 450px;
        height: 930px;
    }
    .right-side img {
        width: 450px;
        height: 957px;
        object-fit: cover;
        border-radius: 0px;
    }
    .content h1 {
        font-size: 34px;
        margin-left: -36px;
    }
    .content {
        max-width: 800px;
        margin-top: -4px;
        width: 100%;
        background: #fff;
        padding: 5px;
        border-radius: 8px;
         box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); 
    }
    .content img {
        width: 389px;
        height: 136px;
    }
    .hint-message {
        margin-left: 70px;
    }
}
@media (max-width: 1390px) {
    .left-side img {
        width: 355px;
        height: 904px;
    }
.right-side img {
        width: 449px;
        height: 900px;
        object-fit: cover;
        border-radius: 0px;
    }
.middle-side {
    flex: 2;
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
}
}

@media (min-width: 768px) {
    .button-53 {
        padding: .75rem 3rem;
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Превключваме на вертикално подреждане */
        height: auto; /* Позволяваме на контейнера да расте автоматично */
    }

    .left-side, .right-side {
        flex: none; /* Оставяме ширината на изображението да бъде автоматична */
        width: 100%; /* Задаваме 100% ширина на изображенията */
        display: block; /* Превключваме на блоково подреждане */
    }

    .left-side img, .right-side img {
        width: 100%; /* Изображенията ще запълват 100% от ширината на родителя */
        height: auto; /* Височината ще се регулира автоматично */
    }

    .middle-side {
        flex: none; /* Позволяваме на средната част да расте автоматично */
        width: 100%; /* Задаваме 100% ширина на средната част */
    }

    .content {
        margin-top: 20px; /* Намаляваме разстоянието над съдържанието */
        padding: 10px; /* Намаляваме вътрешното разстояние */
    }

    .content h1 {
        font-size: 30px; /* Намаляваме размера на заглавието */
    }

    form {
        padding: 10px; /* Намаляваме вътрешното разстояние на формата */
    }

    .tab-button {
        padding: 5px 10px; /* Намаляваме padding-а на табовете */
        font-size: 14px; /* Намаляваме размера на шрифта на табовете */
    }

    .button-53 {
        font-size: 1rem; /* Увеличаваме размера на бутона за удобство при докосване */
    }
}
@media (max-width: 450px) {
    .container {
        flex-direction: column; /* Вертикално подреждане */
        min-height: 30%; /* Минимална височина на контейнера */
        overflow-y: auto; /* Позволява вертикално скролване */
        height: auto; /* Автоматично на височина */
    }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select {
        width: 100%;
        padding: 16px; /* Намаляваме padding-а за по-малко разстояние */
        font-size: 15px; /* Увеличаваме размера на шрифта */
        border: none;
        border-bottom: 2px solid #ddd; /* Долната линия на полето */
        background: transparent;
        outline: none;
        box-sizing: border-box;
        text-align: center; /* Центриране на текста вътре в полето */
    }

    .left-side, .right-side {
        width: 100%; 
        display: none;
        display: none; 
    }
    .date-input {
        width: 75%;
        padding: 5px;
        font-size: 14px;
        background-color: #f5f5f5;
        border: 2px solid #ddd;
        border-radius: 6px;
        color: #333;
        text-align: center;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

    .left-side img, .right-side img {
        width: 100%;
        height: auto;
        height: none; 
    }

    .middle-side {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .content {
        margin-top: 0; 
        padding: 1px;
    }

    .content img {
        width: 100%; 
    }
    .content img {
        width: 349px;
        height: 131px;
    }

    .content h1 {
        font-size: 31px;
        margin-bottom: 12%;
        display: block;
        margin-right: 3px;
    }

    form {
        padding: 10px;
    }

    .tab-button {
        padding: 5px 8px;
        font-size: 14px; 
    }

    .button-53 {
        font-size: 0.9rem;
        padding: 0.5rem 1rem; 
    }
    select {
        width: 100%;
        padding: 10px;
        font-size: 14px; 
        border: none;
        border-bottom: 2px solid #ddd;
        background: transparent;
        outline: none;
        box-sizing: border-box;
        text-align: center;
    }
    .hint-message {
        font-size: 12px;
        margin-left: 70px;
    }
    #first-name-error{
        font-size: 13px;
        margin-left: 21%;
        color: #d21e1b6e;
    }
    #last-name-error{
        font-size: 13px;
        margin-left: 21%;
        color: #d21e1b6e;
    }
    #email-error{
        font-size: 13px;
        margin-left: 11%;
        color: #d21e1b6e;
    }
    #password-error{
        font-size: 13px;
        margin-left: 21%;
        color: #d21e1b6e;
    }
    #age-error{
        font-size: 13px;
        margin-left: 21%;
        color: #d21e1b6e;
    }
    #gender-error{
        font-size: 13px;
        margin-left: 3%;
        color: #d21e1b6e;
    }
    #club-error{
        font-size: 13px;
        margin-left: 5%;
        color: #d21e1b6e;
    }
    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        width: 399px;
        margin-top: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px !important;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }
}
@media (max-width: 414px) {

    .select2-container--default .select2-selection--single {
        width: 377px;
    }
}
@media (max-width: 390px) {

    .select2-container--default .select2-selection--single {
        width: 355px;
    }

}
@media (max-width: 375px) {
    .content h1 {
        font-size: 28px;
        margin-bottom: 12%;
        display: table;
        margin-left: -7px;
    }
    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        width: 334px;
        margin-top: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px !important;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }
}
@media (max-width: 344px) {

    .select2-container--default .select2-selection--single {
        width: 305px;
    }
}