/* ==========================================================
   FORM FRAMEWORK
   Общи стилове за стандартните форми
   ========================================================== */

.form-page {
    width: 100%;
    display: flex;
    justify-content: center;

    padding: 36px 0;

    background: rgb(240, 242, 245);
}

.form-card {
    width: 80%;
    padding: 42px 6%;

    box-sizing: border-box;

    background: rgb(248, 249, 251);

    border: 1px solid rgba(232, 236, 242, 0.9);
    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(10, 36, 80, 0.12);
}


/* ==========================================================
   ЗАГЛАВИЕ И УВОДЕН ТЕКСТ
   ========================================================== */

.form-title {
    margin: 0 0 22px;

    color: #0a2450;

    font-size: 38px;
    line-height: 1.25;
    font-weight: 600;

    text-align: center;
}

.form-intro {
    max-width: 920px;
    margin: 0 auto 30px;

    font-size: 18px;
    line-height: 1.35;

    text-align: center;
}


/* ==========================================================
   GIF ИЗОБРАЖЕНИЕ
   Остава на настоящото си място в register_form.php
   ========================================================== */

.form-image {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 40px 0 28px;
}

.form-image img {
    display: block;

    width: 200px;
    max-width: 100%;
    height: auto;
}


/* ==========================================================
   ЗАГЛАВИЯ НА СЕКЦИИТЕ
   ========================================================== */

.form-section-title {
    margin: 38px 0 22px;
    padding: 0 0 10px;

    color: #0a2450;

    font-size: 27px;
    line-height: 1.3;
    font-weight: 600;

    border-bottom: 1px solid #cbd3df;
}

.form-section-title:first-of-type {
    margin-top: 10px;
}


/* ==========================================================
   РЕДОВЕ, ЕТИКЕТИ И ПОМОЩЕН ТЕКСТ
   ========================================================== */

.form-row {
    margin-bottom: 23px;
}

.form-label {
    display: block;

    margin: 0 0 9px;

    color: #0a2450;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
}

.form-help {
    margin: -2px 0 11px;

    color: #5b6472;

    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================================
   ПОЛЕТА ЗА ВЪВЕЖДАНЕ
   Същият дизайн като на страницата „Вход“
   ========================================================== */

.form-input,
.form-select,
.form-textarea {
    display: block;

    width: 100%;
    min-height: 54px;

    padding: 13px 16px;

    box-sizing: border-box;

    background: #ffffff;
    color: #172033;

    border: 1px solid #b8c1ce;
    border-radius: 11px;
    outline: none;

    font: inherit;
    font-size: 17px;
    line-height: 1.4;

    box-shadow:
        inset 0 1px 2px rgba(10, 36, 80, 0.04),
        0 5px 13px rgba(10, 36, 80, 0.09);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #7a8493;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    transform: translateY(-2px);

    border-color: #7293ca;

    box-shadow:
        inset 0 1px 2px rgba(10, 36, 80, 0.04),
        0 10px 20px rgba(10, 36, 80, 0.14);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    transform: translateY(-2px);

    background: #f1f7ff;
    border-color: #3f6fd0;

    box-shadow:
        0 0 0 4px rgba(63, 111, 208, 0.13),
        0 11px 22px rgba(10, 36, 80, 0.16);
}

.form-textarea {
    min-height: 130px;
    resize: vertical;
}


/* ==========================================================
   ЧЕКБОКСОВЕ
   ========================================================== */

.form-checkbox {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 12px 14px;

    background: #ffffff;

    border: 1px solid #d5dbe5;
    border-radius: 10px;

    box-shadow:
        0 4px 11px rgba(10, 36, 80, 0.06);
}

.form-checkbox input[type="checkbox"],
.form-checkbox input[type="radio"] {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;
    margin: 2px 0 0;

    cursor: pointer;

    accent-color: #123a86;
}

.form-checkbox label {
    cursor: pointer;

    font-size: 16px;
    line-height: 1.55;
}


/* ==========================================================
   БУТОНИ
   ========================================================== */

.form-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 36px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;

    min-width: 180px;
    padding: 9px 24px;

    color: #ffffff;

    font: inherit;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    border: 2px solid #04102a;
    border-radius: 12px;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.8);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Син бутон „Регистрация“ */

.btn-primary {
    background-color: #123a86;

    background-image: linear-gradient(
        to top,
        #071737 0%,
        #123a86 10%,
        #3f6fd0 28%,
        #6f9cf0 45%,
        #dbe8ff 50%,
        #6f9cf0 55%,
        #3f6fd0 72%,
        #123a86 90%,
        #071737 100%
    );

    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.6),
        inset 0 -6px 10px rgba(0, 0, 0, 0.6),
        0 8px 18px rgba(0, 0, 0, 0.3);
}


