/*
 * MTT-3290: refreshed left menu + top header.
 *
 * Reskin only: overrides the Dashkit / custom.css styles of #sidebar and
 * #topbar without touching markup, permissions or layout offsets (60px header,
 * 240px / 60px sidebar). Loaded last, so removing the <link> in
 * layouts/app.blade.php reverts everything.
 */

:root {
    --mt-nav-bg: #12263F;
    --mt-nav-border: rgba(160, 190, 255, .12);
    --mt-nav-text: #B6C4E2;
    --mt-nav-text-strong: #FFFFFF;
    --mt-nav-muted: #7E92BD;
    --mt-nav-hover: rgba(160, 190, 255, .10);
    --mt-nav-active-bg: rgba(45, 224, 181, .16);
    --mt-nav-active-sub-bg: rgba(45, 224, 181, .10);
    --mt-accent: #2de0b5;
    --mt-accent-ink: #0f2a24;
    --mt-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Shared surfaces                                                     */
/* ------------------------------------------------------------------ */

#topbar.custom-blue-bg,
#sidebar.custom-light-blue-bg {
    background-color: var(--mt-nav-bg) !important;
}

#topbar {
    min-height: 60px;
    border-bottom: 1px solid var(--mt-nav-border);
    box-shadow: none;
}

#sidebar {
    border-right: 1px solid var(--mt-nav-border);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

#sidebar::-webkit-scrollbar,
#sidebar .navbar-collapse::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-thumb,
#sidebar .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 6px;
}

#sidebar::-webkit-scrollbar-track,
#sidebar .navbar-collapse::-webkit-scrollbar-track {
    background: transparent;
}

/* Ghost icon button: header collapse toggle + mobile hamburger. */
#topbar #collapseButton,
#sidebar .collapseButton {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: none;
    color: var(--mt-nav-text-strong);
    font-size: 18px;
    transition: background-color .15s ease;
}

#topbar #collapseButton:hover,
#topbar #collapseButton:focus,
#sidebar .collapseButton:hover,
#sidebar .collapseButton:focus {
    background: var(--mt-nav-hover);
    box-shadow: none;
}

/* Burger drawn with three bars that morph into an X while the menu is open:
   ::before / ::after are the outer bars, the existing .fe icon is the middle one. */
#topbar #collapseButton,
#sidebar .collapseButton {
    position: relative;
}

#topbar #collapseButton:before,
#topbar #collapseButton:after,
#topbar #collapseButton > .fe,
#sidebar .collapseButton:before,
#sidebar .collapseButton:after,
#sidebar .collapseButton > .fe {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -9px;
    border-radius: 2px;
    background-color: currentColor;
    font-size: 0;
    line-height: 0;
}

#topbar #collapseButton > .fe:before,
#sidebar .collapseButton > .fe:before {
    content: none;
}

#topbar #collapseButton:before,
#sidebar .collapseButton:before {
    transform: translateY(-6px);
}

#topbar #collapseButton:after,
#sidebar .collapseButton:after {
    transform: translateY(6px);
}

/* Animate only after the first paint, so restoring the collapsed state from the
   cookie on page load doesn't play the X -> burger animation every time. */
.nav-anim-ready #topbar #collapseButton:before,
.nav-anim-ready #topbar #collapseButton:after,
.nav-anim-ready #topbar #collapseButton > .fe,
.nav-anim-ready #sidebar .collapseButton:before,
.nav-anim-ready #sidebar .collapseButton:after,
.nav-anim-ready #sidebar .collapseButton > .fe {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

/* X state: desktop while the sidebar is expanded (is-small-menu is the persistent
   choice, so hover-expanding a small menu keeps the burger), mobile while the
   menu list is open. */
