/* Konto zalogowanego użytkownika: przycisk w menu (#loginUserButton), karta konta (.accountBox, main.js: showAccountBox)
   i sekcja konta w menu mobilnym. Ładowane w layout.html po base/base.css, bo nadpisuje jego reguły dla .topBar button. */

/* ---------- menu po zalogowaniu: dodatkowy przycisk konta, więc etykiety skracamy wcześniej (inaczej logo spada do drugiej linii) ---------- */

/* od 1401 px: mniejsze odstępy między pozycjami, żeby menu nie dochodziło do logo */
@media (min-width: 1401px) {
    .topBar:has(#loginUserButton) .topButton { margin-right: 32px !important; }
    html[lang="uk"] .topBar:has(#loginUserButton) .topButton { margin-right: 22px !important; }
}

@media (max-width: 1400px) {
    .topBar:has(#loginUserButton) .partnerProgramLabel { display: none !important; }
    .topBar:has(#loginUserButton) .partnerProgramLabelShort { display: inline-block !important; }
}

@media (max-width: 1240px) {
    .topBar:has(#loginUserButton) .topButton { margin-right: 18px !important; }
    html[lang="uk"] .topBar:has(#loginUserButton) .topButton { margin-right: 12px !important; }
    .topBar:has(#loginUserButton) #loginUserButton { margin-left: 12px !important; }
}

/* ---------- przycisk konta w menu: kwadrat z ikoną jak ikony w nowym wyglądzie ---------- */

.topBar #loginUserButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: right;
    width: 35px;
    height: 35px;
    margin: 0 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 10px !important;
    background: var(--h24-active-bg, #e9e7fc);
    box-shadow: none;
    color: var(--h24-brand, #6556e7);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .22s ease, color .22s ease !important;
}

.topBar #loginUserButton i {
    margin: 0 !important;
    color: inherit !important;
}

.topBar #loginUserButton:hover,
.topBar #loginUserButton[aria-expanded="true"] {
    background: var(--h24-brand, #6556e7);
    color: #fff;
}

.topBar #loginUserButton:focus-visible {
    outline: 2px solid var(--h24-brand, #6556e7);
    outline-offset: 2px;
}

/* ---------- karta konta pod przyciskiem (jak karta koszyka) ---------- */

.topBar .accountBox.h24-account {
    position: absolute;
    top: 64px;
    right: 0;
    z-index: 20;
    width: 300px;
    height: auto;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--h24-divider, #eeedf6);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(46, 48, 73, .12);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}

.topBar .accountBox.h24-account--open {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .topBar .accountBox.h24-account { transition: none; }
}

.h24-account__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--h24-divider, #eeedf6);
    text-align: left;
}

.h24-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--h24-icon-bg, #e0ddfa);
    color: var(--h24-brand, #6556e7);
    font-size: 18px;
}

.h24-account__head > div {
    min-width: 0;
}

.h24-account__label {
    display: block;
    color: var(--h24-text, #545874);
    font-size: 13px;
    line-height: 1.4;
}

/* cały adres, długi zawijany w dowolnym miejscu */
.h24-account__email {
    display: block;
    color: var(--h24-heading, #2e3049);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* przyciski: buttons.css i top.css nadają button/a.hrefButton float, marginesy i zaokrąglenie 5 px */
.topBar .h24-account .h24-account__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    float: none;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .22s ease, box-shadow .22s ease, color .22s ease !important;
}

.topBar .h24-account .h24-account__btn + .h24-account__btn {
    margin-top: 10px;
}

.topBar .h24-account .h24-account__btn i {
    margin: 0 !important;
    color: inherit !important;
}

.topBar .h24-account .h24-account__btn--panel {
    background: var(--h24-brand, #6556e7);
    box-shadow: 5px 5px 5px rgba(101, 86, 231, .4);
    color: #fff;
}

.topBar .h24-account .h24-account__btn--panel:hover {
    box-shadow: none;
}

.topBar .h24-account .h24-account__btn--logout {
    background: var(--h24-pink-bg, #fbe1f6);
    box-shadow: none;
    color: #b02f9b; /* ciemniejszy róż: kontrast 4,6:1 na jasnoróżowym tle */
}

.topBar .h24-account .h24-account__btn--logout:hover {
    background: var(--h24-pink, #e65dd1);
    color: #fff;
}

/* ---------- menu mobilne: konto na górze, z przyciskiem wylogowania ---------- */

.hamburgerContent .h24-account-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 20px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--h24-lavender-from, #f6f5fe), var(--h24-lavender-to, #efedfc));
    text-align: left;
}

/* w menu mobilnym konto to pasek na całą szerokość panelu, tuż pod górnym paskiem (bez odstępu u góry) */
.h24-mnav .h24-account-mobile {
    margin: 0 -20px 16px;
    padding: 16px 20px;
    border-radius: 0;
}

.hamburgerContent .h24-account-mobile > div {
    flex: 1;
    min-width: 0;
}

.hamburgerContent button.h24-account-mobile__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px !important;
    background: var(--h24-pink-bg, #fbe1f6);
    box-shadow: none;
    color: var(--h24-pink, #e65dd1); /* standardowy róż jak przycisk Poczta */
    font-size: 17px;
    line-height: 1 !important;
    cursor: pointer;
}

.hamburgerContent button.h24-account-mobile__logout i {
    margin: 0 !important;
    color: inherit !important;
}

.hamburgerContent button.h24-account-mobile__logout:hover {
    background: var(--h24-pink, #e65dd1);
    color: #fff;
}