/* ================== RESET ================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
}

/* ================== KOLORY ================== */
:root {
    --navy: #1f2a44;
    --pink: #ef4d8b;
    --light-pink: #fff4f8;
    --white: #ffffff;
    --gray: #6b7280;
}

/* ================== BODY ================== */
body {
    background: var(--light-pink);
}

/* ================== LAYOUT ================== */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================== CARD ================== */
.auth-card {
    background: var(--white);
    width: 420px;
    padding: 24px 40px 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    text-align: center;
}

/* ================== LOGO ================== */
.auth-logo {
    margin-top: -70px;
    margin-bottom: 10px;
}

.auth-logo img {
    height: 220px;
    width: auto;
}

/* ================== HEADINGS ================== */
.auth-card h1 {
    color: var(--navy);
    margin-bottom: 6px;
}

.auth-card p {
    color: var(--gray);
    margin-bottom: 24px;
}

/* =========================
   AUTH FORMS
========================= */

.auth-form {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form > * {
    width: 100%;
}

.auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.auth-form label {
    font-size: 14px;
    font-weight: 500;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;
}

.auth-form input:focus,
.auth-form textarea:focus {
    outline: none;
    border-color: #ef4d8b;
    box-shadow: 0 0 0 2px rgba(239,77,139,.15);
}

/* ===== RZĄD Z DWOMA POLAMI ===== */

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.auth-form .form-row > * {
    min-width: 0;
    width: 100%;
}

/* MOBILE */
@media (max-width: 640px) {
    .auth-form .form-row {
        grid-template-columns: 1fr;
    }
}


/* ================== LABEL ================== */
.auth-card label {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--navy);
}

/* ================== INPUT ================== */
.auth-card input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 14px;
    border-radius: 12px;
    border: 2px solid #ddd;
    font-size: 15px;
    box-sizing: border-box;
}

/* focus */
.auth-card input:focus {
    outline: none;
    border-color: var(--pink);
}

/* ================== PASSWORD ================== */
.password-wrapper {
    position: relative;
    width: 100%;
}

/* 👁 IDEALNE WYŚRODKOWANIE */
.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

/* ================== TOOLTIP ================== */
.help-icon {
    width: 16px;
    height: 16px;
    background: var(--pink);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.help-icon .tooltip {
    display: none;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    width: 260px;
    z-index: 10;
    line-height: 1.4;
}

.help-icon .tooltip::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--navy) transparent;
}

.help-icon:hover .tooltip {
    display: block;
}

/* ================== BUTTON ================== */
.auth-btn {
    width: 100%;
    max-width: 320px;
    background: var(--pink);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 24px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.auth-btn:hover {
    opacity: .9;
}

/* ================== LINKS ================== */
.auth-links {
    margin-top: 20px;
}

.auth-links a {
    color: var(--pink);
    text-decoration: none;
    font-weight: 500;
}

/* ================== ERRORS ================== */
.errorlist {
    background: #ffe4ec;
    color: #b0003a;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 20px;
    list-style: none;
}

.field-error {
    color: #d9534f;
    font-size: 13px;
    margin: 4px 0 12px 32px;
}


/* ================== WALIDACJA ================== */
/* zielone – poprawne */
/* ===== WALIDACJA – TYLKO REJESTRACJA ===== */
.register-form input:invalid:not(:placeholder-shown) {
    border: 2px solid #e63946;
}

.register-form input:valid:not(:placeholder-shown) {
    border: 2px solid #3bb54a;
}

/* LOGIN – zawsze neutralne */
.login-form input {
    border: 2px solid #ddd;
}

.login-form input:focus {
    border-color: var(--pink);
}

/* ===== CHECKBOXY ===== */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;

    cursor: pointer;
}

/* ukrycie natywnego checkboxa */
.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* kwadrat */
.custom-checkbox {
    width: 16px;
    height: 16px;

    border: 2px solid var(--pink);
    border-radius: 4px;

    display: inline-block;
    box-sizing: border-box;
    flex-shrink: 0;

    position: relative;
}

/* ptaszek */
.checkbox-wrapper input:checked + .custom-checkbox::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--pink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* tekst */
.checkbox-text {
    font-size: 14px;
    line-height: 1.5;
}

/* linki */
.checkbox-text a {
    color: var(--pink);
    text-decoration: underline;
}

.checkbox-wrapper * {
    flex-shrink: 0;
}