/*
 * AgroEx Authentication UI
 * Файл: /public_html/agroex/css/auth.css
 *
 * Общ дизайн за:
 * - login.php
 * - register.php
 * - forgot_password.php
 * - reset_password.php
 * - verify_email.php
 */

/* =========================================================
   ОСНОВНИ НАСТРОЙКИ
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #edf7ed;
}

body.login-page,
body.register-page,
body.auth-page {
    margin: 0;
    min-height: 100vh;
    color: #18391f;
    font-family:
        'Montserrat',
        Arial,
        sans-serif;
    background:
        linear-gradient(
            rgba(245, 255, 245, 0.32),
            rgba(255, 250, 212, 0.27)
        ),
        url('/images/bg.jpg.png')
        center center / cover fixed
        no-repeat;
}

/* =========================================================
   ОБЩ КОНТЕЙНЕР
========================================================= */

.login-page-wrap,
.page-wrap,
.auth-page-wrap {
    width: min(
        760px,
        calc(100% - 24px)
    );
    margin: 0 auto;
    padding: 22px 0 55px;
}

.login-page-wrap {
    width: min(
        520px,
        calc(100% - 24px)
    );
}

/* =========================================================
   ГОРНА ЛЕНТА
========================================================= */

.login-header,
.page-header,
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

/* =========================================================
   ЛОГО И БРАНД
========================================================= */

.login-brand,
.brand,
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #247d35;
    text-decoration: none;
    font-size: 24px;
    font-weight: 900;
}

.login-brand img,
.brand img,
.auth-brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 12px;
}

.login-brand:hover,
.brand:hover,
.auth-brand:hover {
    color: #1b6728;
}

/* =========================================================
   ЕЗИКОВИ БУТОНИ
========================================================= */

.login-language,
.lang-switch,
.auth-language {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-language a,
.lang-switch a,
.auth-language a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    min-height: 38px;
    padding: 7px 11px;
    color: #2e7d32;
    background:
        rgba(
            255,
            255,
            255,
            0.84
        );
    border: 1px solid #cde5d1;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.login-language a:hover,
.lang-switch a:hover,
.auth-language a:hover {
    transform: translateY(-1px);
    border-color: #8fc498;
}

.login-language a.active,
.lang-switch a.active,
.auth-language a.active {
    color: #ffffff;
    background: #2e7d32;
    border-color: #2e7d32;
}

/* =========================================================
   GLASS ПАНЕЛИ
========================================================= */

.login-card,
.register-board,
.auth-card {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.94
            ),
            rgba(
                249,
                255,
                238,
                0.90
            )
        );
    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.94
        );
    border-radius: 28px;
    box-shadow:
        0 24px 65px
        rgba(
            24,
            85,
            35,
            0.20
        );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.register-board {
    padding: 26px;
}

/* =========================================================
   ЗАГЛАВИЯ
========================================================= */

.login-title,
.page-title,
.auth-title {
    margin: 0;
    color: #247d35;
    font-size:
        clamp(
            30px,
            5vw,
            42px
        );
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.7px;
}

.login-title {
    text-align: center;
}

.login-subtitle,
.page-subtitle,
.auth-subtitle {
    margin: 9px 0 22px;
    color: #526b57;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.login-subtitle {
    text-align: center;
}

.page-subtitle {
    margin-bottom: 0;
    color: #416148;
    font-size: 15px;
}

.section-title {
    margin: 24px 0 13px;
    color: #247d35;
    font-size: 19px;
    font-weight: 900;
}

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

.login-alert,
.message,
.auth-alert {
    padding: 13px 15px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 800;
}

.login-alert {
    margin-bottom: 15px;
}

.message {
    margin-top: 17px;
}

.login-alert.error,
.message.error,
.auth-alert.error {
    color: #7c2020;
    background:
        rgba(
            211,
            47,
            47,
            0.08
        );
    border: 1px solid
        rgba(
            211,
            47,
            47,
            0.24
        );
}