body:not(:has(#sidebar.is-small-menu)) #topbar #collapseButton:before,
#sidebar .collapseButton[aria-expanded="true"]:before {
    transform: translateY(0) rotate(45deg);
}

body:not(:has(#sidebar.is-small-menu)) #topbar #collapseButton:after,
#sidebar .collapseButton[aria-expanded="true"]:after {
    transform: translateY(0) rotate(-45deg);
}

body:not(:has(#sidebar.is-small-menu)) #topbar #collapseButton > .fe,
#sidebar .collapseButton[aria-expanded="true"] > .fe {
    opacity: 0;
    transform: scaleX(.2);
}

#topbar #collapseButton:focus-visible,
#sidebar .collapseButton:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Sidebar: links                                                      */
/* ------------------------------------------------------------------ */

#sidebar .navbar-nav .nav-link:not(.btn) {
    position: relative;
    display: flex;
    align-items: center;
    margin: 2px 10px;
    padding: 8px 12px;
    border-radius: var(--mt-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mt-nav-text) !important;
    fill: var(--mt-nav-text) !important;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar .navbar-nav .nav-link:not(.btn) > .fe,
#sidebar .navbar-nav .nav-link:not(.btn) > i[class^="fe"] {
    flex: 0 0 20px;
    min-width: 20px;
    margin-right: 10px;
    font-size: 17px;
    opacity: .85;
    transition: color .15s ease, opacity .15s ease;
}

#sidebar .navbar-nav .nav-link:not(.btn) > svg {
    flex: 0 0 auto;
    margin-right: 10px;
}

#sidebar .navbar-nav .nav-link:not(.btn):hover,
#sidebar .navbar-nav .nav-link:not(.btn):focus {
    background-color: var(--mt-nav-hover);
    color: var(--mt-nav-text-strong) !important;
    fill: var(--mt-nav-text-strong) !important;
}

#sidebar .navbar-nav .nav-link:not(.btn):hover > .fe {
    opacity: 1;
}

#sidebar .navbar-nav .nav-link:not(.btn):focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: -2px;
}

/* Active: mint-tinted pill, mint icon, small inset accent bar. */
#sidebar .navbar-nav .nav-link.active:not(.btn) {
    background-color: var(--mt-nav-active-bg);
    color: var(--mt-nav-text-strong) !important;
}

#sidebar .navbar-nav .nav-link.active:not(.btn) > .fe,
#sidebar .navbar-nav .nav-link.active:not(.btn) > svg {
    color: var(--mt-accent);
    fill: var(--mt-accent);
    opacity: 1;
}

/* Top-level items show active state with the pill only; the accent bar is
   reserved for the active item inside an open submenu (and hides Dashkit's own). */
#sidebar .navbar-nav .nav-link.active:not(.btn):before {
    display: none;
}

/* Outline (stroke) SVG icons such as Files: custom.css paints `.nav-link.active :first-child`
   with a mint fill, which turns the frame into a solid square. Keep them unfilled; they
   still turn mint through `stroke="currentColor"`. */
#sidebar .navbar-nav .nav-link svg[fill="none"],
#sidebar .navbar-nav .nav-link svg[fill="none"] :not([fill]) {
    fill: none !important;
}

#sidebar .navbar-nav .nav-link.active:not(.btn) > .fe {
    color: var(--mt-accent);
}

/* Collapsible group parents: no pill when a child is active, just bright text. */
#sidebar .navbar-nav .nav-link[data-toggle="collapse"].active:not(.btn) {
    background-color: transparent;
}

#sidebar .navbar-nav .nav-link[data-toggle="collapse"].active:not(.btn):before {
    display: none;
}

#sidebar .navbar-nav .nav-link[data-toggle="collapse"].active:not(.btn):hover {
    background-color: var(--mt-nav-hover);
}

#sidebar .navbar-nav .nav-link[data-toggle="collapse"][aria-expanded="true"]:not(.btn) {
    color: var(--mt-nav-text-strong) !important;
}

#sidebar .navbar-nav .nav-link[data-toggle="collapse"]:not(.btn):after {
    margin-left: auto;
    font-size: 13px;
    color: var(--mt-nav-muted);
    transition: transform .2s ease, color .15s ease;
}

#sidebar .navbar-nav .nav-link[data-toggle="collapse"]:not(.btn):hover:after,
#sidebar .navbar-nav .nav-link[data-toggle="collapse"][aria-expanded="true"]:not(.btn):after {
    color: var(--mt-nav-text);
}