/* Сив бутон „Изчисти“ */

.btn-secondary {
    border-color: #313844;

    background-color: #707783;

    background-image: linear-gradient(
        to top,
        #292f38 0%,
        #555d69 12%,
        #858d98 30%,
        #b3bac3 45%,
        #f1f3f5 50%,
        #b3bac3 55%,
        #858d98 70%,
        #555d69 88%,
        #292f38 100%
    );

    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.65),
        inset 0 -6px 10px rgba(0, 0, 0, 0.55),
        0 8px 18px rgba(0, 0, 0, 0.26);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
    outline: none;

    transform: translateY(-2px);

    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.75),
        inset 0 -6px 12px rgba(0, 0, 0, 0.72),
        0 14px 25px rgba(0, 0, 0, 0.4);
}


/* ==========================================================
   СЪОБЩЕНИЯ
   ========================================================== */

.form-message {
    margin: 0 0 28px;
    padding: 16px 18px;

    border-radius: 10px;

    font-size: 16px;
    line-height: 1.6;

    white-space: pre-line;
}

.form-message.info {
    background: #eef5ff;
    color: #0a2450;
    border: 1px solid #aabfe8;
}

.form-message.success {
    background: #edf9f1;
    color: #176b3a;
    border: 1px solid #9fd1af;
}

.form-message.warning {
    background: #fff8e7;
    color: #8a5a00;
    border: 1px solid #e1c37a;
}

.form-message.error {
    background: #fff1f1;
    color: #8d1c1c;
    border: 1px solid #e5a7a7;
}


/* ==========================================================
   HONEYPOT ПОЛЕ
   Остава скрито и функционално
   ========================================================== */

.form-hidden {
    position: absolute;
    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* ==========================================================
   СРЕДНИ ЕКРАНИ
   ========================================================== */

@media (max-width: 1050px) {
    .form-card {
        width: 92%;
        padding: 38px 6%;
    }

    .form-title {
        font-size: 34px;
    }

    .form-section-title {
        font-size: 25px;
    }
}


/* ==========================================================
   МОБИЛНИ УСТРОЙСТВА
   ========================================================== */

@media (max-width: 760px) {
    .form-page {
        padding: 20px 0;
    }

    .form-card {
        width: 94%;
        padding: 30px 22px;

        border-radius: 14px;
    }

    .form-title {
        font-size: 29px;
    }

    .form-intro {
        font-size: 17px;
    }

    .form-image {
        margin: 28px 0 24px;
    }

    .form-image img {
        width: 180px;
    }

    .form-section-title {
        margin-top: 32px;

        font-size: 23px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        min-height: 52px;

        font-size: 16px;
    }

    .form-buttons {
        flex-direction: column;

        gap: 16px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .form-card {
        padding: 26px 17px;
    }

    .form-title {
        font-size: 26px;
    }

    .form-section-title {
        font-size: 21px;
    }

    .form-image img {
        width: 165px;
    }
}


/* ==========================================================
   НАМАЛЕНИ АНИМАЦИИ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .form-input,
    .form-select,
    .form-textarea,
    .btn-primary,
    .btn-secondary {
        transition: none;
    }

    .form-input:hover,
    .form-input:focus,
    .form-select:hover,
    .form-select:focus,
    .form-textarea:hover,
    .form-textarea:focus,
    .btn-primary:hover,
    .btn-primary:focus-visible,
    .btn-primary:active,
    .btn-secondary:hover,
    .btn-secondary:focus-visible,
    .btn-secondary:active {
        transform: none;
    }
}
/* ==========================================================
   ОДОБРЕН БУТОН YES — същата анимация от HTML пробата.
   Двата бутона са с еднакви размери 158 x 58 px.
   ========================================================== */
#register-form .form-buttons .btn-primary,
#register-form .form-buttons .btn-secondary {
    box-sizing: border-box;
    width: 158px;
    min-width: 158px;
    height: 58px;
    min-height: 58px;
    flex: 0 0 158px;
}
#register-form .form-buttons .register-yes-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    overflow: hidden;
}
#register-form .form-buttons .register-yes-animation {
    display: block;
    width: 65px;
    height: auto;
    flex: none;
    object-fit: contain;
}
/* Запазване на еднаквия размер и при мобилен изглед. */
@media (max-width: 760px) {
    #register-form .form-buttons .btn-primary,
    #register-form .form-buttons .btn-secondary {
        width: 158px;
    }
}

/* Светлосин фон за автоматично попълнени полета. */
.form-input:autofill,
.form-input:autofill:hover,
.form-input:autofill:focus,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172033;
    caret-color: #172033;
    -webkit-box-shadow: 0 0 0 1000px #e8f1ff inset;
    box-shadow: 0 0 0 1000px #e8f1ff inset;
}