.login-alert.success,
.message.success,
.auth-alert.success {
    color: #1f642c;
    background:
        rgba(
            46,
            125,
            50,
            0.09
        );
    border: 1px solid
        rgba(
            46,
            125,
            50,
            0.25
        );
}

.auth-alert.info {
    color: #245d76;
    background:
        rgba(
            25,
            118,
            210,
            0.08
        );
    border: 1px solid
        rgba(
            25,
            118,
            210,
            0.22
        );
}

/* =========================================================
   ФОРМИ
========================================================= */

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 14px;
    margin-top: 20px;
}

.form-field,
.login-field,
.auth-field {
    min-width: 0;
}

.login-field {
    margin-bottom: 14px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label,
.login-field label,
.auth-field label {
    display: block;
    margin-bottom: 7px;
    color: #304f37;
    font-size: 14px;
    font-weight: 900;
}

.login-input-wrap,
.auth-input-wrap {
    position: relative;
}

.form-field input,
.login-field input,
.auth-field input,
.auth-field select,
.auth-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 0 15px;
    color: #174521;
    background:
        rgba(
            255,
            255,
            255,
            0.94
        );
    border: 1px solid #cfe4d3;
    border-radius: 14px;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 750;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.login-field input {
    padding-right: 48px;
}

.auth-field textarea {
    min-height: 120px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

.form-field input:focus,
.login-field input:focus,
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
    background: #ffffff;
    border-color:
        rgba(
            46,
            125,
            50,
            0.65
        );
    box-shadow:
        0 0 0 4px
        rgba(
            46,
            125,
            50,
            0.12
        );
}

.form-field input::placeholder,
.login-field input::placeholder,
.auth-field input::placeholder,
.auth-field textarea::placeholder {
    color: #829186;
    opacity: 1;
}

/* =========================================================
   ИКОНИ В ПОЛЕТАТА
========================================================= */

.login-input-icon,
.auth-input-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #5d7a63;
    font-size: 19px;
    pointer-events: none;
}

/* =========================================================
   ПОКАЗВАНЕ НА ПАРОЛАТА
========================================================= */

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    color: #52725a;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 19px;
    cursor: pointer;
}

.password-toggle:hover {
    background:
        rgba(
            46,
            125,
            50,
            0.08
        );
}

/* =========================================================
   ИЗБОР НА ВИД ПРОФИЛ
========================================================= */

.account-types {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 11px;
}

.account-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.account-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-card-content {
    display: block;
    height: 100%;
    min-height: 170px;
    padding: 15px;
    color: #375e3e;
    background:
        rgba(
            255,
            255,
            255,
            0.78
        );
    border: 2px solid
        rgba(
            46,
            125,
            50,
            0.14
        );
    border-radius: 18px;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.account-card:hover
.account-card-content {
    transform: translateY(-2px);
    border-color:
        rgba(
            46,
            125,
            50,
            0.36
        );
}

.account-card input:checked
+
.account-card-content {
    color: #1f642b;
    background:
        linear-gradient(
            145deg,
            #e9fae8,
            #ffffff
        );
    border-color: #2e7d32;
    box-shadow:
        0 12px 25px
        rgba(
            46,
            125,
            50,
            0.16
        );
}

.account-card input:focus-visible
+
.account-card-content {
    outline: 3px solid
        rgba(
            46,
            125,
            50,
            0.25
        );
    outline-offset: 3px;
}

.account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    background: #edf9ec;
    border-radius: 14px;
    font-size: 25px;
}

.account-title {
    display: block;
    color: #247d35;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
}

.account-description {
    display: block;
    margin-top: 7px;
    color: #607264;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
}

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