/* ------------------------------------------------------------------ */
/* Sidebar: submenus                                                   */
/* ------------------------------------------------------------------ */

#sidebar .navbar-nav .nav-sm {
    position: relative;
    margin: 2px 0 6px 26px;
    padding-left: 0;
}

#sidebar .navbar-nav .nav-sm:before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background-color: var(--mt-nav-border);
}

/* 17px line + 2 x 6px padding + 2 x 2px margin = 33px per row. */
#sidebar .navbar-nav .nav-sm .nav-link:not(.btn) {
    margin: 2px 6px 2px 6px;
    padding: 6px 10px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 17px;
}

#sidebar .navbar-nav .nav-sm .nav-link.active:not(.btn) {
    background-color: var(--mt-nav-active-sub-bg);
}

#sidebar .navbar-nav .nav-sm .nav-link.active:not(.btn):before {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -7px;
    right: auto;
    width: 2px;
    border: 0;
    border-radius: 2px;
    background-color: var(--mt-accent);
}

/* ------------------------------------------------------------------ */
/* Sidebar: section labels, dividers, logo, badges                     */
/* ------------------------------------------------------------------ */

#sidebar .header-pretitle,
#sidebar .navbar-heading {
    /* The .navbar-nav lists sit 24px further left (Dashkit negative margins), so pull the
       label back to start exactly where the menu icons start. */
    margin: 0 0 0 -2px;
    padding: 16px 22px 6px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt-nav-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Span from the menu icons' left edge (22px) to the same inset on the right. */
#sidebar hr.navbar-divider {
    margin: 12px -2px !important;
    border-top-color: var(--mt-nav-border);
}

#sidebar .navbar-brand-img.rounded-circle {
    width: 90px;
    height: 90px;
    max-height: 90px;
    object-fit: cover;
    border-radius: 50% !important;
    /* The theme's max-width: 100% squeezed it into a tall sliver in the 66px mini sidebar. */
    max-width: none;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}

/* Phones/tablets: the profile switcher on the right already shows the club logo. */
@media (max-width: 991.98px) {
    #sidebar .navbar-brand-img.rounded-circle {
        display: none;
    }
}

#sidebar .badge.alert-badge,
#sidebar .badge.custom-alert-bg {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

#sidebar .navbar-nav .nav-link .badge-pill {
    border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Sidebar: bottom action buttons (payments, market, KYC, help...)     */
/* ------------------------------------------------------------------ */

#sidebar .navbar-nav .nav-link.btn,
#sidebar .navbar-collapse > .btn,
#sidebar .navbar-nav .btn {
    border-radius: var(--mt-radius);
}

#sidebar .navbar-nav .nav-link.btn {
    margin: 4px 10px;
}

#sidebar .btn-outline-primary,
#sidebar .btn-outline-light,
#sidebar .btn-outline-secondary,
#sidebar .btn-secondary,
#sidebar .btn-dark:not(.collapseButton) {
    background-color: var(--mt-nav-hover);
    border-color: var(--mt-nav-border);
    color: var(--mt-nav-text-strong) !important;
}

#sidebar .btn-outline-primary:hover,
#sidebar .btn-outline-light:hover,
#sidebar .btn-outline-secondary:hover,
#sidebar .btn-secondary:hover,
#sidebar .btn-dark:not(.collapseButton):hover {
    background-color: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------------ */
/* Sidebar: collapsed (mini) mode                                      */
/* ------------------------------------------------------------------ */

