/*
 * Страница „Вход“
 *
 * Общите хедер, тикер и футер се управляват
 * от layout/app.php и public/app.css.
 */

.auth-page {
    width: 100%;
    padding: 36px 0;
    background: rgb(240, 242, 245);
}

/*
 * Общата зона заема 88% от ширината.
 * Няма локално ограничение max-width.
 *
 * Максималната ширина на целия сайт ще бъде
 * зададена по-късно глобално.
 */
.auth-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    width: 80%;
    margin: 0 auto;

    overflow: hidden;

    background: rgb(248, 249, 251);

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

    box-shadow:
    12px 10px 32px rgba(12, 32, 65, 0.18);
}

/*
 * Не задаваме твърда височина.
 * Височината следва реалното съдържание.
 */
.auth-layout__main {
    min-width: 0;
}

.login-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 100%;
    padding: 52px 8%;
}

.login-title {
    margin: 0 0 31px;

    color: #0a2450;

    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;
}

/*
 * Сектор за нерегистриран посетител.
 */
.login-register {
    padding: 23px 26px;

    background: #f7f9fc;

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

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

.login-register__text {
    margin: 0 0 18px;

    font-size: 18px;
    line-height: 1.65;
}

.login-divider {
    width: 100%;
    height: 1px;
    margin: 34px 0;

    background: #cbd3df;
}

.login-intro {
    margin: 0 0 25px;

    font-size: 18px;
    line-height: 1.65;
}

.login-form {
    width: 100%;
}

/*
 * Полета на формата.
 *
 * Тези класове по-късно могат да бъдат
 * преместени в общ CSS файл за формите,
 * ако ще се използват и в други страници.
 */
.auth-field {
    margin-bottom: 23px;
}

.auth-label {
    display: block;

    margin: 0 0 9px;

    color: #0a2450;

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

.auth-input {
    display: block;

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

    padding: 13px 16px;

    background: #ffffff;
    color: #172033;

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

    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;
}

.auth-input::placeholder {
    color: #7a8493;
}

/*
 * При hover полето леко се повдига.
 */
.auth-input: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);
}

/*
 * При focus полето става много светлосиньо.
 *
 * Това работи и на мобилно устройство,
 * защото focus се активира при докосване.
 */
.auth-input: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);
}

/*
 * Бутон със същия дизайн като бутона
 * след потвърждаването на имейла.
 */
.auth-button {
    display: inline-block;

    padding: 8px 24px;

    color: #ffffff;

    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;

    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%
    );

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

    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);

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

button.auth-button {
    appearance: none;
    -webkit-appearance: none;
}

.auth-button:hover,
.auth-button:focus-visible,
.auth-button: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);
}

.login-actions {
    margin-top: 8px;
}

.forgot-password {
    display: inline-block;

    margin-top: 18px;

    color: #123a86;

    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.forgot-password:hover,
.forgot-password:focus-visible {
    color: #071737;
}

/*
 * Съобщения.
 */
.login-message {
    margin: 0 0 25px;
    padding: 15px 17px;

    border-radius: 10px;

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

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

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

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

/*
 * Вертикален банер.
 *
 * Изображението следва височината на лявата част,
 * без да задаваме твърда височина в пиксели.
 */
.auth-layout__banner {
    position: relative;

    min-width: 0;
    min-height: 100%;

    overflow: hidden;

    /* Малко по-светъл фон за плавно преливане */
    background: rgb(246, 247, 249);
}

.auth-layout__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/*
 * Допълнително плавно преливане в левия край.
 */
.auth-layout__banner::before {
    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;
    left: 0;

    width: 55%;

    content: "";
    pointer-events: none;

    background: linear-gradient(
        to right,
        rgb(246, 247, 249) 0%,
        rgba(246, 247, 249, 0.98) 18%,
        rgba(246, 247, 249, 0.82) 42%,
        rgba(246, 247, 249, 0.70) 68%,
        rgba(246, 247, 249, 0.14) 88%,
        rgba(246, 247, 249, 0) 100%
    );
}

/*
 * Средни екрани.
 */
@media (max-width: 1050px) {
    .auth-layout {
        width: 92%;

        grid-template-columns:
            minmax(0, 3fr)
            minmax(240px, 2fr);
    }

    .login-content {
        padding: 44px 7%;
    }

    .login-title {
        font-size: 30px;
    }
}

/*
 * Мобилни устройства.
 *
 * Формата се показва първа.
 * Банерът се премества под нея.
 */
@media (max-width: 760px) {
    .auth-page {
        padding: 20px 0;
    }

    .auth-layout {
        display: flex;
        flex-direction: column;

        width: 94%;

        border-radius: 14px;
    }

    .auth-layout__main {
        order: 1;
    }

    .login-content {
        padding: 34px 22px;
    }

    .login-title {
        margin-bottom: 25px;

        font-size: 27px;
        text-align: center;
    }

    .login-register {
        padding: 20px;
    }

    .login-register__text,
    .login-intro {
        font-size: 17px;
    }

    .auth-button {
        width: 100%;
    }

    .auth-layout__banner {
        order: 2;

        height: min(72vw, 440px);
        min-height: 300px;
    }

    .auth-layout__image {
        width: 100%;
        height: 100%;
    }

    .auth-layout__banner::before {
        position: absolute;
        z-index: 2;

        top: 0;
        bottom: 0;
        left: 0;

        width: 30%;

        content: "";
        pointer-events: none;

        background: linear-gradient(
            to right,
            rgb(240, 242, 245) 0%,
            rgba(240, 242, 245, 0.85) 35%,
            rgba(240, 242, 245, 0.45) 70%,
            rgba(240, 242, 245, 0) 100%
        );
    }
}

@media (max-width: 420px) {
    .login-content {
        padding: 29px 17px;
    }

    .login-title {
        font-size: 24px;
    }

    .auth-input {
        min-height: 52px;
        font-size: 16px;
    }
}

/*
 * Намаляваме движенията при потребители,
 * които са избрали reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
    .auth-input,
    .auth-button {
        transition: none;
    }

    .auth-input:hover,
    .auth-input:focus,
    .auth-button:hover,
    .auth-button:focus-visible,
    .auth-button:active {
        transform: none;
    }
}

/* Светлосин фон за автоматично попълнени полета. */
.auth-input:autofill,
.auth-input:autofill:hover,
.auth-input:autofill:focus,
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-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;
}