.password-note,
.auth-note {
    margin: 7px 0 0;
    color: #66766a;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.next-step {
    margin-top: 13px;
    padding: 12px 14px;
    color: #416148;
    background: #f1f9f0;
    border: 1px solid
        rgba(
            46,
            125,
            50,
            0.10
        );
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

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

.submit-row {
    margin-top: 20px;
}

.submit-button,
.login-submit,
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    padding: 12px 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #32943e,
            #22742e
        );
    border: 1px solid #247d35;
    border-radius: 15px;
    box-shadow:
        0 11px 24px
        rgba(
            34,
            116,
            46,
            0.22
        );
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease,
        background 0.16s ease;
}

.submit-button:hover,
.login-submit:hover,
.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 29px
        rgba(
            34,
            116,
            46,
            0.27
        );
}

.submit-button:active,
.login-submit:active,
.auth-submit:active {
    transform: translateY(0);
}

.submit-button:disabled,
.login-submit:disabled,
.auth-submit:disabled {
    opacity: 0.68;
    cursor: wait;
    transform: none;
}

/* =========================================================
   ЛИНКОВЕ И ОПЦИИ
========================================================= */

.login-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 2px 0 17px;
}

.login-options a,
.login-link a,
.register-link a,
.auth-link {
    color: #2e7d32;
    text-decoration: none;
    font-weight: 900;
}

.login-options a {
    font-size: 13px;
}

.login-options a:hover,
.login-link a:hover,
.register-link a:hover,
.auth-link:hover {
    text-decoration: underline;
}

.login-link {
    margin-top: 14px;
    color: #5c6a62;
    font-size: 14px;
    font-weight: 850;
}

.register-link {
    margin: 0;
    color: #5c6b60;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 750;
}

.back-home {
    display: block;
    margin-top: 16px;
    color: #4c6652;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.back-home:hover {
    color: #2e7d32;
}

/* =========================================================
   РАЗДЕЛИТЕЛ
========================================================= */

.login-divider,
.auth-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 22px 0 17px;
    color: #7b8b7e;
    font-size: 12px;
    font-weight: 800;
}

.login-divider::before,
.login-divider::after,
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background:
        rgba(
            46,
            125,
            50,
            0.18
        );
}

/* =========================================================
   МОБИЛНА ВЕРСИЯ
========================================================= */

@media (max-width: 720px) {

    body.login-page,
    body.register-page,
    body.auth-page {
        background-attachment: scroll;
    }

    .login-page-wrap,
    .page-wrap,
    .auth-page-wrap {
        width: min(
            100% - 18px,
            760px
        );
        padding-top: 12px;
    }

    .login-page-wrap {
        width: min(
            100% - 18px,
            520px
        );
    }

    .login-header,
    .page-header,
    .auth-header {
        margin-bottom: 13px;
    }

    .login-brand,
    .brand,
    .auth-brand {
        font-size: 21px;
    }

    .login-brand img,
    .brand img,
    .auth-brand img {
        width: 44px;
        height: 44px;
    }

    .login-card,
    .register-board,
    .auth-card {
        padding: 22px 15px;
        border-radius: 23px;
    }

    .account-types {
        grid-template-columns: 1fr;
    }

    .account-card-content {
        min-height: 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.full {
        grid-column: auto;
    }

}

/* =========================================================
   МАЛКИ ТЕЛЕФОНИ
========================================================= */

@media (max-width: 420px) {

    .login-page-wrap,
    .page-wrap,
    .auth-page-wrap {
        width: calc(100% - 12px);
    }

    .login-card,
    .register-board,
    .auth-card {
        padding: 19px 12px;
        border-radius: 20px;
    }

    .login-brand,
    .brand,
    .auth-brand {
        font-size: 19px;
    }

    .login-language a,
    .lang-switch a,
    .auth-language a {
        min-width: 40px;
        min-height: 36px;
        padding: 6px 9px;
    }

    .login-title,
    .page-title,
    .auth-title {
        font-size: 29px;
    }

}

/* =========================================================
   ДОСТЪПНОСТ И НАМАЛЕНИ АНИМАЦИИ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}