@media (min-width: 992px) {
    #sidebar.navbar-vertical-sm .navbar-nav .nav-link:not(.btn) {
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 2px auto;
        padding: 0;
    }

    #sidebar.navbar-vertical-sm .navbar-nav .nav-link:not(.btn) > .fe,
    #sidebar.navbar-vertical-sm .navbar-nav .nav-link:not(.btn) > svg {
        margin-right: 0;
    }

    #sidebar.navbar-vertical-sm .navbar-nav .nav-link:not(.btn):after {
        display: none;
    }

    #sidebar.navbar-vertical-sm .navbar-nav .nav-link.active:not(.btn):before {
        display: none;
    }

    /* As wide as the 40px icon items and centred under them (was 12px from the left to the edge,
       which looked shifted right). */
    #sidebar.navbar-vertical-sm hr.navbar-divider {
        width: 40px;
        margin: 10px auto !important;
    }

    /* Club logo: a 35px circle centred in the collapsed sidebar. */
    #sidebar.navbar-vertical-sm .navbar-brand:has(> .navbar-brand-img.rounded-circle) {
        margin-left: 0 !important;
    }

    #sidebar.navbar-vertical-sm .navbar-brand-img.rounded-circle {
        width: 35px;
        height: 35px;
        max-height: 35px;
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

#topbar .container-fluid {
    align-items: center;
}

#topbar .container-fluid > div {
    align-items: center;
}

/* AI Agent button: same height/radius as the other header controls. */
#topbar .ai-agent-button,
#sidebar .ai-agent-button {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--mt-radius);
    background-color: var(--mt-nav-hover);
    border: 1px solid var(--mt-nav-border);
    font-size: 13.5px;
}

#topbar .ai-agent-button:hover,
#topbar .ai-agent-button.active,
#sidebar .ai-agent-button:hover,
#sidebar .ai-agent-button.active {
    background-color: rgba(255, 255, 255, .10);
    border-color: rgba(45, 224, 181, .35);
}

#topbar .ai-agent-button {
    margin-right: 12px !important;
}

/* Profile / club switcher trigger as a pill. */
#topbar .dropdown > a:has(.profile-switcher-selected-club-logo),
#sidebar .dropdown > a:has(.profile-switcher-selected-club-logo) {
    height: 42px;
    padding: 4px 14px 4px 5px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid var(--mt-nav-border);
    transition: background-color .15s ease, border-color .15s ease;
}

#sidebar .dropdown > a:has(.profile-switcher-selected-club-logo) {
    padding-right: 5px;
}

#topbar .dropdown > a:has(.profile-switcher-selected-club-logo):hover,
#topbar .dropdown.show > a:has(.profile-switcher-selected-club-logo),
#sidebar .dropdown > a:has(.profile-switcher-selected-club-logo):hover {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
}

#topbar .profile-switcher-selected-club-logo,
#sidebar .profile-switcher-selected-club-logo {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

#topbar .profile-switcher-selected-club-text {
    line-height: 1.25;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#topbar .profile-switcher-selected-club-text:not(.myteam-green-text) {
    color: var(--mt-nav-text-strong);
    font-size: 13px !important;
    font-weight: 600;
}

#topbar .profile-switcher-selected-club-text.myteam-green-text {
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Cart: ghost icon button with mint count badge. */
#topbar .dropdown > a:has(> img[src*="shopping-cart"]),
#sidebar .dropdown > a:has(> img[src*="shopping-cart"]) {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt-radius);
    transition: background-color .15s ease;
}

#topbar .dropdown > a:has(> img[src*="shopping-cart"]):hover,
#sidebar .dropdown > a:has(> img[src*="shopping-cart"]):hover {
    background-color: var(--mt-nav-hover);
}

#topbar .cart-count,
#sidebar .cart-count {
    background-color: var(--mt-accent) !important;
    color: var(--mt-accent-ink) !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--mt-nav-bg);
}

/* Avatar: mint-soft initials with a ring on hover / open. */
#topbar .avatar-title.custom-blue-bg,
#sidebar .avatar-title.custom-blue-bg {
    background-color: rgba(45, 224, 181, .18) !important;
    color: var(--mt-accent) !important;
    font-weight: 600;
    font-size: 13px;
    transition: box-shadow .15s ease;
}

#topbar .dropdown > a.avatar:hover .avatar-title,
#topbar .dropdown.show > a.avatar .avatar-title,
#sidebar .dropdown > a.avatar:hover .avatar-title,
#sidebar .dropdown.show > a.avatar .avatar-title {
    box-shadow: 0 0 0 2px rgba(45, 224, 181, .45);
}

