/* =========================================================
   FLAX SIDEBAR — shared WHMCS interior navigation
   Store cart sidebar is intentionally excluded.
   ========================================================= */

.fjordly-shell .sidebar:not(.cart-sidebar) {
    --side-cyan: #67d4ff;
    --side-blue: #347fff;
    --side-panel: #091831;
    --side-deep: #050e20;
    --side-line: rgba(112, 177, 255, .17);
    --side-muted: #8399b9;
    position: relative;
}

.fjordly-shell .sidebar:not(.cart-sidebar):before {
    background: linear-gradient(180deg, rgba(103, 212, 255, .55), transparent);
    content: '';
    height: 62px;
    left: -1px;
    opacity: .7;
    pointer-events: none;
    position: absolute;
    top: 20px;
    width: 1px;
    z-index: 3;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-sidebar,
.fjordly-shell .sidebar:not(.cart-sidebar) > .card {
    background:
        radial-gradient(circle at 100% 0, rgba(52, 127, 255, .12), transparent 15rem),
        linear-gradient(155deg, rgba(11, 29, 59, .99), rgba(5, 14, 31, .99)) !important;
    border: 1px solid var(--side-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .24) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-sidebar:hover,
.fjordly-shell .sidebar:not(.cart-sidebar) > .card:hover {
    border-color: rgba(103, 212, 255, .25) !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-header {
    background: linear-gradient(90deg, rgba(52, 127, 255, .13), rgba(52, 127, 255, .035)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--side-line) !important;
    min-height: 58px;
    padding: 0 !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-title {
    align-items: center;
    color: #edf7ff !important;
    display: flex;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .7rem !important;
    font-weight: 750 !important;
    letter-spacing: .105em;
    min-height: 58px;
    padding: 0 17px;
    text-transform: uppercase;
    width: 100%;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-title > i:not(.card-minimise) {
    align-items: center;
    background: rgba(52, 127, 255, .14);
    border: 1px solid rgba(103, 212, 255, .16);
    border-radius: 9px;
    color: var(--side-cyan) !important;
    display: inline-flex;
    font-size: .7rem;
    height: 30px;
    justify-content: center;
    margin-right: 10px;
    width: 30px;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-minimise {
    color: #60799d !important;
    font-size: .64rem;
    margin-left: auto;
    transition: color .2s ease, transform .2s ease;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-header:hover .card-minimise {
    color: var(--side-cyan) !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-minimise.minimised,
.fjordly-shell .sidebar:not(.cart-sidebar) .card-minimise.fa-chevron-down {
    transform: rotate(180deg);
}

.fjordly-shell .sidebar:not(.cart-sidebar) .collapsable-card-body {
    background: transparent !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group {
    background: transparent !important;
    border: 0 !important;
    gap: 2px;
    padding: 7px !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--side-muted) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: .76rem;
    font-weight: 650;
    margin: 0 !important;
    min-height: 43px;
    padding: 10px 11px !important;
    position: relative;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item:before {
    background: var(--side-cyan);
    border-radius: 0 4px 4px 0;
    content: '';
    height: 20px;
    left: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scaleY(.4);
    transition: opacity .2s ease, transform .2s ease;
    width: 3px;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item:hover {
    background: rgba(52, 127, 255, .08) !important;
    color: #dcebff !important;
    transform: translateX(2px);
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.active,
.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.active:focus,
.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.active:hover {
    background: linear-gradient(90deg, rgba(52, 127, 255, .24), rgba(52, 127, 255, .08)) !important;
    box-shadow: inset 0 0 0 1px rgba(103, 212, 255, .12);
    color: #f4f9ff !important;
    transform: none;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.active:before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.disabled {
    opacity: .42;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .sidebar-menu-item-wrapper {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 0;
    width: 100%;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .sidebar-menu-item-icon-wrapper {
    align-items: center;
    color: #5f789e;
    display: flex;
    flex: 0 0 22px;
    height: 22px;
    justify-content: center;
    transition: color .2s ease;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item:hover .sidebar-menu-item-icon-wrapper,
.fjordly-shell .sidebar:not(.cart-sidebar) .list-group-item.active .sidebar-menu-item-icon-wrapper {
    color: var(--side-cyan);
}

.fjordly-shell .sidebar:not(.cart-sidebar) .sidebar-menu-item-icon {
    font-size: .72rem;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .sidebar-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .sidebar-menu-item-badge,
.fjordly-shell .sidebar:not(.cart-sidebar) .card-title > .badge {
    margin-left: auto;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .badge {
    background: rgba(103, 212, 255, .11) !important;
    border: 1px solid rgba(103, 212, 255, .16);
    border-radius: 999px !important;
    color: var(--side-cyan) !important;
    font-size: .57rem;
    font-weight: 800;
    line-height: 1;
    min-width: 25px;
    padding: 5px 7px !important;
    text-align: center;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-body {
    background: transparent !important;
    color: #8da2c0;
    font-size: .78rem;
    line-height: 1.65;
    padding: 16px !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-body p:last-child {
    margin-bottom: 0;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-footer {
    background: rgba(3, 10, 23, .42) !important;
    border: 0 !important;
    border-top: 1px solid var(--side-line) !important;
    color: #8299b9;
    padding: 13px 16px !important;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .card-footer a {
    color: var(--side-cyan) !important;
    font-size: .72rem;
    font-weight: 750;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .form-control,
.fjordly-shell .sidebar:not(.cart-sidebar) select {
    background-color: #050d1e !important;
    border: 1px solid rgba(112, 177, 255, .24) !important;
    border-radius: 10px !important;
    color: #e3f1ff !important;
    font-size: .78rem;
    min-height: 44px;
}

.fjordly-shell .sidebar:not(.cart-sidebar) .form-control:focus,
.fjordly-shell .sidebar:not(.cart-sidebar) select:focus {
    border-color: var(--side-cyan) !important;
    box-shadow: 0 0 0 4px rgba(103, 212, 255, .08) !important;
}

/* Secondary sidebar keeps a little breathing room beneath the primary one. */
.fjordly-shell .sidebar.sidebar-secondary:not(.cart-sidebar) {
    margin-top: 14px;
}

@media (max-width: 991.98px) {
    .fjordly-shell .sidebar:not(.cart-sidebar):before { display: none; }
    .fjordly-shell .sidebar:not(.cart-sidebar) .card-sidebar,
    .fjordly-shell .sidebar:not(.cart-sidebar) > .card { border-radius: 15px !important; }
}

@media (max-width: 767.98px) {
    .fjordly-shell .sidebar:not(.cart-sidebar) { margin-bottom: 18px; }
    .fjordly-shell .sidebar:not(.cart-sidebar) .card-title { font-size: .66rem !important; }
}