/* ==================================================
   FLEXIPETS ACCOUNT — FINAL MIT TEXT + ICON LINKS
   HTML-Struktur berücksichtigt:
   <a>
     <span class="um-account-icontip"></span>
     <span class="um-account-icon"><i class="fp-tab-icon ..."></i></span>
     <span class="um-account-title">Konto</span>
     <span class="um-account-arrow"></span>
   </a>
================================================== */

body.fp-account-topnav .um-account-side ul,
body.fp-account-page .um-account-side ul,
body.page-account .um-account-side ul {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

body.fp-account-topnav .um-account-side ul li,
body.fp-account-page .um-account-side ul li,
body.page-account .um-account-side ul li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Button */
body.fp-account-topnav .um-account-side ul li a,
body.fp-account-page .um-account-side ul li a,
body.page-account .um-account-side ul li a {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;

    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    padding: 0 18px !important;
    box-sizing: border-box !important;

    border-radius: 999px !important;
    background: #fff !important;
    border: 0 !important;

    color: #2d2a38 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    box-shadow: 0 4px 14px rgba(91, 62, 149, .08) !important;
    transform: none !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/* Tooltip-Spans ausblenden */
body.fp-account-topnav .um-account-side ul li a .um-account-icontip,
body.fp-account-page .um-account-side ul li a .um-account-icontip,
body.page-account .um-account-side ul li a .um-account-icontip {
    display: none !important;
}

/* Icon-Wrapper links */
body.fp-account-topnav .um-account-side ul li a > .um-account-icon,
body.fp-account-page .um-account-side ul li a > .um-account-icon,
body.page-account .um-account-side ul li a > .um-account-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Icon selbst */
body.fp-account-topnav .um-account-side ul li a > .um-account-icon i,
body.fp-account-page .um-account-side ul li a > .um-account-icon i,
body.page-account .um-account-side ul li a > .um-account-icon i,
body.fp-account-topnav .um-account-side ul li a > i.fp-tab-icon,
body.fp-account-page .um-account-side ul li a > i.fp-tab-icon,
body.page-account .um-account-side ul li a > i.fp-tab-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #7b5dfa !important;
    font-size: 15px !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Titel sichtbar machen und rechts ausrichten */
body.fp-account-topnav .um-account-side ul li a > .um-account-title,
body.fp-account-page .um-account-side ul li a > .um-account-title,
body.page-account .um-account-side ul li a > .um-account-title {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;

    color: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Fallback, falls andere Titel-Spans verwendet werden */
body.fp-account-topnav .um-account-side ul li a > span.title,
body.fp-account-page .um-account-side ul li a > span.title,
body.page-account .um-account-side ul li a > span.title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Pfeil ausblenden */
body.fp-account-topnav .um-account-side li .um-account-arrow,
body.fp-account-page .um-account-side li .um-account-arrow,
body.page-account .um-account-side li .um-account-arrow {
    display: none !important;
}

/* Hover */
body.fp-account-topnav .um-account-side ul li a:hover,
body.fp-account-page .um-account-side ul li a:hover,
body.page-account .um-account-side ul li a:hover {
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #2d2a38 !important;
    box-shadow: 0 6px 18px rgba(91, 62, 149, .12) !important;
    transform: translateY(-1px) !important;
}

/* Aktiv */
body.fp-account-topnav .um-account-side li.current a,
body.fp-account-topnav .um-account-side li.is-active a,
body.fp-account-page .um-account-side li.current a,
body.fp-account-page .um-account-side li.is-active a,
body.page-account .um-account-side li.current a,
body.page-account .um-account-side li.is-active a {
    background: linear-gradient(135deg, #9b7cff 0%, #7b5dfa 52%, #6846eb 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(123, 93, 218, .32) !important;
    transform: none !important;
}

body.fp-account-topnav .um-account-side li.current a .um-account-title,
body.fp-account-topnav .um-account-side li.is-active a .um-account-title,
body.fp-account-topnav .um-account-side li.current a .um-account-icon i,
body.fp-account-topnav .um-account-side li.is-active a .um-account-icon i,
body.fp-account-page .um-account-side li.current a .um-account-title,
body.fp-account-page .um-account-side li.is-active a .um-account-title,
body.fp-account-page .um-account-side li.current a .um-account-icon i,
body.fp-account-page .um-account-side li.is-active a .um-account-icon i,
body.page-account .um-account-side li.current a .um-account-title,
body.page-account .um-account-side li.is-active a .um-account-title,
body.page-account .um-account-side li.current a .um-account-icon i,
body.page-account .um-account-side li.is-active a .um-account-icon i {
    color: #fff !important;
}

/* Responsive */
@media (max-width: 1180px) {
    body.fp-account-topnav .um-account-side ul,
    body.fp-account-page .um-account-side ul,
    body.page-account .um-account-side ul {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 960px) {
    body.fp-account-topnav .um-account-side ul,
    body.fp-account-page .um-account-side ul,
    body.page-account .um-account-side ul {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body.fp-account-topnav .um-account-side ul,
    body.fp-account-page .um-account-side ul,
    body.page-account .um-account-side ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
    }

    body.fp-account-topnav .um-account-side ul li a,
    body.fp-account-page .um-account-side ul li a,
    body.page-account .um-account-side ul li a {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }

    body.fp-account-topnav .um-account-side ul li a > .um-account-icon,
    body.fp-account-page .um-account-side ul li a > .um-account-icon,
    body.page-account .um-account-side ul li a > .um-account-icon {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    body.fp-account-topnav .um-account-side ul li a > .um-account-title,
    body.fp-account-page .um-account-side ul li a > .um-account-title,
    body.page-account .um-account-side ul li a > .um-account-title {
        font-size: 11px !important;
    }
}

/* Layout shell — full width, nav above content */
body.fp-account-topnav.fp-account-page .um-account > form,
body.fp-account-topnav.fp-account-page .um-account form.um-form,
body.fp-account-topnav.fp-account-page .um-account .um-form > form,
body.fp-account-topnav.fp-account-page .um-account > .um-form > form,
body.fp-account-topnav.page-account .um-account > form,
body.fp-account-topnav.page-account .um-account form.um-form,
body.fp-account-topnav.page-account .um-account .um-form > form,
body.fp-account-topnav.page-account .um-account > .um-form > form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "nav" "main" !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.fp-account-topnav .um-account > .um-form > form > .um-account-side,
body.fp-account-topnav .um-account > form > .um-account-side,
body.fp-account-topnav .um-account form > .um-account-side,
body.fp-account-topnav .um-account > .um-form > .um-account-side,
body.fp-account-topnav .um-account-side {
    position: static !important;
    top: auto !important;
    grid-area: nav !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.fp-account-topnav .um-account > .um-form > form > .um-account-main,
body.fp-account-topnav .um-account > form > .um-account-main,
body.fp-account-topnav .um-account form > .um-account-main,
body.fp-account-topnav .um-account > .um-form > .um-account-main,
body.fp-account-topnav .um-account .um-account-main,
body.fp-account-topnav .um-account-main {
    grid-area: main !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    float: none !important;
}

body.fp-account-topnav .um-account-side .um-account-meta {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}