/* Language switcher: small ghost pill. */
#topbar .dropdown > a.avatar:not(:has(.avatar-title)),
#sidebar .dropdown > a.avatar:not(:has(.avatar-title)) {
    width: auto;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .15s ease;
}

#topbar .dropdown > a.avatar:not(:has(.avatar-title)):hover,
#topbar .dropdown.show > a.avatar:not(:has(.avatar-title)),
#sidebar .dropdown > a.avatar:not(:has(.avatar-title)):hover {
    background-color: var(--mt-nav-hover);
}

#topbar .dropdown > a.avatar:not(:has(.avatar-title)) .fe-chevron-down {
    font-size: 12px;
    opacity: .7;
}

/* Header dropdown panels. */
#topbar .dropdown-menu,
#sidebar .dropdown-menu {
    margin-top: 8px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(18, 38, 63, .08);
    box-shadow: 0 12px 32px rgba(18, 38, 63, .18);
}

/* Invisible bridge over the 8px gap, so hover-opened menus stay open on the way down. */
#topbar .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

#topbar .dropdown-menu .dropdown-item,
#sidebar .dropdown-menu .dropdown-item {
    border-radius: 8px;
}

#topbar .dropdown-menu .dropdown-item:not(p):hover,
#topbar .dropdown-menu .dropdown-item:not(p):focus,
#sidebar .dropdown-menu .dropdown-item:not(p):hover,
#sidebar .dropdown-menu .dropdown-item:not(p):focus {
    background-color: #F3F6FA;
}

#topbar .dropdown-menu .dropdown-divider,
#sidebar .dropdown-menu .dropdown-divider {
    margin: 6px 0;
}

/* Account dropdown: logout as a distinct outlined button; hover only tints the background. */
#topbar .dropdown-menu .dropdown-item--logout,
#sidebar .dropdown-menu .dropdown-item--logout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid #E3EBF6;
    border-radius: 8px;
    font-weight: 500;
    color: #283E59;
    transition: background-color .15s ease;
}

#topbar .dropdown-menu .dropdown-item--logout .fe,
#sidebar .dropdown-menu .dropdown-item--logout .fe {
    font-size: 15px;
    color: #6E84A3;
}

#topbar .dropdown-menu .dropdown-item--logout:hover,
#topbar .dropdown-menu .dropdown-item--logout:focus,
#sidebar .dropdown-menu .dropdown-item--logout:hover,
#sidebar .dropdown-menu .dropdown-item--logout:focus {
    background-color: #F3F6FA;
    color: #283E59;
}

/* Impersonation notice (layouts/main, layouts/without_sidebar): a soft mint pill at the
   bottom centre instead of a dark full-width bar under the header. */
#impersonate-banner {
    top: auto;
    bottom: 20px;
    left: 50%;
    width: auto;
    max-width: calc(100vw - 32px);
    padding: 6px 6px 6px 14px !important;
    column-gap: 12px;
    border: 1px solid #8EEDD6;
    border-radius: 999px;
    background-color: #E8FBF5;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .14);
    color: #0B5E4C;
    font-size: 13px;
    transform: translateX(-50%);
    z-index: 1050;
}

#impersonate-banner::before {
    content: "\e95c"; /* Feather eye */
    font-family: 'Feather';
    font-size: 14px;
    color: #0E9E86;
}

#impersonate-banner p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mint "Leave" button, same as the other mint CTAs. */
#impersonate-banner .btn {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background-color: #2DE0B5;
    color: #12263F;
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
}

#impersonate-banner .btn:hover {
    background-color: #26CFA6;
    color: #12263F;
}

/* No full-width bar any more, so the page doesn't need the extra top offset. */
#impersonate-banner + .main-content {
    padding-top: 0;
}

@media (min-width: 992px) {
    #impersonate-banner + .main-content {
        padding-top: 65px;
    }
}

