/* ============================================================
   Auth Forms — wspólne style dla login, passwordreminder,
   changepassword-new, index3
   ============================================================ */

/* ----- Typografia kart ----- */
.card-heading { font-size: 32px; }
@media (max-width: 767px) { .card-heading { font-size: 24px; } }

.card-subheading { font-size: 18px; margin-bottom: 32px; }
@media (max-width: 767px) { .card-subheading { font-size: 16px; } }

.text-gray-2 { color: #455A64; }

/* ----- Kontener formularza ----- */
.container-form__login { max-width: 717px; width: 100%; }

.card { padding: 0 !important; border: 1px solid #F1F1F1 !important; }
.card-body { padding: 32px 48px !important; }
@media (max-width: 767px) { .card-body { padding: 24px !important; } }

/* ----- Floating labels ----- */
.float-input-wrap { position: relative; margin-top: 0.625rem; width: 100%; }

.float-input-wrap .form-control,
.float-input-wrap .form-select {
    color: var(--base-50);
    font-weight: 400 !important;
    font-size: 16px;
    padding: 16px 24px;
}

.float-input-wrap label.float-label {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    font-size: 1rem;
    line-height: 1;
    color: #6c757d;
    background: transparent;
    padding: 0 0.25rem;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400 !important;
}

.float-input-wrap label.float-label.float-up {
    top: 0;
    font-size: 12px;
    font-weight: 400;
    color: #637381;
    background: white;
}

/* ----- Autofill ----- */
.float-input-wrap .form-control:-webkit-autofill,
.float-input-wrap .form-control:-webkit-autofill:hover,
.float-input-wrap .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}
.float-input-wrap .form-control:-webkit-autofill ~ label.float-label {
    top: 0;
    font-size: 12px;
    font-weight: 400;
    color: #637381;
    background: white;
}

/* ----- Walidacja ----- */
.form-control.is-invalid,
.form-select.is-invalid { background-image: none !important; }

.invalid-feedback {
    display: block !important;
    position: relative;
    padding: 0 0 0 22px !important;
    color: #C73434 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-top: 16px !important;
    margin-bottom: 4px !important;
}
.invalid-feedback::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: url('../img/invalid-message.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.float-input-wrap:has(.form-control.is-invalid) label.float-label,
.float-input-wrap:has(.form-select.is-invalid) label.float-label { color: #C73434; }

/* ----- Prefix telefonu (+48) ----- */
.phone-prefix {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 12px 0 14px;
    border-right: 1px solid #ced4da;
    color: var(--base-40);
    font-size: 1rem;
    pointer-events: none;
    z-index: 3;
}
.phone-input-wrap .form-control { padding-left: 68px; }
.phone-input-wrap label.float-label { left: 68px; }
.phone-input-wrap label.float-label.float-up { left: 24px; }
.phone-input-wrap:has(.form-control.is-invalid) .phone-prefix { color: #C73434; }

/* ----- Toggle hasła ----- */
.has-pass-toggle .form-control { padding-right: 48px; }
.has-pass-toggle:has(.form-control.is-invalid) .pass-toggle { filter: invert(23%) sepia(89%) saturate(1700%) hue-rotate(340deg) brightness(85%); }

/* ----- SMS code ----- */
.char { padding-top: 24px !important; padding-bottom: 24px !important; }
@media (max-width: 767px) { .char { padding-top: 6px !important; padding-bottom: 6px !important; } }
.pass-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3;
    width: 20px;
    height: 20px;
    user-select: none;
}