/* Poprawki UX/UI dla dropdown konta użytkownika */

/* Wyłączenie całkowite display i użycie opacity/visibility */
.tvcms-header-myaccount .tv-account-dropdown {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 15px 0 !important;
    min-width: 220px !important;
    border-radius: 4px;
    z-index: 9999;
    overflow: visible !important;
    clip-path: none !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0s 0.25s !important;
    -webkit-transition: opacity 0.25s ease, visibility 0s 0.25s !important;
}

/* Pokazywanie dropdown tylko przez CSS hover */
.tvcms-header-myaccount:hover .tv-account-dropdown,
.tv-account-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.25s ease, visibility 0s 0s !important;
    -webkit-transition: opacity 0.25s ease, visibility 0s 0s !important;
}

/* Blokowanie hover po kliknięciu */
.tvcms-header-myaccount.dropdown-clicked .tv-account-dropdown,
.tvcms-header-myaccount.dropdown-clicked:hover .tv-account-dropdown {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Nadpisanie JavaScript - zapobieganie ukrywaniu przez JS */
.tvcms-header-myaccount:hover .tv-account-dropdown.open,
.tvcms-header-myaccount .tv-account-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
}

.tvcms-header-myaccount {
    position: relative;
}

/* Zwiększenie obszaru hover - most między przyciskiem a dropdown */
.tvcms-header-myaccount::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 5px;
    display: block;
    z-index: 9998;
}

/* Stylowanie elementów li */
.tv-account-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    transition-delay: 0s;
}

/* Animacja pojawienia się elementów listy */
.tvcms-header-myaccount:hover .tv-account-dropdown li,
.tv-account-dropdown:hover li {
    opacity: 1;
    transform: translateY(0);
}

/* Opóźnienie dla każdego elementu - kaskadowe pojawienie PO rozwinięciu ramki */
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(1),
.tv-account-dropdown:hover li:nth-child(1) { transition-delay: 0.25s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(2),
.tv-account-dropdown:hover li:nth-child(2) { transition-delay: 0.28s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(3),
.tv-account-dropdown:hover li:nth-child(3) { transition-delay: 0.31s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(4),
.tv-account-dropdown:hover li:nth-child(4) { transition-delay: 0.34s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(5),
.tv-account-dropdown:hover li:nth-child(5) { transition-delay: 0.37s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(6),
.tv-account-dropdown:hover li:nth-child(6) { transition-delay: 0.40s; }
.tvcms-header-myaccount:hover .tv-account-dropdown li:nth-child(7),
.tv-account-dropdown:hover li:nth-child(7) { transition-delay: 0.43s; }

.tv-account-dropdown li a,
.tv-account-dropdown li .tvhedaer-sign-btn {
    display: block;
    padding: 12px 20px !important;
    color: #333 !important;
    font-size: 14px;
    line-height: 1.4 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 4px;
    margin: 2px 8px;
}

.tv-account-dropdown li a:hover,
.tv-account-dropdown li .tvhedaer-sign-btn:hover {
    background-color: #f5f5f5;
    color: #d90244 !important;
    text-decoration: none;
}

/* Wyłączenie animacji transform przy kliknięciu */
.tv-account-dropdown li a:active,
.tv-account-dropdown li .tvhedaer-sign-btn:active {
    transform: none !important;
    transition: none !important;
}

/* Ikony w dropdown */
.tv-account-dropdown li a i,
.tv-account-dropdown li .tvhedaer-sign-btn i {
    margin-right: 10px;
    vertical-align: middle;
    font-size: 18px;
    width: auto !important;
    transition: color 0.2s ease;
}

.tv-account-dropdown li a:hover i,
.tv-account-dropdown li .tvhedaer-sign-btn:hover i {
    color: #d90244 !important;
}

/* Separator między elementami */
.tv-account-dropdown li {
    position: relative;
}

.tv-account-dropdown li:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #e8e8e8;
    margin: 5px 15px;
}

/* Specjalne style dla pierwszego elementu (Moje konto) */
.tv-account-dropdown li:first-child a {
    font-weight: 600;
}

/* Ukrycie pustych elementów */
.tv-account-dropdown li:empty {
    display: none;
}

/* Lepsze wyświetlanie dla mobilnych */
@media (max-width: 991px) {
    .tvcms-header-myaccount .tv-account-dropdown {
        min-width: 250px !important;
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
        margin-top: 5px !important;
    }
    
    /* Dla mobile-header-2 specjalne dopasowanie */
    .mobile-header-2 .tv-account-dropdown {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
    }
    
    .mobile-header-2 .tv-header-account {
        position: relative !important;
    }
}

/* Animacja przycisku konta */
.tv-myaccount-btn {
    transition: none;
}

.tvcms-header-myaccount:hover .tv-myaccount-btn {
    transform: none;
}

.tvcms-header-myaccount:hover .tv-myaccount-btn svg {
    filter: none;
}

/* Zapewnienie płynnego wyświetlania */
.tvcms-header-myaccount {
    position: relative;
    overflow: visible !important;
}

.tv-header-account {
    overflow: visible !important;
}

.tv-contact-account-cart-wrapper {
    overflow: visible !important;
}

/* Dla niezalogowanych - link bezpośredni bez dropdown */
.tvcms-header-myaccount.not-logged .tv-login-link {
    cursor: pointer;
    text-decoration: none;
}

.tvcms-header-myaccount.not-logged .tv-login-link:hover {
    opacity: 0.8;
}

.tvcms-header-myaccount.not-logged:hover .tv-account-dropdown {
    display: none !important;
}