/* Phones: keep clear of the tawk.to chat bubble (bottom right, ~60px + margin). */
@media (max-width: 767.98px) {
    #impersonate-banner {
        left: 16px;
        right: 96px;
        max-width: none;
        transform: none;
    }

    #impersonate-banner p {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Admin inside a club: the admin menu folded into one "Admin" group (layouts/navigation). */
.sidebar-admin-group .nav-link[href="#sidebarAdmin"] > .fe {
    color: var(--mt-accent, #2DE0B5);
}

/* The theme gives every .navbar-nav negative side margins; nested in the group they applied twice and
   pushed the list past the sidebar (horizontal scroll). Reset them and indent inside the links instead. */
#sidebarAdmin > .navbar-nav {
    margin-left: 0;
    margin-right: 0;
}

#sidebarAdmin > .navbar-nav > .nav-item > .nav-link {
    padding-left: 26px;
}

/* Club card heading the club menu for admins (components/clubsubmenu). */
/* Not a link. Sits in a .navbar-nav item like the menu links, with their side margins, so its edges match
   them on desktop and mobile; the logo is centred on the same line as their icons. */
.sidebar-club-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 10px 12px;
    padding: 8px 12px 8px 6px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .05);
}

.sidebar-club-card__logo,
.sidebar-club-card__initials {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.sidebar-club-card__logo {
    object-fit: cover;
    background-color: #FFFFFF;
}

.sidebar-club-card__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2DE0B5;
    color: #12263F;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-club-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sidebar-club-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.sidebar-club-card__role {
    color: #6E84A3;
    font-size: 11px;
}

/* Collapsed sidebar: the club's logo / initials, centred on the icon column. */
.sidebar-club-avatar {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

/* Mobile header: slightly smaller myTeam mark (natural 40x35). */
#sidebar img[src*="default_mobile_logo"] {
    height: 28px;
    width: auto;
}

/* ------------------------------------------------------------------ */
/* Payments section at the bottom of the club menu (clubsubmenu)        */
/* ------------------------------------------------------------------ */

/* "Online Πληρωμές" activation CTA (kyc_partial, shown while the club's seller isn't authorised):
   mint button with the same edges as the menu items. */
#sidebar .navbar-nav .btn-nav-item > .nav-link.btn {
    display: flex;
    align-items: center;
    margin: 2px 10px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background-color: #2DE0B5;
    color: #12263F !important;
    font-weight: 600;
    box-shadow: none;
}

#sidebar .navbar-nav .btn-nav-item > .nav-link.btn:hover {
    background-color: #1FCBA2;
}

#sidebar .navbar-nav .btn-nav-item > .nav-link.btn > .fe {
    margin-right: 10px;
    color: #12263F !important;
}

#sidebar .navbar-nav .btn-nav-item > .nav-link.btn > .fe-chevron-right {
    margin-right: 0;
}

/* SportsPass / Market / Δωρεά: soft dark cards with an icon tile. */
#sidebar .sidebar-service-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 6px 10px 0;
    padding: 7px 10px 7px 6px;
    border: 0;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .05);
    color: #E3EBF6 !important;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    box-shadow: none;
    transition: background-color .15s ease;
}

#sidebar .sidebar-service-card:hover,
#sidebar .sidebar-service-card:focus {
    background-color: rgba(255, 255, 255, .09);
    text-decoration: none;
}

#sidebar .sidebar-service-card__logo {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

#sidebar .sidebar-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 15px;
}

#sidebar .sidebar-service-card__icon--purple {
    background-color: rgba(167, 139, 250, .18);
    color: #C4B5FD;
}

#sidebar .sidebar-service-card__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .sidebar-service-card__end {
    color: #6E84A3;
    font-size: 13px;
}

/* Collapsed sidebar: icon only, centred like the menu icons. */
#sidebar.navbar-vertical-sm .sidebar-service-card {
    justify-content: center;
    width: 40px;
    margin: 6px auto 0;
    padding: 6px;
}

/* The donation card is a <button> (AddDonationModal) without .btn: inherit the menu's font. */
#sidebar button.sidebar-service-card {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}