/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-e2caio3gru] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-e2caio3gru] {
    flex: 1;
}

.sidebar[b-e2caio3gru] {
}

.top-row[b-e2caio3gru] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-e2caio3gru]  a, .top-row[b-e2caio3gru]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-e2caio3gru]  a:hover, .top-row[b-e2caio3gru]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-e2caio3gru]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-e2caio3gru] {
        justify-content: space-between;
    }

        .top-row[b-e2caio3gru]  a, .top-row[b-e2caio3gru]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page[b-e2caio3gru] {
        flex-direction: row;
    }

    .sidebar[b-e2caio3gru] {
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-e2caio3gru] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-e2caio3gru]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-e2caio3gru], article[b-e2caio3gru] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-e2caio3gru] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-e2caio3gru] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-4gn57lyd6a] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-4gn57lyd6a] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-4gn57lyd6a] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-4gn57lyd6a] {
    font-size: 1.1rem;
}

.bi[b-4gn57lyd6a] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-4gn57lyd6a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-4gn57lyd6a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-4gn57lyd6a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-4gn57lyd6a] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-4gn57lyd6a] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-4gn57lyd6a] {
        padding-bottom: 1rem;
    }

    .nav-item[b-4gn57lyd6a]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-4gn57lyd6a]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-4gn57lyd6a]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-4gn57lyd6a] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-4gn57lyd6a] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-4gn57lyd6a] {
        display: none;
    }

    .nav-scrollable[b-4gn57lyd6a] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/ActivityLogs/ActivityLogsRoot.razor.rz.scp.css */
.loader[b-06yvu9c784] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-06yvu9c784 1s infinite linear;
}

@keyframes l7-b-06yvu9c784 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-06yvu9c784] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-06yvu9c784] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-06yvu9c784],
    .btn-orange:focus[b-06yvu9c784],
    .btn-orange:active[b-06yvu9c784] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-06yvu9c784] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-06yvu9c784] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-06yvu9c784] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-06yvu9c784] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-06yvu9c784] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-06yvu9c784] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-06yvu9c784] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-06yvu9c784] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-06yvu9c784] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-06yvu9c784] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-06yvu9c784],
.focus-ring-orange:focus[b-06yvu9c784] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-06yvu9c784] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-06yvu9c784] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-06yvu9c784]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-06yvu9c784]::after {
    animation: ripple-b-06yvu9c784 1s ease-out;
}

@keyframes ripple-b-06yvu9c784 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-06yvu9c784] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-06yvu9c784] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-06yvu9c784] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-06yvu9c784] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-06yvu9c784] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-06yvu9c784] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-06yvu9c784] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-06yvu9c784],
.btn-custom-secondary[b-06yvu9c784],
.btn-custom-danger[b-06yvu9c784] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Classes/ClassBooking/ClassBookingForm.razor.rz.scp.css */
/* Container Styling */
[b-cb5vflcn0p] .elite-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

[b-cb5vflcn0p] .elite-card-header {
    padding: 20px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* Add Button */
[b-cb5vflcn0p] .btn-add-duration {
    background: #1e293b;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.3s ease;
}

    [b-cb5vflcn0p] .btn-add-duration:hover {
        background: #e61141; /* Your Primary Red */
        transform: translateY(-2px);
    }

/* Individual Rows */
[b-cb5vflcn0p] .duration-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    padding: 15px 25px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    [b-cb5vflcn0p] .duration-row:hover {
        background: #fcfdfe;
    }

/* Input Styles */
[b-cb5vflcn0p] .cell-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: block;
}

[b-cb5vflcn0p] .form-control-hybrid {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    width: 100%;
}

    [b-cb5vflcn0p] .form-control-hybrid:focus {
        border-color: #e61141;
        outline: none;
        box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.1);
    }

/* Time Separator Icon */
[b-cb5vflcn0p] .time-separator {
    padding-bottom: 12px;
    color: #cbd5e1;
}

/* Delete Action */
[b-cb5vflcn0p] .btn-delete-icon {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    [b-cb5vflcn0p] .btn-delete-icon:hover {
        background: #e11d48;
        color: white;
    }

/* Validation Customization */
[b-cb5vflcn0p] .validation-custom {
    font-size: 0.7rem;
    margin-left: 80px;
    margin-bottom: 10px;
}


/* /Components/Pages/Classes/ClassBooking/ClassBookingRoot.razor.rz.scp.css */
.loader[b-fqwamjku6q] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-fqwamjku6q 1s infinite linear;
}

@keyframes l7-b-fqwamjku6q {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-fqwamjku6q] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-fqwamjku6q] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-fqwamjku6q],
    .btn-orange:focus[b-fqwamjku6q],
    .btn-orange:active[b-fqwamjku6q] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-fqwamjku6q] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-fqwamjku6q] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-fqwamjku6q] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-fqwamjku6q] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-fqwamjku6q] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-fqwamjku6q] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-fqwamjku6q] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-fqwamjku6q] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-fqwamjku6q] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-fqwamjku6q] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-fqwamjku6q],
.focus-ring-orange:focus[b-fqwamjku6q] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-fqwamjku6q] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-fqwamjku6q] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-fqwamjku6q]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-fqwamjku6q]::after {
    animation: ripple 1s ease-out;
}

@@keyframes ripple {
    0%[b-fqwamjku6q] {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100%[b-fqwamjku6q] {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-fqwamjku6q] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-fqwamjku6q] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-fqwamjku6q] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-fqwamjku6q] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-fqwamjku6q] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-fqwamjku6q] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-fqwamjku6q] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-fqwamjku6q],
.btn-custom-secondary[b-fqwamjku6q],
.btn-custom-danger[b-fqwamjku6q] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Classes/GymClasses/GymClassForm.razor.rz.scp.css */
/* Container Styling */
[b-l9eo8anlml] .elite-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

[b-l9eo8anlml] .elite-card-header {
    padding: 20px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* Add Button */
[b-l9eo8anlml] .btn-add-duration {
    background: #1e293b;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.3s ease;
}

    [b-l9eo8anlml] .btn-add-duration:hover {
        background: #e61141; /* Your Primary Red */
        transform: translateY(-2px);
    }

/* Individual Rows */
[b-l9eo8anlml] .duration-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    padding: 15px 25px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    [b-l9eo8anlml] .duration-row:hover {
        background: #fcfdfe;
    }

/* Input Styles */
[b-l9eo8anlml] .cell-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: block;
}

[b-l9eo8anlml] .form-control-hybrid {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    width: 100%;
}

    [b-l9eo8anlml] .form-control-hybrid:focus {
        border-color: #e61141;
        outline: none;
        box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.1);
    }

/* Time Separator Icon */
[b-l9eo8anlml] .time-separator {
    padding-bottom: 12px;
    color: #cbd5e1;
}

/* Delete Action */
[b-l9eo8anlml] .btn-delete-icon {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    [b-l9eo8anlml] .btn-delete-icon:hover {
        background: #e11d48;
        color: white;
    }

/* Validation Customization */
[b-l9eo8anlml] .validation-custom {
    font-size: 0.7rem;
    margin-left: 80px;
    margin-bottom: 10px;
}


/* /Components/Pages/Classes/GymClasses/GymClassRoot.razor.rz.scp.css */
.loader[b-sbuwdq75ij] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-sbuwdq75ij 1s infinite linear;
}

@keyframes l7-b-sbuwdq75ij {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-sbuwdq75ij] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-sbuwdq75ij] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-sbuwdq75ij],
    .btn-orange:focus[b-sbuwdq75ij],
    .btn-orange:active[b-sbuwdq75ij] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-sbuwdq75ij] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-sbuwdq75ij] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-sbuwdq75ij] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-sbuwdq75ij] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-sbuwdq75ij] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-sbuwdq75ij] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-sbuwdq75ij] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-sbuwdq75ij] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-sbuwdq75ij] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-sbuwdq75ij] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-sbuwdq75ij],
.focus-ring-orange:focus[b-sbuwdq75ij] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-sbuwdq75ij] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-sbuwdq75ij] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-sbuwdq75ij]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-sbuwdq75ij]::after {
    animation: ripple-b-sbuwdq75ij 1s ease-out;
}

@keyframes ripple-b-sbuwdq75ij {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-sbuwdq75ij] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-sbuwdq75ij] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-sbuwdq75ij] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-sbuwdq75ij] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-sbuwdq75ij] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-sbuwdq75ij] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-sbuwdq75ij] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-sbuwdq75ij],
.btn-custom-secondary[b-sbuwdq75ij],
.btn-custom-danger[b-sbuwdq75ij] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Classes/NanMembers/NanMemberRoot.razor.rz.scp.css */
.loader[b-tzudkg53fm] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-tzudkg53fm 1s infinite linear;
}

@keyframes l7-b-tzudkg53fm {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-tzudkg53fm] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-tzudkg53fm] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-tzudkg53fm],
    .btn-orange:focus[b-tzudkg53fm],
    .btn-orange:active[b-tzudkg53fm] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-tzudkg53fm] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-tzudkg53fm] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-tzudkg53fm] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-tzudkg53fm] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-tzudkg53fm] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-tzudkg53fm] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-tzudkg53fm] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-tzudkg53fm] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-tzudkg53fm] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-tzudkg53fm] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-tzudkg53fm],
.focus-ring-orange:focus[b-tzudkg53fm] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-tzudkg53fm] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-tzudkg53fm] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-tzudkg53fm]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-tzudkg53fm]::after {
    animation: ripple-b-tzudkg53fm 1s ease-out;
}

@keyframes ripple-b-tzudkg53fm {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-tzudkg53fm] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-tzudkg53fm] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-tzudkg53fm] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-tzudkg53fm] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-tzudkg53fm] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-tzudkg53fm] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-tzudkg53fm] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-tzudkg53fm],
.btn-custom-secondary[b-tzudkg53fm],
.btn-custom-danger[b-tzudkg53fm] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/GymInput/GymInput.razor.rz.scp.css */
[b-0ibglfamwo] .elite-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

[b-0ibglfamwo] .elite-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    [b-0ibglfamwo] .elite-input:focus {
        border-color: #1e293b; /* Dark Slate */
        box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
    }

    [b-0ibglfamwo] .elite-input:disabled {
        background-color: #f8fafc;
        border-color: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

[b-0ibglfamwo] .elite-validation {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e61141; /* Your Primary Red */
    margin-top: 4px;
}




/* Checkbox specific wrapper */
[b-0ibglfamwo] .elite-checkbox-wrapper {
    display: flex;
    align-items: center;
    padding-top: 10px; /* Aligns visually with text inputs in same row */
    min-height: 45px;
}

/* Custom Checkbox Appearance */
[b-0ibglfamwo] .elite-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 12px;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

    [b-0ibglfamwo] .elite-checkbox:checked {
        background-color: #e61141; /* Your Primary Red */
        border-color: #e61141;
    }

    [b-0ibglfamwo] .elite-checkbox:focus {
        box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
        border-color: #e61141;
    }

/* Checkbox Label */
[b-0ibglfamwo] .elite-label-checkbox {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    margin-bottom: 0;
}

/* Shared Disabled State */
[b-0ibglfamwo] .elite-checkbox:disabled,
[b-0ibglfamwo] .elite-checkbox:disabled ~ .elite-label-checkbox {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Components/Pages/Home.razor.rz.scp.css */
:root[b-lb8nsnztyf] {
    --brand: #e61141;
    --brand-light: rgba(230, 17, 65, 0.1);
    --text-dark: #2d2d2d;
    --border-color: #e0e0e0;
    --brand-soft: rgba(230, 17, 65, 0.05);
    --gym-primary: #e61141;
    --gym-dark: #111827;
}

.tabs-container[b-lb8nsnztyf] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.spinner-border-sm[b-lb8nsnztyf] {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12em;
    --bs-spinner-color: #e61141; /* Matches your elite theme */
}

.btn-action-elite:disabled[b-lb8nsnztyf] {
    cursor: wait;
    filter: grayscale(0.5);
    opacity: 0.7;
}

/* Maintain button width so it doesn't "jump" when spinner appears */
.btn-action-elite[b-lb8nsnztyf] {
    min-width: 135px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.segmented-control[b-lb8nsnztyf] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.control-item[b-lb8nsnztyf] {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

    .control-item i[b-lb8nsnztyf] {
        font-size: 1rem;
    }

    .control-item.active[b-lb8nsnztyf] {
        background: #ffffff;
        color: #e61141;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

@media (max-width: 576px) {
    .control-item span[b-lb8nsnztyf] {
        display: none;
    }

    .control-item[b-lb8nsnztyf] {
        padding: 8px 12px;
    }
}


.payment-grid-stream[b-lb8nsnztyf] {
    max-width: 1000px; /* Wider to accommodate two columns */
    margin: 0 auto;
}

.payment-card[b-lb8nsnztyf] {
    padding: 1.25rem;
    border-radius: 18px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    height: 100%; /* Keeps cards same height in a row */
}

/* --- THE "NEAR" TOP ROW (FIRST TWO) --- */
.near-item[b-lb8nsnztyf] {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

    .near-item.type-pending[b-lb8nsnztyf] {
        background-color: #e61141; /* Your Primary Red */
        color: white;
        border: none;
    }

    .near-item.type-paid[b-lb8nsnztyf] {
        background-color: #1a1a1a; /* Elite Dark */
        color: white;
        border-bottom: 4px solid #22c55e;
    }

/* --- THE OLDER ROWS --- */
.older-item[b-lb8nsnztyf] {
    background-color: #ffffff;
}

    .older-item.type-paid[b-lb8nsnztyf] {
        border-left: 4px solid #22c55e;
    }

    .older-item.type-pending[b-lb8nsnztyf] {
        border-left: 4px solid #e61141;
    }

/* --- INTERNAL ELEMENTS --- */
.date-box[b-lb8nsnztyf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid rgba(0,0,0,0.05);
    min-width: 55px;
}

/* White borders for the dark/red cards */
.near-item .date-box[b-lb8nsnztyf] {
    border-right: 1px solid rgba(255,255,255,0.2);
}

.date-box .day[b-lb8nsnztyf] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.date-box .month[b-lb8nsnztyf] {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.payment-purpose[b-lb8nsnztyf] {
    font-weight: 700;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; /* Prevents long text from breaking the two-column grid */
}

.payment-amount[b-lb8nsnztyf] {
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
}

    .payment-amount .curr[b-lb8nsnztyf] {
        font-size: 0.6rem;
        font-weight: 400;
        opacity: 0.7;
    }

.payment-status-text[b-lb8nsnztyf] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}


.empty-payment-state[b-lb8nsnztyf] {
    padding: 5rem 2rem;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
    animation: fadeIn-b-lb8nsnztyf 0.6s ease-out;
}

    .empty-payment-state .icon-circle[b-lb8nsnztyf] {
        width: 80px;
        height: 80px;
        background: #fff1f2; /* Light Brand Tint */
        color: #e61141; /* Brand Primary */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        margin: 0 auto 1.5rem;
        box-shadow: 0 10px 20px rgba(230, 17, 65, 0.05);
    }

    .empty-payment-state h4[b-lb8nsnztyf] {
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 0.5rem;
    }

    .empty-payment-state p[b-lb8nsnztyf] {
        color: #888;
        font-size: 0.95rem;
        line-height: 1.6;
    }

/* Minimalist decoration at the bottom */
.minimal-loader[b-lb8nsnztyf] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 8px;
}

    .minimal-loader .dot[b-lb8nsnztyf] {
        width: 6px;
        height: 6px;
        background: #e61141;
        border-radius: 50%;
        opacity: 0.2;
        animation: pulse-b-lb8nsnztyf 1.5s infinite ease-in-out;
    }

        .minimal-loader .dot:nth-child(2)[b-lb8nsnztyf] {
            animation-delay: 0.2s;
        }

        .minimal-loader .dot:nth-child(3)[b-lb8nsnztyf] {
            animation-delay: 0.4s;
        }

@keyframes pulse-b-lb8nsnztyf {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Action Bar Styling */
.card-action-bar[b-lb8nsnztyf] {
    border-color: rgba(0,0,0,0.05) !important;
}

/* Adjust border color for the Near/Dark/Red cards */
.near-item .card-action-bar[b-lb8nsnztyf] {
    border-color: rgba(255,255,255,0.2) !important;
}

/* The Pay Button */
.btn-pay-now[b-lb8nsnztyf] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Button style when card is PENDING (The Red/Pink Card) */
.type-pending.near-item .btn-pay-now[b-lb8nsnztyf] {
    background: white;
    color: #e61141;
}

/* Button style when card is WHITE (Older items) */
.older-item.type-pending .btn-pay-now[b-lb8nsnztyf] {
    background: #e61141;
    color: white;
}

.btn-pay-now:hover[b-lb8nsnztyf] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Fix for the Date Box Year */
.date-box .year[b-lb8nsnztyf] {
    font-size: 0.55rem;
    opacity: 0.5;
    font-weight: 700;
}

.text-truncate[b-lb8nsnztyf] {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purpose-text-multiline[b-lb8nsnztyf] {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    display: block;
}

.spinner-border-sm[b-lb8nsnztyf] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Ensure the button doesn't jump in size when loading starts */
.btn-pay-now[b-lb8nsnztyf] {
    min-width: 130px;
    justify-content: center;
}

    /* Subtle pulse animation for the button while processing */
    .btn-pay-now:disabled:not([systemfeaturetype])[b-lb8nsnztyf] {
        cursor: wait;
        opacity: 0.8;
    }





.membership-master-card[b-lb8nsnztyf] {
    background: white;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
}

/* Hero Section */
.membership-hero-banner[b-lb8nsnztyf] {
    background: #111827;
    color: white;
    padding: 1.5rem;
}

.contract-id[b-lb8nsnztyf] {
    font-weight: 900;
}

.text-brand[b-lb8nsnztyf] {
    color: #e61141;
}

.meta-label[b-lb8nsnztyf] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 800;
    margin: 0;
}

.meta-value[b-lb8nsnztyf] {
    font-weight: 700;
    margin: 0;
}

/* Plan Portfolio */
.plan-portfolio-section[b-lb8nsnztyf] {
    background: #f8fafc;
    padding: 1rem;
}

.section-title[b-lb8nsnztyf] {
    font-weight: 800;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
    letter-spacing: 1px;
}

/* Plan Cards */
.plan-detail-card[b-lb8nsnztyf] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.plan-label[b-lb8nsnztyf] {
    color: #e61141;
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.plan-title[b-lb8nsnztyf] {
    font-weight: 800;
    color: #111827;
    margin: 4px 0;
}

.plan-dates[b-lb8nsnztyf] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

/* Financials */
.total-paid[b-lb8nsnztyf] {
    font-size: 1.5rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

    .total-paid small[b-lb8nsnztyf] {
        font-size: 0.7rem;
        font-weight: 500;
    }

.remaining-balance-badge[b-lb8nsnztyf] {
    background: #fff1f2;
    color: #e61141;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 8px;
    display: inline-block;
}

.settled-badge[b-lb8nsnztyf] {
    color: #22c55e;
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 8px;
}

/* Custom Progress Bars */
.stat-label[b-lb8nsnztyf] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}

.stat-count[b-lb8nsnztyf] {
    font-size: 0.7rem;
    font-weight: 900;
    color: #111827;
}

.custom-progress[b-lb8nsnztyf] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar[b-lb8nsnztyf] {
    height: 100%;
    background: #e61141;
    transition: width 0.4s ease;
}

    .progress-bar.full[b-lb8nsnztyf] {
        background: #94a3b8;
    }

/* Badges */
.plan-badge-status[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

    .plan-badge-status.active[b-lb8nsnztyf] {
        background: #dcfce7;
        color: #166534;
    }

    .plan-badge-status.pending[b-lb8nsnztyf] {
        background: #fff1f2;
        color: #e61141;
    }

.empty-membership-state[b-lb8nsnztyf] {
    padding: 4rem;
}

.icon-circle[b-lb8nsnztyf] {
    width: 80px;
    height: 80px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #cbd5e1;
}


.btn-action-elite[b-lb8nsnztyf] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-action-elite:hover:not(:disabled)[b-lb8nsnztyf] {
        background: #fff1f2;
        border-color: #e61141;
        color: #e61141;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(230, 17, 65, 0.1);
    }

.btn-action-freeze[b-lb8nsnztyf] {
    background: #1e293b;
    color: white;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
}

    .btn-action-freeze:hover:not(:disabled)[b-lb8nsnztyf] {
        background: #334155;
        color: white;
    }


.btn-brand-red[b-lb8nsnztyf] {
    background: #e61141;
    color: white;
    border: none;
    font-weight: 800;
    font-size: 0.75rem;
}

.dropdown-menu[b-lb8nsnztyf] {
    animation: fadeInScale-b-lb8nsnztyf 0.2s ease-out;
}

@keyframes fadeInScale-b-lb8nsnztyf {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}























.pt-grid[b-lb8nsnztyf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.pt-master-card[b-lb8nsnztyf] {
    background: white;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

    .pt-master-card:hover[b-lb8nsnztyf] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -15px rgba(230, 17, 65, 0.15);
        border-color: #e61141;
    }

/* Header Section */
.pt-header[b-lb8nsnztyf] {
    padding: 25px;
    background: #111827; /* Dark Dark Surface */
    color: white;
    display: flex;
    justify-content: space-between;
}

.pt-tag[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #e61141;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pt-package-name[b-lb8nsnztyf] {
    font-weight: 800;
    margin: 5px 0;
    font-size: 1.25rem;
}

.pt-desc[b-lb8nsnztyf] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.pt-price-badge[b-lb8nsnztyf] {
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 12px;
    height: fit-content;
    text-align: center;
    font-weight: 800;
}

    .pt-price-badge span[b-lb8nsnztyf] {
        font-size: 0.6rem;
        display: block;
        opacity: 0.6;
    }

/* Body Section */
.pt-body[b-lb8nsnztyf] {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trainer-info[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trainer-avatar[b-lb8nsnztyf] {
    width: 45px;
    height: 45px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #64748b;
}

.trainer-meta small[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
}

.trainer-meta p[b-lb8nsnztyf] {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
}

.session-counter[b-lb8nsnztyf] {
    text-align: right;
}

.session-count[b-lb8nsnztyf] {
    font-size: 1.8rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.session-counter small[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
}

/* Footer Section */
.pt-footer[b-lb8nsnztyf] {
    padding: 15px 25px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expiry-status[b-lb8nsnztyf] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .expiry-status.urgent[b-lb8nsnztyf] {
        color: #f59e0b;
    }
    /* Warning color */
    .expiry-status.expired[b-lb8nsnztyf] {
        color: #ef4444;
    }

.btn-pt-action[b-lb8nsnztyf] {
    background: white;
    border: 1px solid #e2e8f0;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #64748b;
    transition: all 0.2s;
}

    .btn-pt-action:hover[b-lb8nsnztyf] {
        background: #e61141;
        color: white;
        border-color: #e61141;
    }

/* Empty State */
.pt-empty-state[b-lb8nsnztyf] {
    text-align: center;
    padding: 60px;
}

.empty-icon[b-lb8nsnztyf] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 15px;
}












/* Container */
[b-lb8nsnztyf] .pt-hybrid-wrapper {
    padding: 15px;
    background: transparent;
}

/* Grid layout (Multiple items in one row) */
[b-lb8nsnztyf] .pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* The Card */
[b-lb8nsnztyf] .pt-hybrid-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

    [b-lb8nsnztyf] .pt-hybrid-card:hover {
        transform: translateY(-4px);
        border-color: #e61141; /* Your Primary Color */
    }

/* Dark Header Section */
[b-lb8nsnztyf] .card-dark-head {
    background: #1e293b; /* Dark Slate */
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-lb8nsnztyf] .badge-elite {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

[b-lb8nsnztyf] .price-pill {
    background: #e61141; /* Primary Red */
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
}

    [b-lb8nsnztyf] .price-pill small {
        font-size: 0.6rem;
        opacity: 0.8;
        margin-left: 2px;
    }

/* Light Body Section */
[b-lb8nsnztyf] .card-light-body {
    padding: 20px;
}

[b-lb8nsnztyf] .coach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

[b-lb8nsnztyf] .coach-avatar {
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-lb8nsnztyf] .coach-meta small {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
}

[b-lb8nsnztyf] .coach-meta p {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

/* Expiry Styling */
[b-lb8nsnztyf] .expiry-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981; /* Green for active */
}

    [b-lb8nsnztyf] .expiry-tag.is-expired {
        color: #ef4444;
    }

/* --- ANIMATED EMPTY STATE --- */
[b-lb8nsnztyf] .pt-empty-hybrid {
    text-align: center;
    padding: 60px 0;
}

[b-lb8nsnztyf] .empty-icon-box {
    position: relative;
    width: 60px;
    height: 60px;
    background: #1e293b; /* Dark Accent */
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
}

[b-lb8nsnztyf] .searching-bar {
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 3px;
    background: #e61141;
    border-radius: 10px;
    animation: search-slide-b-lb8nsnztyf 2s infinite ease-in-out;
}

@keyframes search-slide-b-lb8nsnztyf {
    0% {
        transform: scaleX(0.1);
        opacity: 0;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(0.1);
        opacity: 0;
    }
}

[b-lb8nsnztyf] .pt-empty-hybrid h5 {
    font-weight: 800;
    color: #1e293b;
}

[b-lb8nsnztyf] .pt-empty-hybrid p {
    font-size: 0.85rem;
    color: #64748b;
}


[b-lb8nsnztyf] .membership-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 15px;
}

[b-lb8nsnztyf] .card-dark-header {
    background: #1e293b;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-lb8nsnztyf] .plan-name {
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

[b-lb8nsnztyf] .status-badge {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
}

    [b-lb8nsnztyf] .status-badge.active {
        background: #10b981;
        color: #fff;
    }

    [b-lb8nsnztyf] .status-badge.inactive {
        background: #64748b;
        color: #fff;
    }

[b-lb8nsnztyf] .card-light-content {
    padding: 20px;
}

[b-lb8nsnztyf] .info-group small {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 700;
}

[b-lb8nsnztyf] .info-group p {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

[b-lb8nsnztyf] .btn-attend {
    width: 100%;
    background: #e61141; /* Your Primary Color */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
}

    [b-lb8nsnztyf] .btn-attend:hover:not(:disabled) {
        background: #1e293b;
        box-shadow: 0 4px 12px rgba(230, 17, 65, 0.3);
    }

    [b-lb8nsnztyf] .btn-attend:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }



/* Modal Styling */
[b-lb8nsnztyf] .dark-modal {
    background: #1e293b; /* Dark Slate to match headers */
    color: white;
    border-radius: 16px;
    border: 1px solid #334155;
    width: 750px
}

[b-lb8nsnztyf] .attendance-list {
    max-height: 400px;
    overflow-y: auto;
}

[b-lb8nsnztyf] .attendance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #2d3142; /* Slightly lighter than modal bg */
    border-radius: 10px;
    margin-bottom: 8px;
    border-left: 4px solid #e61141; /* Primary Accent */
}

[b-lb8nsnztyf] .item-left .date {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
}

[b-lb8nsnztyf] .item-left .time {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Status Badges */
[b-lb8nsnztyf] .status-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

    [b-lb8nsnztyf] .status-badge.attended {
        background: #10b981;
        color: white;
    }

    [b-lb8nsnztyf] .status-badge.absent {
        background: #ef4444;
        color: white;
    }

/* History Button Styling */
[b-lb8nsnztyf] .btn-history {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s;
}

    [b-lb8nsnztyf] .btn-history:hover {
        background: #f1f5f9;
        color: #1e293b;
        border-color: #cbd5e1;
    }


[b-lb8nsnztyf] .btn-empty-action {
    background: #1e293b; /* Dark Slate Accent */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 20px;
    margin-bottom: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.2);
    display: inline-flex;
    align-items: center;
}

    [b-lb8nsnztyf] .btn-empty-action:hover {
        background: #e61141; /* Your Primary Red */
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(230, 17, 65, 0.3);
    }

    [b-lb8nsnztyf] .btn-empty-action i {
        font-size: 1.1rem;
    }


/* Container Row */
[b-lb8nsnztyf] .freeze-timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    [b-lb8nsnztyf] .freeze-timeline-row:hover {
        border-color: #e61141; /* Primary Red */
        box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    }

/* Date Nodes */
[b-lb8nsnztyf] .date-node {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

[b-lb8nsnztyf] .node-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

[b-lb8nsnztyf] .node-date {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

[b-lb8nsnztyf] .date-node.end {
    text-align: right;
}

/* Timeline Bridge (The Line) */
[b-lb8nsnztyf] .timeline-bridge {
    flex-grow: 1;
    margin: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

[b-lb8nsnztyf] .bridge-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Dark Day Count Badge */
[b-lb8nsnztyf] .day-count-badge {
    background: #1e293b; /* Dark Accent */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 30px;
    letter-spacing: 0.5px;
}

/* Red Status Pill */
[b-lb8nsnztyf] .status-pill {
    font-size: 0.6rem;
    font-weight: 800;
    color: #e61141;
    background: rgba(230, 17, 65, 0.1);
    padding: 4px 12px;
    border-radius: 30px;
}

/* The Line System */
[b-lb8nsnztyf] .bridge-line-wrapper {
    width: 100%;
    height: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-lb8nsnztyf] .line-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    border-radius: 10px;
}

[b-lb8nsnztyf] .line-active-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e61141;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(230, 17, 65, 0.3);
}

[b-lb8nsnztyf] .icon-center {
    background: #fff;
    color: #e61141;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 2px solid #e61141;
    font-size: 0.9rem;
}

/* Animation for the Active Freeze */
@keyframes pulse-red-b-lb8nsnztyf {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

[b-lb8nsnztyf] .pulse-red {
    animation: pulse-red-b-lb8nsnztyf 2s infinite ease-in-out;
}


/* Container to align title and button */
[b-lb8nsnztyf] .portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9; /* Subtle divider */
}

/* Remove default margins from h5 to keep it aligned with button */
[b-lb8nsnztyf] .section-title {
    margin-bottom: 0 !important;
    font-weight: 800;
    color: #1e293b;
}

/* The Add Plan Button */
[b-lb8nsnztyf] .btn-add-plan {
    background: #1e293b; /* Dark Slate Accent */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    [b-lb8nsnztyf] .btn-add-plan:hover {
        background: #e61141; /* Primary Red on hover */
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(230, 17, 65, 0.2);
    }

    [b-lb8nsnztyf] .btn-add-plan i {
        font-size: 1rem;
    }

/* Responsive adjustment for mobile */
@media (max-width: 576px) {
    [b-lb8nsnztyf] .btn-add-plan span {
        display: none; /* Only show icon on very small screens */
    }

    [b-lb8nsnztyf] .btn-add-plan {
        padding: 8px;
    }
}


[b-lb8nsnztyf] .btn-group-hybrid {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

[b-lb8nsnztyf] .status-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s ease;
}







/* Dark Overlay with Blur */
[b-lb8nsnztyf] .elite-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* The Card */
[b-lb8nsnztyf] .elite-confirm-card {
    background: #ffffff;
    width: 440px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Red Top Accent Bar */
[b-lb8nsnztyf] .elite-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #e61141, #1e293b);
}

/* Header Section */
[b-lb8nsnztyf] .elite-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

[b-lb8nsnztyf] .icon-box {
    width: 54px;
    height: 54px;
    background: #f1f5f9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1e293b;
}

[b-lb8nsnztyf] .elite-header h3 {
    font-weight: 800;
    font-size: 1.25rem;
    margin: 0;
    color: #1e293b;
}

[b-lb8nsnztyf] .elite-header p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* Comparison View */
[b-lb8nsnztyf] .status-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}

[b-lb8nsnztyf] .node-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

[b-lb8nsnztyf] .status-pill {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    background: #e2e8f0;
    color: #475569;
}

    /* Active Glow for Proposed Status */
    [b-lb8nsnztyf] .status-pill.active-glow {
        background: #1e293b;
        color: white;
        box-shadow: 0 0 15px rgba(30, 41, 59, 0.2);
    }

[b-lb8nsnztyf] .status-arrow {
    color: #cbd5e1;
    font-size: 1.2rem;
}

/* Elite Buttons */
[b-lb8nsnztyf] .elite-footer {
    display: flex;
    gap: 15px;
}

[b-lb8nsnztyf] .btn-secondary-hybrid {
    flex: 1;
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #64748b;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.2s;
}

[b-lb8nsnztyf] .btn-primary-hybrid {
    flex: 1;
    background: #e61141;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    transition: all 0.2s;
}

    [b-lb8nsnztyf] .btn-primary-hybrid:hover {
        background: #1e293b;
        transform: translateY(-2px);
    }

/* Animation */
@keyframes slide-up-b-lb8nsnztyf {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

[b-lb8nsnztyf] .animate-slide-up {
    animation: slide-up-b-lb8nsnztyf 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}






/* 1. The Outer Container */
[b-lb8nsnztyf] .status-control-container {
    margin-top: 20px;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* 2. The Label at the Top */
[b-lb8nsnztyf] .control-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* 3. The Bar Track */
[b-lb8nsnztyf] .status-segmented-bar {
    display: flex;
    gap: 4px;
    background: #f1f5f9; /* Soft grey track */
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* 4. Base Button Style */
[b-lb8nsnztyf] .segment-btn {
    flex: 1;
    border: none;
    padding: 10px 4px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    background: transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    /* 5. Hover Effect (Only for inactive) */
    [b-lb8nsnztyf] .segment-btn:hover:not(.active):not(:disabled) {
        background: #ffffff;
        color: #1e293b;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 6. Active States (The "Elite" Pop) */
    [b-lb8nsnztyf] .segment-btn.active {
        cursor: default;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: scale(1.02);
    }

        /* Color logic based on status string */
        [b-lb8nsnztyf] .segment-btn.active.active {
            background: #10b981; /* Emerald Green */
        }

        [b-lb8nsnztyf] .segment-btn.active.pending {
            background: #f59e0b; /* Amber/Orange */
        }

        [b-lb8nsnztyf] .segment-btn.active.expired {
            background: #e61141; /* Your Primary Red */
        }

        [b-lb8nsnztyf] .segment-btn.active.freeze {
            background: #1e293b; /* Your Dark Accent */
        }

    /* Disabled/Current state adjustment */
    [b-lb8nsnztyf] .segment-btn:disabled {
        cursor: default;
    }

    /* 7. Icon Styling */
    [b-lb8nsnztyf] .segment-btn i {
        font-size: 0.85rem;
    }

/* Responsive adjustment */
@media (max-width: 992px) {
    [b-lb8nsnztyf] .status-segmented-bar {
        flex-wrap: wrap;
    }

    [b-lb8nsnztyf] .segment-btn {
        flex: 1 1 calc(50% - 4px); /* 2 per row on smaller tablets */
    }
}

.plan-header-simple[b-lb8nsnztyf] {
    background: #ffffff;
    /* Soft border for the whole box */
    border: 1px solid #eee;
    padding: 14px 20px;
    border-radius: 12px;
    cursor: pointer;
    /* Bold Primary Red Accent on the left */
    border-left: 5px solid #e61141;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .plan-header-simple:hover[b-lb8nsnztyf] {
        background: #fffcfc;
        transform: translateX(4px);
    }

    .plan-header-simple .primary-text[b-lb8nsnztyf] {
        color: #e61141;
        font-size: 1.2rem;
        line-height: 1;
    }

/* Labels inside the header */
.plan-label[b-lb8nsnztyf] {
    font-weight: 800;
    font-size: 0.85rem;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-total[b-lb8nsnztyf] {
    font-weight: 900;
    color: #1a1a1a;
    font-size: 1.05rem;
    background: #fdf2f4; /* Very light primary tint for the price background */
    padding: 4px 12px;
    border-radius: 8px;
}

/* Chevron/Arrow opacity */
.bi-chevron-down[b-lb8nsnztyf], .bi-chevron-up[b-lb8nsnztyf] {
    color: #e61141;
    font-size: 0.9rem;
}




























/* 1. Main Card Container */
.gym-payment-card[b-lb8nsnztyf] {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    position: relative;
    transition: all 0.2s ease-in-out;
    height: 100%; /* Ensures cards in the same row have equal height */
}

    /* Hover effect using your Primary Color */
    .gym-payment-card:hover[b-lb8nsnztyf] {
        border-color: #e61141;
        box-shadow: 0 6px 15px rgba(230, 17, 65, 0.08);
        transform: translateY(-2px);
    }

/* 2. Date Box (The White Square) */
.date-box-simple[b-lb8nsnztyf] {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 10px;
    min-width: 70px;
    padding: 8px 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .date-box-simple .day[b-lb8nsnztyf] {
        display: block;
        font-size: 1.3rem;
        font-weight: 900;
        color: #1a1a1a;
        line-height: 1;
    }

    .date-box-simple .month[b-lb8nsnztyf] {
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        color: #e61141; /* Primary Red */
        text-transform: uppercase;
        margin: 2px 0;
    }

    .date-box-simple .year[b-lb8nsnztyf] {
        display: block;
        font-size: 0.65rem;
        color: #94a3b8;
        font-weight: 600;
    }

/* 3. Info Section */
.payment-title[b-lb8nsnztyf] {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
}

.amount-wrap .amount[b-lb8nsnztyf] {
    font-weight: 900;
    color: #1a1a1a;
    font-size: 1.15rem;
}

.amount-wrap .curr[b-lb8nsnztyf] {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
    margin-left: 2px;
}

/* 4. Bottom Section (Status & Action) */
.border-top-dashed[b-lb8nsnztyf] {
    border-top: 1px dashed #e2e8f0;
}

.status-msg[b-lb8nsnztyf] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* Paid vs Pending distinction using Opacity/Icons only */
    .status-msg.primary-text[b-lb8nsnztyf] {
        color: #e61141 !important;
    }

.opacity-75[b-lb8nsnztyf] {
    opacity: 0.75;
}

/* 5. Primary Action Button */
.btn-primary-gym[b-lb8nsnztyf] {
    background-color: #e61141;
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.2s;
}

    .btn-primary-gym:hover[b-lb8nsnztyf] {
        background-color: #c40e36;
        box-shadow: 0 4px 10px rgba(230, 17, 65, 0.25);
    }

    .btn-primary-gym:disabled[b-lb8nsnztyf] {
        background-color: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }






.gym-modal-backdrop[b-lb8nsnztyf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gym-modal-content[b-lb8nsnztyf] {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    border-top: 6px solid #e61141; /* Primary Red Accent */
}

.confirm-icon-circle[b-lb8nsnztyf] {
    width: 60px;
    height: 60px;
    background: #fdf2f4;
    color: #e61141;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
}

.confirm-amount-display[b-lb8nsnztyf] {
    font-size: 2rem;
    font-weight: 900;
    color: #1a1a1a;
    margin-top: 10px;
}

    .confirm-amount-display small[b-lb8nsnztyf] {
        font-size: 0.9rem;
        color: #718096;
    }

.animate-fade-in[b-lb8nsnztyf] {
    animation: fadeIn-b-lb8nsnztyf 0.2s ease-out;
}

@keyframes fadeIn-b-lb8nsnztyf {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}















.unfreeze-mini-btn[b-lb8nsnztyf] {
    background: white;
    border: 1px solid #e61141;
    color: #e61141;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.2s;
}

    .unfreeze-mini-btn:hover[b-lb8nsnztyf] {
        background: #e61141;
        color: white;
    }

/* Unfreeze Popup Specifics */
.unfreeze-calc[b-lb8nsnztyf] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background: #fdf2f4;
    border-radius: 12px;
}

.calc-box[b-lb8nsnztyf] {
    display: flex;
    flex-direction: column;
}

.calc-label[b-lb8nsnztyf] {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

.calc-val[b-lb8nsnztyf] {
    font-size: 1.1rem;
    color: #e61141;
    font-weight: 800;
}

.calc-arrow[b-lb8nsnztyf] {
    font-size: 1.2rem;
    color: #ccc;
}

.confirm-unfreeze-btn[b-lb8nsnztyf] {
    width: 40%;
    background: #e61141;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.confirmation-text[b-lb8nsnztyf] {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
}



.modal-foot[b-lb8nsnztyf] {
    padding: 15px 20px;
    background: #fcfcfc;
    border-top: 1px solid #f0f0f0;
}

.button-group[b-lb8nsnztyf] {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Primary Action Button (Unfreeze) */
.btn-confirm-primary[b-lb8nsnztyf] {
    flex: 2; /* Makes confirm wider than cancel */
    background: #e61141;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(230, 17, 65, 0.2);
}

    .btn-confirm-primary:hover[b-lb8nsnztyf] {
        background: #c40e36;
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(230, 17, 65, 0.3);
    }

/* Secondary Action Button (Cancel) */
.btn-cancel[b-lb8nsnztyf] {
    flex: 1;
    background: #f0f0f0;
    color: #666;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-cancel:hover[b-lb8nsnztyf] {
        background: #e4e4e4;
        color: #333;
    }

    .btn-confirm-primary:active[b-lb8nsnztyf], .btn-cancel:active[b-lb8nsnztyf] {
        transform: scale(0.96);
    }









/* --- Entrance Animation --- */


.animate-fade-in[b-lb8nsnztyf] {
    animation: fadeInUp-b-lb8nsnztyf 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Main Card --- */
.search-card-elite[b-lb8nsnztyf] {
    background: #ffffff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
}

.brand-strip[b-lb8nsnztyf] {
    height: 4px;
    background: #e61141; /* Primary Red */
    width: 100%;
}

.card-content[b-lb8nsnztyf] {
    padding: 2rem;
}

.title-text[b-lb8nsnztyf] {
    font-weight: 800;
    color: #1e293b;
    font-size: 1.4rem;
    margin: 0;
}

.subtitle-text[b-lb8nsnztyf] {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* --- Search Field Logic --- */
.input-wrapper[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 6px;
    transition: all 0.3s ease;
}

    .input-wrapper:focus-within[b-lb8nsnztyf] {
        background: #fff;
        box-shadow: 0 0 0 4px rgba(230, 17, 65, 0.1);
        transform: scale(1.01);
    }

.icon-portal[b-lb8nsnztyf] {
    padding: 0 15px;
    font-size: 1.2rem;
    color: #cbd5e1;
    transition: color 0.3s;
}

.input-wrapper:focus-within .icon-portal[b-lb8nsnztyf] {
    color: #e61141;
}

/* --- Action Button --- */
.btn-primary-action[b-lb8nsnztyf] {
    background: #e61141;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .btn-primary-action:hover[b-lb8nsnztyf] {
        background: #c50e38;
        transform: translateX(3px);
    }

/* --- Helper Text --- */
.keyboard-badge[b-lb8nsnztyf] {
    font-size: 0.65rem;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    border-bottom: 2px solid #cbd5e1;
    color: #64748b;
    font-weight: 800;
}

.helper-text[b-lb8nsnztyf] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 5px;
}

@keyframes fadeInUp-b-lb8nsnztyf {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.elite-search-container[b-lb8nsnztyf] {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
}

.search-icon[b-lb8nsnztyf] {
    color: #94a3b8;
    margin-right: 12px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.searchinput[b-lb8nsnztyf] {
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600;
    color: #1e293b;
    padding: 10px 2PX;
    width: 82%;
    border: none;
    outline: none; /* Removes the default browser ring */
}

    .searchinput[b-lb8nsnztyf]::placeholder {
        color: #cbd5e1;
        font-weight: 400;
    }

/* The Creative Part: Animated Underline */
.search-underline[b-lb8nsnztyf] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #e2e8f0; /* Default gray line */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



[b-lb8nsnztyf] .elite-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    [b-lb8nsnztyf] .elite-input:focus {
        border-color: #1e293b; /* Dark Slate */
        box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
    }

    [b-lb8nsnztyf] .elite-input:disabled {
        background-color: #f8fafc;
        border-color: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }




/* Animation */
@keyframes fadeInUp-b-lb8nsnztyf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up[b-lb8nsnztyf] {
    animation: fadeInUp-b-lb8nsnztyf 0.5s ease-out forwards;
}

.profile-card-elite[b-lb8nsnztyf] {
    border: none;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
    border-left: 5px solid #e61141; /* Your Primary Red */
}

.profile-layout[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Image Styling */
.image-container[b-lb8nsnztyf] {
    width: 140px;
    height: 140px;
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid #f8fafc;
    background: #f1f5f9;
}

    .image-container img[b-lb8nsnztyf] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.photo-placeholder[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 3rem;
    color: #cbd5e1;
}

/* Data Slot Styling */
.info-section[b-lb8nsnztyf] {
    flex-grow: 1;
}

.data-slot[b-lb8nsnztyf] {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

    .data-slot:hover[b-lb8nsnztyf] {
        border-bottom-color: #e61141;
    }

    .data-slot label[b-lb8nsnztyf] {
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #94a3b8;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .data-slot .value[b-lb8nsnztyf] {
        font-size: 1.1rem;
        font-weight: 800;
        color: #1e293b;
    }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .profile-layout[b-lb8nsnztyf] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .image-container[b-lb8nsnztyf] {
        margin: 0 auto;
    }
}






:root[b-lb8nsnztyf] {
    --primary: #e61141;
    --text-main: #1a1c23;
    --text-sub: #707589;
    --border-color: #f0f2f5;
    --bg-light: #ffffff;
}

.avatar-init[b-lb8nsnztyf] {
    width: 60px;
    height: 60px
}

.ledger-list-header[b-lb8nsnztyf], .ledger-row-simple[b-lb8nsnztyf] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 1fr;
    /*grid-template-columns: 100px 100px 100px 250px 100px 200px 150px 1fr;*/
    align-items: center;
    padding: 14px 24px;
    border-radius: 10px;
}

.model-round[b-lb8nsnztyf] {
    border-radius: 10px
}

.ledger-list-header[b-lb8nsnztyf] {
    background: #f8f9fa;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-sub);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ledger-row-simple[b-lb8nsnztyf] {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

    .ledger-row-simple:hover[b-lb8nsnztyf] {
        background: #fffafa; /* Very subtle primary tint */
        border-left: 4px solid var(--primary);
        padding-left: 20px;
    }

.col-time[b-lb8nsnztyf] {
    font-family: 'Monaco', 'Consolas', monospace; /* Technical look */
}

.time-block[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sub);
}

    .time-block i[b-lb8nsnztyf] {
        color: var(--primary);
        font-size: 0.85rem;
        opacity: 0.7;
    }

.time-text[b-lb8nsnztyf] {
    font-size: 0.85rem;
    font-weight: 600;
}

.member-avatar-wrapper[b-lb8nsnztyf] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f2f6;
    border: 1px solid var(--border-color);
}

.code-badge[b-lb8nsnztyf] {
    font-weight: 800;
    color: var(--primary);
    font-size: 0.85rem;
}

.main-name[b-lb8nsnztyf] {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}

.plan-badge[b-lb8nsnztyf] {
    background: #f8f9fa;
    color: var(--text-sub);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.status-pill[b-lb8nsnztyf] {
    padding: 6px 0;
    width: 100px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
    display: block;
}

    .status-pill.allowed[b-lb8nsnztyf] {
        background: #e6fffa;
        color: #00b894;
        border: 1px solid #c6f6d5;
    }

    .status-pill.blocked[b-lb8nsnztyf] {
        background: #fff5f5;
        color: var(--primary);
        border: 1px solid #fed7d7;
    }

.search-icon-animate[b-lb8nsnztyf] {
    animation: pulse-primary-b-lb8nsnztyf 2s infinite;
}

@keyframes pulse-primary-b-lb8nsnztyf {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
        color: var(--primary);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.filter-wrapper[b-lb8nsnztyf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 200px;
}

.filter-label[b-lb8nsnztyf] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 1px;
}

.custom-select-container[b-lb8nsnztyf] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-select-elite[b-lb8nsnztyf] {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background-color: white;
    font-weight: 600;
    color: #1e293b;
    appearance: none; /* Removes default arrow */
    cursor: pointer;
    transition: all 0.2s ease;
}

    .form-select-elite:focus[b-lb8nsnztyf] {
        outline: none;
        border-color: #e61141; /* Your Gym Red */
        box-shadow: 0 0 0 4px rgba(230, 17, 65, 0.1);
    }

.select-icon[b-lb8nsnztyf] {
    position: absolute;
    left: 14px;
    color: #e61141;
    pointer-events: none;
    font-size: 0.9rem;
}


/* Container Design */
.empty-payment-state[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: #fcfcfc; /* Very light subtle grey */
    border: 2px dashed #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    text-align: center;
}

.state-content[b-lb8nsnztyf] {
    max-width: 300px;
}

/* Icon Styling */
.icon-circle[b-lb8nsnztyf] {
    width: 80px;
    height: 80px;
    background: #fff1f2; /* Light red tint */
    color: #e61141; /* Gym Red */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(230, 17, 65, 0.1);
}

/* Typography */
.empty-payment-state h4[b-lb8nsnztyf] {
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
}

.empty-payment-state p[b-lb8nsnztyf] {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Minimal Dot Loader */
.minimal-loader[b-lb8nsnztyf] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 30px;
}

    .minimal-loader .dot[b-lb8nsnztyf] {
        width: 6px;
        height: 6px;
        background: #cbd5e1;
        border-radius: 50%;
        animation: dotPulse-b-lb8nsnztyf 1.5s infinite ease-in-out;
    }

        .minimal-loader .dot:nth-child(2)[b-lb8nsnztyf] {
            animation-delay: 0.2s;
        }

        .minimal-loader .dot:nth-child(3)[b-lb8nsnztyf] {
            animation-delay: 0.4s;
        }

@keyframes dotPulse-b-lb8nsnztyf {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

/* Elite Dismiss Button */
.btn-close-state[b-lb8nsnztyf] {
    background: #1e293b;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
}

    .btn-close-state:hover[b-lb8nsnztyf] {
        background: #e61141; /* Switch to red on hover */
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(230, 17, 65, 0.2);
    }

















.empty-view-container[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    background: #ffffff;
    border-radius: 30px;
    padding: 2rem;
}

.empty-view-content[b-lb8nsnztyf] {
    text-align: center;
    max-width: 350px;
}

/* Icon & Animation */
.empty-icon-wrapper[b-lb8nsnztyf] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.empty-icon-circle[b-lb8nsnztyf] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #1e293b; /* Dark Slate */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 15px 35px rgba(30, 41, 59, 0.2);
}

.pulse-ring[b-lb8nsnztyf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #e61141; /* Gym Red */
    border-radius: 50%;
    animation: ringExtend-b-lb8nsnztyf 2s infinite;
    z-index: 1;
}

@keyframes ringExtend-b-lb8nsnztyf {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Typography */
.empty-view-content h3[b-lb8nsnztyf] {
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.empty-view-content p[b-lb8nsnztyf] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Button */
.btn-primary-gym[b-lb8nsnztyf] {
    background: #e61141;
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

    .btn-primary-gym:hover[b-lb8nsnztyf] {
        background: #1e293b;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }



































.modal-glass-overlay[b-lb8nsnztyf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px); /* Intense blur */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.elite-slide-panel[b-lb8nsnztyf] {
    position: fixed;
    top: 0;
    right: -500px;
    width: 480px;
    height: 100vh;
    background: #f4f7fa;
    z-index: 2000;
    transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

    .elite-slide-panel.active[b-lb8nsnztyf] {
        right: 0;
    }

/* Bento Cards Base */
.bento-card[b-lb8nsnztyf] {
    background: white;
    border-radius: 24px;
    padding: 20px;
    margin: 0 25px 15px;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

/* Hero Section Styling */
.hero-gradient[b-lb8nsnztyf] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    margin-top: 20px;
    padding: 30px;
}

.avatar-wrapper[b-lb8nsnztyf] {
    position: relative;
    width: 80px;
    height: 80px;
}

.avatar-circle[b-lb8nsnztyf] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.2);
}

.hero-info h2[b-lb8nsnztyf] {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.plan-tag[b-lb8nsnztyf] {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: 500;
}

/* Bento Grid System */
.bento-grid-2[b-lb8nsnztyf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 25px;
    margin-bottom: 15px;
}

    .bento-grid-2 .bento-card[b-lb8nsnztyf] {
        margin: 0;
    }

/* Stat Cards Emphasis */
.stat-card .value[b-lb8nsnztyf] {
    font-size: 1.6rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.stat-card label[b-lb8nsnztyf] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.stat-card .value small[b-lb8nsnztyf] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.value.debt[b-lb8nsnztyf] {
    color: #e61141;
}

/* Time Roadmap Item */
.time-item[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

.time-icon[b-lb8nsnztyf] {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

    .time-icon.expired[b-lb8nsnztyf] {
        color: #e61141;
        background: #fef2f2;
    }

.time-divider[b-lb8nsnztyf] {
    height: 1px;
    background: #f1f5f9;
    margin: 5px 0;
}

/* Table Data Rows */
.data-row[b-lb8nsnztyf] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.9rem;
}

    .data-row span[b-lb8nsnztyf] {
        color: #94a3b8;
    }

    .data-row strong[b-lb8nsnztyf] {
        color: #1e293b;
    }

/* Animations */
.animate-up[b-lb8nsnztyf] {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp-b-lb8nsnztyf 0.6s forwards cubic-bezier(0.23, 1, 0.32, 1);
}

.delay-1[b-lb8nsnztyf] {
    animation-delay: 0.1s;
}

.delay-2[b-lb8nsnztyf] {
    animation-delay: 0.2s;
}

.delay-3[b-lb8nsnztyf] {
    animation-delay: 0.3s;
}

@keyframes slideUp-b-lb8nsnztyf {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




:root[b-lb8nsnztyf] {
    --gym-primary: #1e293b; /* Replace with your primary brand color */
    --gym-accent: #e61141;
}

/* Modal Overlay Enhancements */
.modal-glass-overlay[b-lb8nsnztyf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(16px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Centered Popup Dimensions */
.elite-slide-panel.powerful-layout[b-lb8nsnztyf] {
    width: 100%;
    max-width: 680px; /* Increased Width */
    height: 92vh; /* Increased Height */
    background: #fdfdfe;
    border-radius: 32px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Enhanced Hero Section (Not Dark Anymore) */
.enhanced-hero[b-lb8nsnztyf] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    margin-top: 20px !important;
    padding: 25px !important;
}

.hero-flex-horizontal[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 30px;
}

.avatar-frame[b-lb8nsnztyf] {
    position: relative;
    width: 120px;
    height: 120px;
}

.avatar-main[b-lb8nsnztyf] {
    width: 100%;
    height: 100%;
    border-radius: 28px; /* Modern Square-Round */
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 4px solid white;
}

.initials-bg[b-lb8nsnztyf] {
    background: var(--gym-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
}

/* Primary Text Styling */
.primary-name[b-lb8nsnztyf] {
    color: var(--gym-primary);
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

.primary-plan[b-lb8nsnztyf] {
    color: var(--gym-primary);
    font-weight: 600;
    font-size: 1rem;
    opacity: 0.8;
}

.plan-indicator[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

    .plan-indicator i[b-lb8nsnztyf] {
        color: var(--gym-accent);
    }

/* Status Badge Over Image */
.status-pill-badge[b-lb8nsnztyf] {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

    .status-pill-badge.active[b-lb8nsnztyf] {
        background: #10b981;
    }

    .status-pill-badge.notactive[b-lb8nsnztyf] {
        background: #ef4444;
    }

/* Grid & Section Titles */
.section-title-primary[b-lb8nsnztyf] {
    color: var(--gym-primary);
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

.dark-text[b-lb8nsnztyf] {
    color: #1e293b;
}

/* Scroll Body Tweaks */
.panel-scroll-content[b-lb8nsnztyf] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 40px;
}




.panel-nav[b-lb8nsnztyf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* The Live Pulse Animation */
.live-indicator[b-lb8nsnztyf] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-right: 12px;
}

.pulse-dot[b-lb8nsnztyf] {
    width: 8px;
    height: 8px;
    background: #10b981; /* Success Green */
    border-radius: 50%;
}

.pulse-ring[b-lb8nsnztyf] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #10b981;
    border-radius: 50%;
    animation: ripple-b-lb8nsnztyf 2s infinite;
    opacity: 0.4;
}

@keyframes ripple-b-lb8nsnztyf {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Badge & Label Styling */
.member-badge-elite[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    padding: 6px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.03);
}

.id-label[b-lb8nsnztyf] {
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 1px;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
}

.id-number[b-lb8nsnztyf] {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--gym-primary); /* Uses your primary color */
    display: block;
    line-height: 1;
}

/* Header Actions */
.header-actions[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-divider[b-lb8nsnztyf] {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
}

.action-icon-btn[b-lb8nsnztyf] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    transition: all 0.2s;
    cursor: pointer;
}

    .action-icon-btn:hover[b-lb8nsnztyf] {
        color: var(--gym-primary);
        transform: translateY(-1px);
    }

.close-panel-btn-elite[b-lb8nsnztyf] {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .close-panel-btn-elite:hover[b-lb8nsnztyf] {
        background: #fee2e2; /* Light red */
        color: #ef4444; /* Bright red */
        transform: rotate(90deg);
    }







.roadmap-horizontal-card[b-lb8nsnztyf] {
    padding: 20px !important;
    background: #ffffff;
    border: 1px solid #f1f5f9;
}

.roadmap-flex-row[b-lb8nsnztyf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.time-item-pill[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* Ensures all three items take equal width */
}

/* Icon Resizing for Horizontal Layout */
.time-icon-wrapper[b-lb8nsnztyf] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

    .time-icon-wrapper.checkin[b-lb8nsnztyf] {
        background: #e0f2fe;
        color: #0369a1;
    }

    .time-icon-wrapper.valid[b-lb8nsnztyf] {
        background: #dcfce7;
        color: #15803d;
    }

    .time-icon-wrapper.expired[b-lb8nsnztyf] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .time-icon-wrapper.last-seen[b-lb8nsnztyf] {
        background: #f8fafc;
        color: #64748b;
    }

/* Value Stacking */
.time-value-stack[b-lb8nsnztyf] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.time-label[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.dark-text[b-lb8nsnztyf] {
    font-size: 0.95rem;
    color: var(--gym-primary);
    font-weight: 700;
}

.time-sub[b-lb8nsnztyf] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Micro Status Badges */
.micro-status[b-lb8nsnztyf] {
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    width: fit-content;
    margin-top: 2px;
}

    .micro-status.expired[b-lb8nsnztyf] {
        background: #ef4444;
        color: white;
    }

    .micro-status.valid[b-lb8nsnztyf] {
        background: #10b981;
        color: white;
    }

/* Vertical Divider Styling */
.vertical-divider[b-lb8nsnztyf] {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
    flex-shrink: 0;
}








/* Change grid to 3 columns */
.bento-grid-3[b-lb8nsnztyf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Exactly 3 equal columns */
    gap: 12px;
    padding: 0 30px;
    margin-bottom: 20px;
}

.stat-card-mini[b-lb8nsnztyf] {
    margin: 0 !important; /* Reset bento margins for grid use */
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
}

.stat-header[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .stat-header label[b-lb8nsnztyf] {
        font-size: 0.65rem;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
    }

/* Icon Styles */
.stat-icon[b-lb8nsnztyf] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

    .stat-icon.sessions[b-lb8nsnztyf] {
        background: #eff6ff;
        color: #3b82f6;
    }

    .stat-icon.balance[b-lb8nsnztyf] {
        background: #fff7ed;
        color: #f59e0b;
    }

    .stat-icon.status-icon.active[b-lb8nsnztyf] {
        background: #ecfdf5;
        color: #10b981;
    }

    .stat-icon.status-icon.notactive[b-lb8nsnztyf] {
        background: #fef2f2;
        color: #ef4444;
    }

/* Value Text Styling */
.stat-card-mini .value[b-lb8nsnztyf] {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--gym-primary);
    line-height: 1;
}

    .stat-card-mini .value small[b-lb8nsnztyf] {
        font-size: 0.7rem;
        font-weight: 600;
        color: #94a3b8;
    }

/* Logic Colors */
.value.debt[b-lb8nsnztyf] {
    color: #ef4444 !important;
}

.value.cleared[b-lb8nsnztyf] {
    color: #10b981 !important;
}


/* Progress Bar Tweaks */
.progress-mini-wide[b-lb8nsnztyf] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-fill[b-lb8nsnztyf] {
    height: 100%;
    background: #3b82f6;
    border-radius: 10px;
}

.status-badge-pill[b-lb8nsnztyf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 8px; /* Refined rounded corners */
    width: fit-content;
    margin-top: 5px;
}

    /* Dynamic Backgrounds */
    .status-badge-pill.active[b-lb8nsnztyf] {
        background: #ecfdf5; /* Ultra-light green */
        border: 1px solid rgba(16, 185, 129, 0.1);
    }

    .status-badge-pill.notactive[b-lb8nsnztyf] {
        background: #fef2f2; /* Ultra-light red */
        border: 1px solid rgba(239, 68, 68, 0.1);
    }

/* Reduced Font Styling */
.status-text[b-lb8nsnztyf] {
    font-size: 0.85rem !important; /* Reduced from 1.4rem */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Text Colors */
.status-badge-pill.active .status-text[b-lb8nsnztyf] {
    color: #059669;
}

.status-badge-pill.notactive .status-text[b-lb8nsnztyf] {
    color: #dc2626;
}

/* Small Status Indicator Dot */
.status-dot[b-lb8nsnztyf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.active .status-dot[b-lb8nsnztyf] {
    background: #10b981;
}

.notactive .status-dot[b-lb8nsnztyf] {
    background: #ef4444;
}



.info-bento-grid[b-lb8nsnztyf] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px 40px; /* Vertical gap 20px, Horizontal gap 40px */
    padding-top: 10px;
}

.data-cell[b-lb8nsnztyf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

/* Optional: Add a subtle vertical line between columns */
.info-bento-grid .data-cell:nth-child(even)[b-lb8nsnztyf]::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: #f1f5f9;
}

.data-cell label[b-lb8nsnztyf] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .data-cell label i[b-lb8nsnztyf] {
        font-size: 0.8rem;
        color: var(--gym-primary);
        opacity: 0.6;
    }

.data-cell strong[b-lb8nsnztyf] {
    font-size: 0.95rem;
    color: var(--gym-primary);
    font-weight: 700;
    word-break: break-all; /* Prevents long emails from breaking the layout */
}

.section-title-primary[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--gym-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}





/* Card Container */
.notes-card-enhanced[b-lb8nsnztyf] {
    background: white;
    padding: 20px !important;
    border: 1px solid #f1f5f9;
}

/* Smaller, Primary Label */
.primary-label-mini[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem; /* Reduced size */
    font-weight: 800;
    color: var(--gym-primary); /* Uses your Primary Color */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

/* The Background for the Comment */
.comment-bubble-bg[b-lb8nsnztyf] {
    background: rgba(30, 41, 59, 0.05); /* Very light Primary Color background */
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 3px solid var(--gym-primary); /* Primary color accent line */
}

/* The Text itself */
.comment-text-small[b-lb8nsnztyf] {
    font-size: 0.85rem; /* Reduced font size */
    line-height: 1.5;
    color: #475569; /* Slate grey for better readability */
    margin: 0;
    font-weight: 500;
}

/* Animation Delay to match the rest of the cards */
.delay-4[b-lb8nsnztyf] {
    animation-delay: 0.4s;
}



/* Card Specific Enhancement */
.access-type-card[b-lb8nsnztyf] {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: linear-gradient(to bottom, #ffffff, #fcfcfd);
}

.primary-label-nano[b-lb8nsnztyf] {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--gym-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.8;
}

/* The Access Pill Styling */
.access-pill[b-lb8nsnztyf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pill-text[b-lb8nsnztyf] {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* State: Invitation (Vibrant/Special) */
.type-invitation[b-lb8nsnztyf] {
    background: #fff7ed; /* Soft Orange/Gold tint */
    border: 1px solid #fed7aa;
    color: #c2410c;
}

/* State: Membership (Primary/Elite) */
.type-membership[b-lb8nsnztyf] {
    background: rgba(30, 41, 59, 0.08); /* Light version of Primary */
    border: 1px solid rgba(30, 41, 59, 0.1);
    color: var(--gym-primary); /* Uses your Primary Color */
}

/* Small Animation for the Icons */
.access-pill i[b-lb8nsnztyf] {
    font-size: 0.9rem;
}

/* Aligning the Stat Body for better centering */
.access-type-card .stat-body[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    height: 100%;
}



.avatar-frame-elite[b-lb8nsnztyf] {
    position: relative;
    width: 200px; /* Slightly larger for better impact */
    height: 130px;
    z-index: 5;
}

.avatar-ring[b-lb8nsnztyf] {
    width: 100%;
    height: 100%;
    padding: 6px; /* Space for the ring effect */
    background: #ffffff;
    border-radius: 38px; /* High-end squircle shape */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-main[b-lb8nsnztyf] {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    object-fit: cover;
    display: block;
}

/* Initials Style */
.initials-container[b-lb8nsnztyf] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gym-primary);
    color: white;
    font-size: 3rem;
    font-weight: 800;
}

/* Inner Shadow Effect for Images */
.image-inner-shadow[b-lb8nsnztyf] {
    position: absolute;
    inset: 6px; /* Match the padding of the ring */
    border-radius: 32px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
    z-index: 2;
    pointer-events: none;
}

/* Floating Glass Status Badge */
.status-glass-badge[b-lb8nsnztyf] {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

    .status-glass-badge.active[b-lb8nsnztyf] {
        background: rgba(16, 185, 129, 0.9); /* Success Green */
        color: white;
    }

    .status-glass-badge.notactive[b-lb8nsnztyf] {
        background: rgba(239, 68, 68, 0.9); /* Danger Red */
        color: white;
    }

.badge-dot[b-lb8nsnztyf] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px white;
}

.badge-text[b-lb8nsnztyf] {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.8px;
}


.tabs-command-bar[b-lb8nsnztyf] {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontally centers the tab bar */
    padding: 5px 0; /* Vertical breathing room */
    background: transparent;
}

.segmented-control-primary.wide-mode[b-lb8nsnztyf] {
    position: relative;
    display: flex;
    background-color: var(--gym-primary) !important;
    padding: 6px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.elite-slider[b-lb8nsnztyf] {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc(25% - 6px); /* Each tab is 1/4 of the total width */
    background: #ffffff !important;
    border-radius: 12px;
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.position-signin[b-lb8nsnztyf] {
    transform: translateX(0%);
}

.position-invitations[b-lb8nsnztyf] {
    transform: translateX(100%);
}

.position-services[b-lb8nsnztyf] {
    transform: translateX(200%);
}

.position-classes[b-lb8nsnztyf] {
    transform: translateX(300%);
}

/* 4. Tab Triggers */
.tab-trigger[b-lb8nsnztyf] {
    position: relative;
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 0;
    cursor: pointer;
    z-index: 10; /* Keeps text above slider */
}

/* 5. Inactive Text Styling (Small & Gray) */
.tab-inner i[b-lb8nsnztyf] {
    font-size: 0.95rem;
    color: #94a3b8; /* Slate Gray */
    margin-right: 8px;
}

.tab-text[b-lb8nsnztyf] {
    font-size: 0.72rem; /* Small & Professional */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8; /* Slate Gray */
}

/* 6. Active State (Primary Color on White) */
.tab-trigger.active .tab-inner i[b-lb8nsnztyf],
.tab-trigger.active .tab-inner .tab-text[b-lb8nsnztyf] {
    color: var(--gym-primary) !important;
}
/* /Components/Pages/MemberShips/Coupons/CouponRoot.razor.rz.scp.css */
.loader[b-jg3rgbnj00] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-jg3rgbnj00 1s infinite linear;
}

@keyframes l7-b-jg3rgbnj00 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-jg3rgbnj00] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-jg3rgbnj00] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-jg3rgbnj00],
    .btn-orange:focus[b-jg3rgbnj00],
    .btn-orange:active[b-jg3rgbnj00] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-jg3rgbnj00] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-jg3rgbnj00] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-jg3rgbnj00] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-jg3rgbnj00] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-jg3rgbnj00] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-jg3rgbnj00] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-jg3rgbnj00] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-jg3rgbnj00] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-jg3rgbnj00] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-jg3rgbnj00] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-jg3rgbnj00],
.focus-ring-orange:focus[b-jg3rgbnj00] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-jg3rgbnj00] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-jg3rgbnj00] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-jg3rgbnj00]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-jg3rgbnj00]::after {
    animation: ripple-b-jg3rgbnj00 1s ease-out;
}

@keyframes ripple-b-jg3rgbnj00 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-jg3rgbnj00] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-jg3rgbnj00] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-jg3rgbnj00] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-jg3rgbnj00] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-jg3rgbnj00] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-jg3rgbnj00] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-jg3rgbnj00] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-jg3rgbnj00],
.btn-custom-secondary[b-jg3rgbnj00],
.btn-custom-danger[b-jg3rgbnj00] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/MemberShipPeriods/MemberShipPeriodRoot.razor.rz.scp.css */
.loader[b-fkmnoafzno] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-fkmnoafzno 1s infinite linear;
}

@keyframes l7-b-fkmnoafzno {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-fkmnoafzno] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-fkmnoafzno] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-fkmnoafzno],
    .btn-orange:focus[b-fkmnoafzno],
    .btn-orange:active[b-fkmnoafzno] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-fkmnoafzno] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-fkmnoafzno] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-fkmnoafzno] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-fkmnoafzno] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-fkmnoafzno] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-fkmnoafzno] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-fkmnoafzno] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-fkmnoafzno] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-fkmnoafzno] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-fkmnoafzno] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-fkmnoafzno],
.focus-ring-orange:focus[b-fkmnoafzno] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-fkmnoafzno] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-fkmnoafzno] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-fkmnoafzno]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-fkmnoafzno]::after {
    animation: ripple-b-fkmnoafzno 1s ease-out;
}

@keyframes ripple-b-fkmnoafzno {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-fkmnoafzno] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-fkmnoafzno] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-fkmnoafzno] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-fkmnoafzno] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-fkmnoafzno] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-fkmnoafzno] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-fkmnoafzno] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-fkmnoafzno],
.btn-custom-secondary[b-fkmnoafzno],
.btn-custom-danger[b-fkmnoafzno] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/MembershipPlans/MembershipPlanRoot.razor.rz.scp.css */
.loader[b-7yn6lt9yx0] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-7yn6lt9yx0 1s infinite linear;
}

@keyframes l7-b-7yn6lt9yx0 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-7yn6lt9yx0] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-7yn6lt9yx0] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-7yn6lt9yx0],
    .btn-orange:focus[b-7yn6lt9yx0],
    .btn-orange:active[b-7yn6lt9yx0] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-7yn6lt9yx0] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-7yn6lt9yx0] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-7yn6lt9yx0] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-7yn6lt9yx0] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-7yn6lt9yx0] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-7yn6lt9yx0] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-7yn6lt9yx0] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-7yn6lt9yx0] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-7yn6lt9yx0] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-7yn6lt9yx0] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-7yn6lt9yx0],
.focus-ring-orange:focus[b-7yn6lt9yx0] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-7yn6lt9yx0] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-7yn6lt9yx0] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-7yn6lt9yx0]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-7yn6lt9yx0]::after {
    animation: ripple-b-7yn6lt9yx0 1s ease-out;
}

@keyframes ripple-b-7yn6lt9yx0 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-7yn6lt9yx0] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-7yn6lt9yx0] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-7yn6lt9yx0] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-7yn6lt9yx0] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-7yn6lt9yx0] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-7yn6lt9yx0] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-7yn6lt9yx0] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-7yn6lt9yx0],
.btn-custom-secondary[b-7yn6lt9yx0],
.btn-custom-danger[b-7yn6lt9yx0] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/MemberShips/MemberShipForm.razor.rz.scp.css */

.installment-container[b-pt0su9bfii] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #dee2e6;
}

.installment-item[b-pt0su9bfii] {
    flex: 1; /* Makes them grow equally */
    min-width: 80px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.installment-bg[b-pt0su9bfii] {
    background-color: #e61141;
}

.installment-item:hover[b-pt0su9bfii] {
    border-color: #e61141;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Active State */
.installment-item.active[b-pt0su9bfii] {
    background: #e61141;
    border-color: #e61141;
    color: white;
}

/* Text Styling inside items */
.installment-item .num[b-pt0su9bfii] {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.installment-item .unit[b-pt0su9bfii] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    opacity: 0.8;
}

.installment-item.active .unit[b-pt0su9bfii] {
    opacity: 1;
}

/* Small check icon for active item */
.active-icon[b-pt0su9bfii] {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.8rem;
}

/* Responsive adjustment */
@@media (max-width: 576px) {
    .installment-item[b-pt0su9bfii] {
        flex: 0 0 calc(33.33% - 8px);
    }
}




.payment-grid[b-pt0su9bfii] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.payment-strip[b-pt0su9bfii] {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 4px solid var(--brand-primary);
    transition: transform 0.1s ease;
    height: 100%;
}

    .payment-strip:hover[b-pt0su9bfii] {
        transform: translateY(-2px);
        border-left-width: 6px;
    }

.strip-index[b-pt0su9bfii] {
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--brand-primary);
    min-width: 20px;
}

.strip-info[b-pt0su9bfii] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.mini-icon[b-pt0su9bfii] {
    font-size: 0.8rem;
    margin-right: 6px;
    color: #6c757d;
}

.date-text[b-pt0su9bfii] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
}

.strip-amount[b-pt0su9bfii] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #212529;
    padding-left: 8px;
}

.currency[b-pt0su9bfii] {
    font-size: 0.6rem;
    color: #6c757d;
}

@@media (max-width: 480px) {
    .payment-grid[b-pt0su9bfii] {
        grid-template-columns: 1fr;
    }
}




/* Decorative underline for the title */
.brand-underline[b-pt0su9bfii] {
    height: 3px;
    width: 30px;
    background-color: var(--brand-primary);
    border-radius: 2px;
    margin-top: 4px;
}

/* Custom Brand Button */
.btn-brand-add[b-pt0su9bfii] {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 8px 20px 8px 12px;
    display: flex;
    align-items: center;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* Icon container for a "button inside a button" look */
.btn-icon[b-pt0su9bfii] {
    background-color: rgba(255, 255, 255, 0.2);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: all 0.3s ease;
}

.btn-brand-add:hover[b-pt0su9bfii] {
    background-color: #c40e37; /* Slightly darker version of your red */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(230, 17, 65, 0.3) !important;
}

    .btn-brand-add:hover .btn-icon[b-pt0su9bfii] {
        background-color: rgba(255, 255, 255, 0.4);
        transform: rotate(90deg); /* Modern touch: rotate plus to indicate action */
    }

.btn-brand-add:active[b-pt0su9bfii] {
    transform: translateY(0);
}

.btn-text[b-pt0su9bfii] {
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}


/* Grid for Plan Details */
.plan-info-grid[b-pt0su9bfii] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.info-card[b-pt0su9bfii] {
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

    .info-card:hover[b-pt0su9bfii] {
        border-color: var(--brand-primary);
        background: #fffafa;
    }

.info-icon[b-pt0su9bfii] {
    font-size: 1.2rem;
    color: var(--brand-primary);
    margin-right: 10px;
    opacity: 0.8;
}

.info-body[b-pt0su9bfii] {
    display: flex;
    flex-direction: column;
}

.info-label[b-pt0su9bfii] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.info-value[b-pt0su9bfii] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

/* Financial Input Area */
.financial-input-group[b-pt0su9bfii] {
    background: white;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #eee;
}

.input-container[b-pt0su9bfii] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-pt0su9bfii] {
    position: absolute;
    left: 12px;
    color: var(--brand-primary);
    z-index: 5;
}

.brand-input[b-pt0su9bfii] {
    padding-left: 38px !important;
    border-radius: 10px !important;
    border: 2px solid #f0f0f0 !important;
    font-weight: 700 !important;
    height: 45px;
}

    .brand-input:focus[b-pt0su9bfii] {
        border-color: var(--brand-primary) !important;
        box-shadow: 0 0 0 4px rgba(230, 17, 65, 0.1) !important;
    }

/* Remaining Balance Card */
.remain-display-card[b-pt0su9bfii] {
    height: 100%;
    border-radius: 16px;
    padding: 15px 20px;
    color: white;
    transition: all 0.3s ease;
}

    .remain-display-card.pending[b-pt0su9bfii] {
        background: var(--brand-primary);
        box-shadow: 0 10px 20px rgba(230, 17, 65, 0.2);
    }

    .remain-display-card.balanced[b-pt0su9bfii] {
        background: #28a745;
        box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
    }

.remain-status-icon i[b-pt0su9bfii] {
    font-size: 2rem;
    opacity: 0.5;
}

.fw-extrabold[b-pt0su9bfii] {
    font-weight: 850;
}


.summary-board[b-pt0su9bfii] {
    background: #fff;
    border-radius: 20px;
}

.header-line[b-pt0su9bfii] {
    flex-grow: 1;
    height: 1px;
    background: #eee;
}

.letter-spacing-1[b-pt0su9bfii] {
    letter-spacing: 1px;
}

.fw-extrabold[b-pt0su9bfii] {
    font-weight: 850;
}

/* Main Total Card */
.total-card.primary[b-pt0su9bfii] {
    background: var(--brand-primary);
    color: white;
    padding: 20px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
}

.total-card .card-label[b-pt0su9bfii] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 4px;
}

.total-card .card-value[b-pt0su9bfii] {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.total-card .currency[b-pt0su9bfii] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.background-icon[b-pt0su9bfii] {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 5rem;
    opacity: 0.15;
    transform: rotate(-15deg);
}

/* Mini Stats Grid */
.stats-mini-grid[b-pt0su9bfii] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    height: 100%;
}

.stat-mini-box[b-pt0su9bfii] {
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease;
}

    .stat-mini-box:hover[b-pt0su9bfii] {
        background: #fffafa;
        border-color: var(--brand-primary);
        transform: translateY(-3px);
    }

.mini-label[b-pt0su9bfii] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.mini-value[b-pt0su9bfii] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #212529;
}


.custom-tabs[b-pt0su9bfii] {
    gap: 8px;
    margin-bottom: -1px;
}

    .custom-tabs .nav-link[b-pt0su9bfii] {
        border: none !important;
        background: #f8f9fa;
        color: #6c757d;
        font-weight: 600;
        padding: 12px 24px;
        border-radius: 12px 12px 0 0 !important;
        transition: all 0.3s ease;
        position: relative;
    }

        .custom-tabs .nav-link:hover[b-pt0su9bfii] {
            color: var(--brand-primary);
            background: #fffafa;
        }

        .custom-tabs .nav-link.active[b-pt0su9bfii] {
            background: #ffffff !important;
            color: var(--brand-primary) !important;
            box-shadow: 0 -4px 10px rgba(0,0,0,0.03);
        }

            .custom-tabs .nav-link.active[b-pt0su9bfii]::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background-color: var(--brand-primary);
                border-radius: 2px 2px 0 0;
            }

.tab-content-wrapper[b-pt0su9bfii] {
    border-radius: 0 16px 16px 16px;
    border-color: #eee !important;
}

.tab-pane-custom.active[b-pt0su9bfii] {
    animation: fadeInSlide 0.4s ease forwards;
}

@@keyframes fadeInSlide {
    from[b-pt0su9bfii] {
        opacity: 0;
        transform: translateY(10px);
    }

    to[b-pt0su9bfii] {
        opacity: 1;
        transform: translateY(0);
    }
}






.custom-tabs-modern[b-pt0su9bfii] {
    display: flex;
    gap: 15px;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar for Chrome/Safari */
}

.power-tab[b-pt0su9bfii] {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 8px 12px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    min-width: 220px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .power-tab.active[b-pt0su9bfii] {
        background: #fff;
        border-color: var(--brand-primary);
        box-shadow: 0 10px 20px rgba(230, 17, 65, 0.15);
        transform: translateY(-5px);
    }

.tab-button[b-pt0su9bfii] {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0;
    width: 100%;
}

.tab-icon-wrapper[b-pt0su9bfii] {
    position: relative;
    width: 42px;
    height: 42px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #a0aec0;
    margin-right: 12px;
    transition: all 0.3s ease;
}

.power-tab.active .tab-icon-wrapper[b-pt0su9bfii] {
    background: var(--brand-primary);
    color: white;
}

/* Status Indicators */
.status-dot[b-pt0su9bfii] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
}

    .status-dot.success[b-pt0su9bfii] {
        background: #22c55e;
    }

    .status-dot.warning[b-pt0su9bfii] {
        background: #f59e0b;
    }

.pulse[b-pt0su9bfii] {
    animation: shadow-pulse 1.5s infinite;
}

@@keyframes shadow-pulse {
    0%[b-pt0su9bfii] {
        box-shadow: 0 0 0 0px rgba(245, 158, 11, 0.4);
    }

    100%[b-pt0su9bfii] {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

/* Text Styling */
.tab-label-group[b-pt0su9bfii] {
    display: flex;
    flex-direction: column;
}

.tab-meta[b-pt0su9bfii] {
    font-size: 0.65rem;
    font-weight: 800;
    color: #a0aec0;
    text-transform: uppercase;
}

.tab-main-text[b-pt0su9bfii] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.power-tab.active .tab-meta[b-pt0su9bfii] {
    color: var(--brand-primary);
    opacity: 0.8;
}

/* Close Button Animation */
.tab-close-btn[b-pt0su9bfii] {
    opacity: 0;
    background: none;
    border: none;
    color: #cbd5e0;
    font-size: 1.1rem;
    padding: 0;
    margin-left: 8px;
    transition: all 0.2s;
}

.power-tab:hover .tab-close-btn[b-pt0su9bfii] {
    opacity: 1;
}

.tab-close-btn:hover[b-pt0su9bfii] {
    color: var(--brand-primary);
    transform: scale(1.1);
}


.coupon-input-wrapper[b-pt0su9bfii] {
    position: relative;
    border-radius: 12px;
    background: white;
}

.btn-clear-coupon[b-pt0su9bfii] {
    position: absolute;
    right: 40px; /* Adjust based on your SearchableSelect toggle arrow */
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #cbd5e0;
    z-index: 10;
    transition: color 0.2s;
}

    .btn-clear-coupon:hover[b-pt0su9bfii] {
        color: var(--brand-primary);
    }

.savings-alert[b-pt0su9bfii] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 12px 20px;
    border-radius: 14px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.2);
}

.savings-icon[b-pt0su9bfii] {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.animate-pop-in[b-pt0su9bfii] {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@@keyframes popIn {
    0%[b-pt0su9bfii] {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    100%[b-pt0su9bfii] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.fw-extrabold[b-pt0su9bfii] {
    font-weight: 850;
}

/* Success State (Zero Balance) */
.remain-display-card.balanced[b-pt0su9bfii] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
}

/* Pending State (Money Owed) */
.remain-display-card.pending[b-pt0su9bfii] {
    background: linear-gradient(135deg, #e61141, #b30d32); /* Your Brand Red */
    box-shadow: 0 8px 20px rgba(230, 17, 65, 0.25);
}

/* Overpaid State (Credit) */
.remain-display-card.overpaid[b-pt0su9bfii] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
}

.remain-display-card[b-pt0su9bfii] {
    transition: all 0.4s ease;
    border: none;
    color: white;
    padding: 1.25rem;
    border-radius: 16px;
}


.total-card.primary[b-pt0su9bfii] {
    background: linear-gradient(135deg, var(--brand-primary), #b30d32);
    color: white;
    padding: 24px;
    border-radius: 20px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
}

.card-label[b-pt0su9bfii] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.card-value-group[b-pt0su9bfii] {
    display: flex;
    flex-direction: column;
}

.original-price-strike[b-pt0su9bfii] {
    font-size: 0.9rem;
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 500;
    margin-bottom: -5px;
}

.card-value[b-pt0su9bfii] {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.currency[b-pt0su9bfii] {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
}

.background-icon[b-pt0su9bfii] {
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 6rem;
    opacity: 0.12;
    transform: rotate(-10deg);
}

/* Subtle glow for the "Premium" look */
.card-glow[b-pt0su9bfii] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent);
    pointer-events: none;
}

/* Animation for the "Saving" badge */
.animate-bounce-subtle[b-pt0su9bfii] {
    animation: bounceSubtle 2s infinite;
}

@@keyframes bounceSubtle {
    0%[b-pt0su9bfii], 100%[b-pt0su9bfii] {
        transform: translateY(0);
    }

    50%[b-pt0su9bfii] {
        transform: translateY(-3px);
    }
}

.strip-purpose[b-pt0su9bfii] {
    border-bottom: 1px solid #f0f0f0;
    transition: border-color 0.3s;
}

.payment-strip:focus-within .strip-purpose[b-pt0su9bfii] {
    border-bottom-color: var(--brand-primary);
}

.purpose-input[b-pt0su9bfii] {
    border-radius: 10px !important;
    border-color: #e2e8f0;
    padding-left: 1rem;
    transition: all 0.2s ease;
}

    .purpose-input:focus[b-pt0su9bfii] {
        border-color: #e61141; /* Your brand color */
        box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.1);
        background-color: #fff; /* Slight background pop on focus */
    }





















.review-modal[b-pt0su9bfii] {
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header & Divider */
.receipt-header[b-pt0su9bfii] {
    padding: 10px 0;
}

.receipt-logo i[b-pt0su9bfii] {
    font-size: 2.5rem;
    color: #e61141;
}

.receipt-subtitle[b-pt0su9bfii] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
}

.receipt-date-stamp[b-pt0su9bfii] {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 5px;
}

.receipt-divider[b-pt0su9bfii] {
    text-align: center;
    border-bottom: 1px solid #eee;
    line-height: 0.1em;
    margin: 20px 0 15px;
}

    .receipt-divider span[b-pt0su9bfii] {
        background: #fff;
        padding: 0 10px;
        font-size: 0.65rem;
        font-weight: 800;
        color: #e61141;
        text-transform: uppercase;
    }

/* Detail Sections */
.info-section label[b-pt0su9bfii] {
    display: block;
    font-size: 0.65rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
}

.info-section .val[b-pt0su9bfii] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.plan-item-box[b-pt0su9bfii] {
    border: 1px solid #f0f0f0;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fafafa;
}

.plan-meta[b-pt0su9bfii] {
    font-size: 0.75rem;
    color: #666;
}

.price-pill[b-pt0su9bfii] {
    background: #e61141;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
}

/* Allowances Grid */
.allowances-grid[b-pt0su9bfii] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
}

.allowance-item[b-pt0su9bfii] {
    text-align: center;
}

    .allowance-item .tag[b-pt0su9bfii] {
        display: block;
        font-size: 0.55rem;
        color: #aaa;
        text-transform: uppercase;
    }

    .allowance-item .num[b-pt0su9bfii] {
        font-size: 0.75rem;
        font-weight: 800;
        color: #333;
    }

/* Total Bar */
.total-bar[b-pt0su9bfii] {
    background: #1a1a1a;
    color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.total-label[b-pt0su9bfii] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
}

.total-value[b-pt0su9bfii] {
    font-size: 1.4rem;
    font-weight: 900;
}

    .total-value small[b-pt0su9bfii] {
        font-size: 0.7rem;
    }

/* Footer */
.receipt-footer[b-pt0su9bfii] {
    font-size: 0.65rem;
    color: #999;
    text-align: center;
    margin-top: 20px;
}

.signature-line[b-pt0su9bfii] {
    border-top: 1px solid #ddd;
    display: inline-block;
    padding: 5px 30px;
    color: #333;
    margin-top: 30px;
}

/* Animation */
.animate-pop[b-pt0su9bfii] {
    animation: popScale-b-pt0su9bfii 0.3s ease;
}

@keyframes popScale-b-pt0su9bfii {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}



/* Container for the buttons */
.modal-actions[b-pt0su9bfii] {
    background-color: #f8f9fa; /* Light grey background to separate from receipt */
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 1rem;
}

/* The "EDIT INFO" / Cancel Button */
.btn-light.border[b-pt0su9bfii] {
    background-color: #ffffff;
    border: 1px solid #ced4da !important;
    color: #495057;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

    .btn-light.border:hover[b-pt0su9bfii] {
        background-color: #e9ecef;
        color: #212529;
    }

/* The "CONFIRM & SAVE" Button */
.btn-primary-gym[b-pt0su9bfii] {
    background-color: #e61141; /* Your Primary Red */
    border: none;
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(230, 17, 65, 0.15);
}

    .btn-primary-gym:hover[b-pt0su9bfii] {
        background-color: #c40e36;
        box-shadow: 0 6px 12px rgba(230, 17, 65, 0.25);
        transform: translateY(-1px);
    }

    .btn-primary-gym:active[b-pt0su9bfii] {
        transform: translateY(0);
    }

/* Ensure font-weight is bold as per your HTML */
.fw-bold[b-pt0su9bfii] {
    font-weight: 700 !important;
}


/* Optional Animation for a smooth entry */
.animate-pop[b-pt0su9bfii] {
    animation: modalPop-b-pt0su9bfii 0.25s ease-out;
}

@keyframes modalPop-b-pt0su9bfii {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}



/* The Backdrop now acts as the scroll container */
.gym-modal-backdrop[b-pt0su9bfii] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start; /* Change from center to start to allow top-down scrolling */
    justify-content: center;
    z-index: 1050;
    padding: 40px 20px; /* Add vertical padding so the modal isn't stuck to edges */
    overflow-y: auto; /* THIS IS THE KEY: Enables scroll on the backdrop */
}

.gym-modal-content[b-pt0su9bfii] {
    background-color: #ffffff;
    width: 120%;
    max-width: 700px;
    border-radius: 16px;
    position: relative;
    border-top: 8px solid #e61141;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    margin-bottom: 40px; /* Space at the bottom after scrolling */
    /* Ensure the content itself doesn't try to hide overflow */
    display: flex;
    flex-direction: column;
    padding: 0px 10px
}

/* If the receipt body is huge, you can also limit its height specifically */
.receipt-body[b-pt0su9bfii] {
    padding: 20px;
    flex-grow: 1;
}



/* /Components/Pages/MemberShips/MemberShips/MemberShipRoot.razor.rz.scp.css */
.loader[b-2fztuv7t2q] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-2fztuv7t2q 1s infinite linear;
}

@keyframes l7-b-2fztuv7t2q {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-2fztuv7t2q] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-2fztuv7t2q] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-2fztuv7t2q],
    .btn-orange:focus[b-2fztuv7t2q],
    .btn-orange:active[b-2fztuv7t2q] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-2fztuv7t2q] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-2fztuv7t2q] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-2fztuv7t2q] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-2fztuv7t2q] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-2fztuv7t2q] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-2fztuv7t2q] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-2fztuv7t2q] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-2fztuv7t2q] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-2fztuv7t2q] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-2fztuv7t2q] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-2fztuv7t2q],
.focus-ring-orange:focus[b-2fztuv7t2q] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-2fztuv7t2q] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-2fztuv7t2q] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-2fztuv7t2q]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-2fztuv7t2q]::after {
    animation: ripple-b-2fztuv7t2q 1s ease-out;
}

@keyframes ripple-b-2fztuv7t2q {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-2fztuv7t2q] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-2fztuv7t2q] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-2fztuv7t2q] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-2fztuv7t2q] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-2fztuv7t2q] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-2fztuv7t2q] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-2fztuv7t2q] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-2fztuv7t2q],
.btn-custom-secondary[b-2fztuv7t2q],
.btn-custom-danger[b-2fztuv7t2q] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/Members/MemberForm.razor.rz.scp.css */
.tabs-container[b-cpnewkt8b2] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.spinner-border-sm[b-cpnewkt8b2] {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12em;
    --bs-spinner-color: #e61141; /* Matches your elite theme */
}

.btn-action-elite:disabled[b-cpnewkt8b2] {
    cursor: wait;
    filter: grayscale(0.5);
    opacity: 0.7;
}

/* Maintain button width so it doesn't "jump" when spinner appears */
.btn-action-elite[b-cpnewkt8b2] {
    min-width: 135px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.segmented-control[b-cpnewkt8b2] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.control-item[b-cpnewkt8b2] {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

    .control-item i[b-cpnewkt8b2] {
        font-size: 1rem;
    }

    .control-item.active[b-cpnewkt8b2] {
        background: #ffffff;
        color: #e61141;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

@@media (max-width: 576px) {
    .control-item span[b-cpnewkt8b2] {
        display: none;
    }

    .control-item[b-cpnewkt8b2] {
        padding: 8px 12px;
    }
}


.payment-grid-stream[b-cpnewkt8b2] {
    max-width: 1000px; /* Wider to accommodate two columns */
    margin: 0 auto;
}

.payment-card[b-cpnewkt8b2] {
    padding: 1.25rem;
    border-radius: 18px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    height: 100%; /* Keeps cards same height in a row */
}

/* --- THE "NEAR" TOP ROW (FIRST TWO) --- */
.near-item[b-cpnewkt8b2] {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

    .near-item.type-pending[b-cpnewkt8b2] {
        background-color: #e61141; /* Your Primary Red */
        color: white;
        border: none;
    }

    .near-item.type-paid[b-cpnewkt8b2] {
        background-color: #1a1a1a; /* Elite Dark */
        color: white;
        border-bottom: 4px solid #22c55e;
    }

/* --- THE OLDER ROWS --- */
.older-item[b-cpnewkt8b2] {
    background-color: #ffffff;
}

    .older-item.type-paid[b-cpnewkt8b2] {
        border-left: 4px solid #22c55e;
    }

    .older-item.type-pending[b-cpnewkt8b2] {
        border-left: 4px solid #e61141;
    }

/* --- INTERNAL ELEMENTS --- */
.date-box[b-cpnewkt8b2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid rgba(0,0,0,0.05);
    min-width: 55px;
}

/* White borders for the dark/red cards */
.near-item .date-box[b-cpnewkt8b2] {
    border-right: 1px solid rgba(255,255,255,0.2);
}

.date-box .day[b-cpnewkt8b2] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.date-box .month[b-cpnewkt8b2] {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.payment-purpose[b-cpnewkt8b2] {
    font-weight: 700;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; /* Prevents long text from breaking the two-column grid */
}

.payment-amount[b-cpnewkt8b2] {
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
}

    .payment-amount .curr[b-cpnewkt8b2] {
        font-size: 0.6rem;
        font-weight: 400;
        opacity: 0.7;
    }

.payment-status-text[b-cpnewkt8b2] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}


.empty-payment-state[b-cpnewkt8b2] {
    padding: 5rem 2rem;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
    animation: fadeIn-b-cpnewkt8b2 0.6s ease-out;
}

    .empty-payment-state .icon-circle[b-cpnewkt8b2] {
        width: 80px;
        height: 80px;
        background: #fff1f2; /* Light Brand Tint */
        color: #e61141; /* Brand Primary */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        margin: 0 auto 1.5rem;
        box-shadow: 0 10px 20px rgba(230, 17, 65, 0.05);
    }

    .empty-payment-state h4[b-cpnewkt8b2] {
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 0.5rem;
    }

    .empty-payment-state p[b-cpnewkt8b2] {
        color: #888;
        font-size: 0.95rem;
        line-height: 1.6;
    }

/* Minimalist decoration at the bottom */
.minimal-loader[b-cpnewkt8b2] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 8px;
}

    .minimal-loader .dot[b-cpnewkt8b2] {
        width: 6px;
        height: 6px;
        background: #e61141;
        border-radius: 50%;
        opacity: 0.2;
        animation: pulse-b-cpnewkt8b2 1.5s infinite ease-in-out;
    }

        .minimal-loader .dot:nth-child(2)[b-cpnewkt8b2] {
            animation-delay: 0.2s;
        }

        .minimal-loader .dot:nth-child(3)[b-cpnewkt8b2] {
            animation-delay: 0.4s;
        }

@keyframes pulse-b-cpnewkt8b2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Action Bar Styling */
.card-action-bar[b-cpnewkt8b2] {
    border-color: rgba(0,0,0,0.05) !important;
}

/* Adjust border color for the Near/Dark/Red cards */
.near-item .card-action-bar[b-cpnewkt8b2] {
    border-color: rgba(255,255,255,0.2) !important;
}

/* The Pay Button */
.btn-pay-now[b-cpnewkt8b2] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Button style when card is PENDING (The Red/Pink Card) */
.type-pending.near-item .btn-pay-now[b-cpnewkt8b2] {
    background: white;
    color: #e61141;
}

/* Button style when card is WHITE (Older items) */
.older-item.type-pending .btn-pay-now[b-cpnewkt8b2] {
    background: #e61141;
    color: white;
}

.btn-pay-now:hover[b-cpnewkt8b2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Fix for the Date Box Year */
.date-box .year[b-cpnewkt8b2] {
    font-size: 0.55rem;
    opacity: 0.5;
    font-weight: 700;
}

.text-truncate[b-cpnewkt8b2] {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purpose-text-multiline[b-cpnewkt8b2] {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    display: block;
}

.spinner-border-sm[b-cpnewkt8b2] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Ensure the button doesn't jump in size when loading starts */
.btn-pay-now[b-cpnewkt8b2] {
    min-width: 130px;
    justify-content: center;
}

    /* Subtle pulse animation for the button while processing */
    .btn-pay-now:disabled:not([systemfeaturetype])[b-cpnewkt8b2] {
        cursor: wait;
        opacity: 0.8;
    }





.membership-master-card[b-cpnewkt8b2] {
    background: white;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
}

/* Hero Section */
.membership-hero-banner[b-cpnewkt8b2] {
    background: #111827;
    color: white;
    padding: 1.5rem;
}

.contract-id[b-cpnewkt8b2] {
    font-weight: 900;
}

.text-brand[b-cpnewkt8b2] {
    color: #e61141;
}

.meta-label[b-cpnewkt8b2] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 800;
    margin: 0;
}

.meta-value[b-cpnewkt8b2] {
    font-weight: 700;
    margin: 0;
}

/* Plan Portfolio */
.plan-portfolio-section[b-cpnewkt8b2] {
    background: #f8fafc;
    padding: 1rem;
}

.section-title[b-cpnewkt8b2] {
    font-weight: 800;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
    letter-spacing: 1px;
}

/* Plan Cards */
.plan-detail-card[b-cpnewkt8b2] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.plan-label[b-cpnewkt8b2] {
    color: #e61141;
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.plan-title[b-cpnewkt8b2] {
    font-weight: 800;
    color: #111827;
    margin: 4px 0;
}

.plan-dates[b-cpnewkt8b2] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

/* Financials */
.total-paid[b-cpnewkt8b2] {
    font-size: 1.5rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

    .total-paid small[b-cpnewkt8b2] {
        font-size: 0.7rem;
        font-weight: 500;
    }

.remaining-balance-badge[b-cpnewkt8b2] {
    background: #fff1f2;
    color: #e61141;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 8px;
    display: inline-block;
}

.settled-badge[b-cpnewkt8b2] {
    color: #22c55e;
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 8px;
}

/* Custom Progress Bars */
.stat-label[b-cpnewkt8b2] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}

.stat-count[b-cpnewkt8b2] {
    font-size: 0.7rem;
    font-weight: 900;
    color: #111827;
}

.custom-progress[b-cpnewkt8b2] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar[b-cpnewkt8b2] {
    height: 100%;
    background: #e61141;
    transition: width 0.4s ease;
}

    .progress-bar.full[b-cpnewkt8b2] {
        background: #94a3b8;
    }

/* Badges */
.plan-badge-status[b-cpnewkt8b2] {
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

    .plan-badge-status.active[b-cpnewkt8b2] {
        background: #dcfce7;
        color: #166534;
    }

    .plan-badge-status.pending[b-cpnewkt8b2] {
        background: #fff1f2;
        color: #e61141;
    }

.empty-membership-state[b-cpnewkt8b2] {
    padding: 4rem;
}

.icon-circle[b-cpnewkt8b2] {
    width: 80px;
    height: 80px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #cbd5e1;
}


.btn-action-elite[b-cpnewkt8b2] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn-action-elite:hover:not(:disabled)[b-cpnewkt8b2] {
        background: #fff1f2;
        border-color: #e61141;
        color: #e61141;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(230, 17, 65, 0.1);
    }

.btn-action-freeze[b-cpnewkt8b2] {
    background: #1e293b;
    color: white;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
}

    .btn-action-freeze:hover:not(:disabled)[b-cpnewkt8b2] {
        background: #334155;
        color: white;
    }


.btn-brand-red[b-cpnewkt8b2] {
    background: #e61141;
    color: white;
    border: none;
    font-weight: 800;
    font-size: 0.75rem;
}

.dropdown-menu[b-cpnewkt8b2] {
    animation: fadeInScale-b-cpnewkt8b2 0.2s ease-out;
}

@keyframes fadeInScale-b-cpnewkt8b2 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}























.pt-grid[b-cpnewkt8b2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.pt-master-card[b-cpnewkt8b2] {
    background: white;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

    .pt-master-card:hover[b-cpnewkt8b2] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -15px rgba(230, 17, 65, 0.15);
        border-color: #e61141;
    }

/* Header Section */
.pt-header[b-cpnewkt8b2] {
    padding: 25px;
    background: #111827; /* Dark Dark Surface */
    color: white;
    display: flex;
    justify-content: space-between;
}

.pt-tag[b-cpnewkt8b2] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #e61141;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pt-package-name[b-cpnewkt8b2] {
    font-weight: 800;
    margin: 5px 0;
    font-size: 1.25rem;
}

.pt-desc[b-cpnewkt8b2] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.pt-price-badge[b-cpnewkt8b2] {
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 12px;
    height: fit-content;
    text-align: center;
    font-weight: 800;
}

    .pt-price-badge span[b-cpnewkt8b2] {
        font-size: 0.6rem;
        display: block;
        opacity: 0.6;
    }

/* Body Section */
.pt-body[b-cpnewkt8b2] {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trainer-info[b-cpnewkt8b2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trainer-avatar[b-cpnewkt8b2] {
    width: 45px;
    height: 45px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #64748b;
}

.trainer-meta small[b-cpnewkt8b2] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
}

.trainer-meta p[b-cpnewkt8b2] {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
}

.session-counter[b-cpnewkt8b2] {
    text-align: right;
}

.session-count[b-cpnewkt8b2] {
    font-size: 1.8rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.session-counter small[b-cpnewkt8b2] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
}

/* Footer Section */
.pt-footer[b-cpnewkt8b2] {
    padding: 15px 25px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expiry-status[b-cpnewkt8b2] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .expiry-status.urgent[b-cpnewkt8b2] {
        color: #f59e0b;
    }
    /* Warning color */
    .expiry-status.expired[b-cpnewkt8b2] {
        color: #ef4444;
    }

.btn-pt-action[b-cpnewkt8b2] {
    background: white;
    border: 1px solid #e2e8f0;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #64748b;
    transition: all 0.2s;
}

    .btn-pt-action:hover[b-cpnewkt8b2] {
        background: #e61141;
        color: white;
        border-color: #e61141;
    }

/* Empty State */
.pt-empty-state[b-cpnewkt8b2] {
    text-align: center;
    padding: 60px;
}

.empty-icon[b-cpnewkt8b2] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 15px;
}












/* Container */
[b-cpnewkt8b2] .pt-hybrid-wrapper {
    padding: 15px;
    background: transparent;
}

/* Grid layout (Multiple items in one row) */
[b-cpnewkt8b2] .pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* The Card */
[b-cpnewkt8b2] .pt-hybrid-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

    [b-cpnewkt8b2] .pt-hybrid-card:hover {
        transform: translateY(-4px);
        border-color: #e61141; /* Your Primary Color */
    }

/* Dark Header Section */
[b-cpnewkt8b2] .card-dark-head {
    background: #1e293b; /* Dark Slate */
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-cpnewkt8b2] .badge-elite {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

[b-cpnewkt8b2] .price-pill {
    background: #e61141; /* Primary Red */
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
}

    [b-cpnewkt8b2] .price-pill small {
        font-size: 0.6rem;
        opacity: 0.8;
        margin-left: 2px;
    }

/* Light Body Section */
[b-cpnewkt8b2] .card-light-body {
    padding: 20px;
}

[b-cpnewkt8b2] .coach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

[b-cpnewkt8b2] .coach-avatar {
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-cpnewkt8b2] .coach-meta small {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
}

[b-cpnewkt8b2] .coach-meta p {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

/* Expiry Styling */
[b-cpnewkt8b2] .expiry-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981; /* Green for active */
}

    [b-cpnewkt8b2] .expiry-tag.is-expired {
        color: #ef4444;
    }

/* --- ANIMATED EMPTY STATE --- */
[b-cpnewkt8b2] .pt-empty-hybrid {
    text-align: center;
    padding: 60px 0;
}

[b-cpnewkt8b2] .empty-icon-box {
    position: relative;
    width: 60px;
    height: 60px;
    background: #1e293b; /* Dark Accent */
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
}

[b-cpnewkt8b2] .searching-bar {
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 3px;
    background: #e61141;
    border-radius: 10px;
    animation: search-slide-b-cpnewkt8b2 2s infinite ease-in-out;
}

@keyframes search-slide-b-cpnewkt8b2 {
    0% {
        transform: scaleX(0.1);
        opacity: 0;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(0.1);
        opacity: 0;
    }
}

[b-cpnewkt8b2] .pt-empty-hybrid h5 {
    font-weight: 800;
    color: #1e293b;
}

[b-cpnewkt8b2] .pt-empty-hybrid p {
    font-size: 0.85rem;
    color: #64748b;
}


[b-cpnewkt8b2] .membership-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 15px;
}

[b-cpnewkt8b2] .card-dark-header {
    background: #1e293b;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-cpnewkt8b2] .plan-name {
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

[b-cpnewkt8b2] .status-badge {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
}

    [b-cpnewkt8b2] .status-badge.active {
        background: #10b981;
        color: #fff;
    }

    [b-cpnewkt8b2] .status-badge.inactive {
        background: #64748b;
        color: #fff;
    }

[b-cpnewkt8b2] .card-light-content {
    padding: 20px;
}

[b-cpnewkt8b2] .info-group small {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 700;
}

[b-cpnewkt8b2] .info-group p {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

[b-cpnewkt8b2] .btn-attend {
    width: 100%;
    background: #e61141; /* Your Primary Color */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
}

    [b-cpnewkt8b2] .btn-attend:hover:not(:disabled) {
        background: #1e293b;
        box-shadow: 0 4px 12px rgba(230, 17, 65, 0.3);
    }

    [b-cpnewkt8b2] .btn-attend:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }



/* Modal Styling */
[b-cpnewkt8b2] .dark-modal {
    background: #1e293b; /* Dark Slate to match headers */
    color: white;
    border-radius: 16px;
    border: 1px solid #334155;
    width: 750px
}

[b-cpnewkt8b2] .attendance-list {
    max-height: 400px;
    overflow-y: auto;
}

[b-cpnewkt8b2] .attendance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #2d3142; /* Slightly lighter than modal bg */
    border-radius: 10px;
    margin-bottom: 8px;
    border-left: 4px solid #e61141; /* Primary Accent */
}

[b-cpnewkt8b2] .item-left .date {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
}

[b-cpnewkt8b2] .item-left .time {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Status Badges */
[b-cpnewkt8b2] .status-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

    [b-cpnewkt8b2] .status-badge.attended {
        background: #10b981;
        color: white;
    }

    [b-cpnewkt8b2] .status-badge.absent {
        background: #ef4444;
        color: white;
    }

/* History Button Styling */
[b-cpnewkt8b2] .btn-history {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s;
}

    [b-cpnewkt8b2] .btn-history:hover {
        background: #f1f5f9;
        color: #1e293b;
        border-color: #cbd5e1;
    }


[b-cpnewkt8b2] .btn-empty-action {
    background: #1e293b; /* Dark Slate Accent */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 20px;
    margin-bottom: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.2);
    display: inline-flex;
    align-items: center;
}

    [b-cpnewkt8b2] .btn-empty-action:hover {
        background: #e61141; /* Your Primary Red */
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(230, 17, 65, 0.3);
    }

    [b-cpnewkt8b2] .btn-empty-action i {
        font-size: 1.1rem;
    }


/* Container Row */
[b-cpnewkt8b2] .freeze-timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    [b-cpnewkt8b2] .freeze-timeline-row:hover {
        border-color: #e61141; /* Primary Red */
        box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    }

/* Date Nodes */
[b-cpnewkt8b2] .date-node {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

[b-cpnewkt8b2] .node-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

[b-cpnewkt8b2] .node-date {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

[b-cpnewkt8b2] .date-node.end {
    text-align: right;
}

/* Timeline Bridge (The Line) */
[b-cpnewkt8b2] .timeline-bridge {
    flex-grow: 1;
    margin: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

[b-cpnewkt8b2] .bridge-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Dark Day Count Badge */
[b-cpnewkt8b2] .day-count-badge {
    background: #1e293b; /* Dark Accent */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 30px;
    letter-spacing: 0.5px;
}

/* Red Status Pill */
[b-cpnewkt8b2] .status-pill {
    font-size: 0.6rem;
    font-weight: 800;
    color: #e61141;
    background: rgba(230, 17, 65, 0.1);
    padding: 4px 12px;
    border-radius: 30px;
}

/* The Line System */
[b-cpnewkt8b2] .bridge-line-wrapper {
    width: 100%;
    height: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-cpnewkt8b2] .line-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    border-radius: 10px;
}

[b-cpnewkt8b2] .line-active-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e61141;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(230, 17, 65, 0.3);
}

[b-cpnewkt8b2] .icon-center {
    background: #fff;
    color: #e61141;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 2px solid #e61141;
    font-size: 0.9rem;
}

/* Animation for the Active Freeze */
@keyframes pulse-red-b-cpnewkt8b2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

[b-cpnewkt8b2] .pulse-red {
    animation: pulse-red-b-cpnewkt8b2 2s infinite ease-in-out;
}


/* Container to align title and button */
[b-cpnewkt8b2] .portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9; /* Subtle divider */
}

/* Remove default margins from h5 to keep it aligned with button */
[b-cpnewkt8b2] .section-title {
    margin-bottom: 0 !important;
    font-weight: 800;
    color: #1e293b;
}

/* The Add Plan Button */
[b-cpnewkt8b2] .btn-add-plan {
    background: #1e293b; /* Dark Slate Accent */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    [b-cpnewkt8b2] .btn-add-plan:hover {
        background: #e61141; /* Primary Red on hover */
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(230, 17, 65, 0.2);
    }

    [b-cpnewkt8b2] .btn-add-plan i {
        font-size: 1rem;
    }

/* Responsive adjustment for mobile */
@media (max-width: 576px) {
    [b-cpnewkt8b2] .btn-add-plan span {
        display: none; /* Only show icon on very small screens */
    }

    [b-cpnewkt8b2] .btn-add-plan {
        padding: 8px;
    }
}


[b-cpnewkt8b2] .btn-group-hybrid {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

[b-cpnewkt8b2] .status-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s ease;
}







/* Dark Overlay with Blur */
[b-cpnewkt8b2] .elite-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* The Card */
[b-cpnewkt8b2] .elite-confirm-card {
    background: #ffffff;
    width: 440px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Red Top Accent Bar */
[b-cpnewkt8b2] .elite-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #e61141, #1e293b);
}

/* Header Section */
[b-cpnewkt8b2] .elite-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

[b-cpnewkt8b2] .icon-box {
    width: 54px;
    height: 54px;
    background: #f1f5f9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1e293b;
}

[b-cpnewkt8b2] .elite-header h3 {
    font-weight: 800;
    font-size: 1.25rem;
    margin: 0;
    color: #1e293b;
}

[b-cpnewkt8b2] .elite-header p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* Comparison View */
[b-cpnewkt8b2] .status-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}

[b-cpnewkt8b2] .node-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

[b-cpnewkt8b2] .status-pill {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    background: #e2e8f0;
    color: #475569;
}

    /* Active Glow for Proposed Status */
    [b-cpnewkt8b2] .status-pill.active-glow {
        background: #1e293b;
        color: white;
        box-shadow: 0 0 15px rgba(30, 41, 59, 0.2);
    }

[b-cpnewkt8b2] .status-arrow {
    color: #cbd5e1;
    font-size: 1.2rem;
}

/* Elite Buttons */
[b-cpnewkt8b2] .elite-footer {
    display: flex;
    gap: 15px;
}

[b-cpnewkt8b2] .btn-secondary-hybrid {
    flex: 1;
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #64748b;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.2s;
}

[b-cpnewkt8b2] .btn-primary-hybrid {
    flex: 1;
    background: #e61141;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    transition: all 0.2s;
}

    [b-cpnewkt8b2] .btn-primary-hybrid:hover {
        background: #1e293b;
        transform: translateY(-2px);
    }

/* Animation */
@keyframes slide-up-b-cpnewkt8b2 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

[b-cpnewkt8b2] .animate-slide-up {
    animation: slide-up-b-cpnewkt8b2 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}






/* 1. The Outer Container */
[b-cpnewkt8b2] .status-control-container {
    margin-top: 20px;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* 2. The Label at the Top */
[b-cpnewkt8b2] .control-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* 3. The Bar Track */
[b-cpnewkt8b2] .status-segmented-bar {
    display: flex;
    gap: 4px;
    background: #f1f5f9; /* Soft grey track */
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* 4. Base Button Style */
[b-cpnewkt8b2] .segment-btn {
    flex: 1;
    border: none;
    padding: 10px 4px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    background: transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    /* 5. Hover Effect (Only for inactive) */
    [b-cpnewkt8b2] .segment-btn:hover:not(.active):not(:disabled) {
        background: #ffffff;
        color: #1e293b;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 6. Active States (The "Elite" Pop) */
    [b-cpnewkt8b2] .segment-btn.active {
        cursor: default;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: scale(1.02);
    }

        /* Color logic based on status string */
        [b-cpnewkt8b2] .segment-btn.active.active {
            background: #10b981; /* Emerald Green */
        }

        [b-cpnewkt8b2] .segment-btn.active.pending {
            background: #f59e0b; /* Amber/Orange */
        }

        [b-cpnewkt8b2] .segment-btn.active.expired {
            background: #e61141; /* Your Primary Red */
        }

        [b-cpnewkt8b2] .segment-btn.active.freeze {
            background: #1e293b; /* Your Dark Accent */
        }

    /* Disabled/Current state adjustment */
    [b-cpnewkt8b2] .segment-btn:disabled {
        cursor: default;
    }

    /* 7. Icon Styling */
    [b-cpnewkt8b2] .segment-btn i {
        font-size: 0.85rem;
    }

/* Responsive adjustment */
@media (max-width: 992px) {
    [b-cpnewkt8b2] .status-segmented-bar {
        flex-wrap: wrap;
    }

    [b-cpnewkt8b2] .segment-btn {
        flex: 1 1 calc(50% - 4px); /* 2 per row on smaller tablets */
    }
}

.plan-header-simple[b-cpnewkt8b2] {
    background: #ffffff;
    /* Soft border for the whole box */
    border: 1px solid #eee;
    padding: 14px 20px;
    border-radius: 12px;
    cursor: pointer;
    /* Bold Primary Red Accent on the left */
    border-left: 5px solid #e61141;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .plan-header-simple:hover[b-cpnewkt8b2] {
        background: #fffcfc;
        transform: translateX(4px);
    }

    .plan-header-simple .primary-text[b-cpnewkt8b2] {
        color: #e61141;
        font-size: 1.2rem;
        line-height: 1;
    }

/* Labels inside the header */
.plan-label[b-cpnewkt8b2] {
    font-weight: 800;
    font-size: 0.85rem;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-total[b-cpnewkt8b2] {
    font-weight: 900;
    color: #1a1a1a;
    font-size: 1.05rem;
    background: #fdf2f4; /* Very light primary tint for the price background */
    padding: 4px 12px;
    border-radius: 8px;
}

/* Chevron/Arrow opacity */
.bi-chevron-down[b-cpnewkt8b2], .bi-chevron-up[b-cpnewkt8b2] {
    color: #e61141;
    font-size: 0.9rem;
}




























/* 1. Main Card Container */
.gym-payment-card[b-cpnewkt8b2] {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    position: relative;
    transition: all 0.2s ease-in-out;
    height: 100%; /* Ensures cards in the same row have equal height */
}

    /* Hover effect using your Primary Color */
    .gym-payment-card:hover[b-cpnewkt8b2] {
        border-color: #e61141;
        box-shadow: 0 6px 15px rgba(230, 17, 65, 0.08);
        transform: translateY(-2px);
    }

/* 2. Date Box (The White Square) */
.date-box-simple[b-cpnewkt8b2] {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 10px;
    min-width: 70px;
    padding: 8px 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .date-box-simple .day[b-cpnewkt8b2] {
        display: block;
        font-size: 1.3rem;
        font-weight: 900;
        color: #1a1a1a;
        line-height: 1;
    }

    .date-box-simple .month[b-cpnewkt8b2] {
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        color: #e61141; /* Primary Red */
        text-transform: uppercase;
        margin: 2px 0;
    }

    .date-box-simple .year[b-cpnewkt8b2] {
        display: block;
        font-size: 0.65rem;
        color: #94a3b8;
        font-weight: 600;
    }

/* 3. Info Section */
.payment-title[b-cpnewkt8b2] {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
}

.amount-wrap .amount[b-cpnewkt8b2] {
    font-weight: 900;
    color: #1a1a1a;
    font-size: 1.15rem;
}

.amount-wrap .curr[b-cpnewkt8b2] {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
    margin-left: 2px;
}

/* 4. Bottom Section (Status & Action) */
.border-top-dashed[b-cpnewkt8b2] {
    border-top: 1px dashed #e2e8f0;
}

.status-msg[b-cpnewkt8b2] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* Paid vs Pending distinction using Opacity/Icons only */
    .status-msg.primary-text[b-cpnewkt8b2] {
        color: #e61141 !important;
    }

.opacity-75[b-cpnewkt8b2] {
    opacity: 0.75;
}

/* 5. Primary Action Button */
.btn-primary-gym[b-cpnewkt8b2] {
    background-color: #e61141;
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.2s;
}

    .btn-primary-gym:hover[b-cpnewkt8b2] {
        background-color: #c40e36;
        box-shadow: 0 4px 10px rgba(230, 17, 65, 0.25);
    }

    .btn-primary-gym:disabled[b-cpnewkt8b2] {
        background-color: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }






.gym-modal-backdrop[b-cpnewkt8b2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gym-modal-content[b-cpnewkt8b2] {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    border-top: 6px solid #e61141; /* Primary Red Accent */
}

.confirm-icon-circle[b-cpnewkt8b2] {
    width: 60px;
    height: 60px;
    background: #fdf2f4;
    color: #e61141;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
}

.confirm-amount-display[b-cpnewkt8b2] {
    font-size: 2rem;
    font-weight: 900;
    color: #1a1a1a;
    margin-top: 10px;
}

    .confirm-amount-display small[b-cpnewkt8b2] {
        font-size: 0.9rem;
        color: #718096;
    }

.animate-fade-in[b-cpnewkt8b2] {
    animation: fadeIn-b-cpnewkt8b2 0.2s ease-out;
}

@keyframes fadeIn-b-cpnewkt8b2 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}















.unfreeze-mini-btn[b-cpnewkt8b2] {
    background: white;
    border: 1px solid #e61141;
    color: #e61141;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.2s;
}

    .unfreeze-mini-btn:hover[b-cpnewkt8b2] {
        background: #e61141;
        color: white;
    }

/* Unfreeze Popup Specifics */
.unfreeze-calc[b-cpnewkt8b2] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background: #fdf2f4;
    border-radius: 12px;
}

.calc-box[b-cpnewkt8b2] {
    display: flex;
    flex-direction: column;
}

.calc-label[b-cpnewkt8b2] {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

.calc-val[b-cpnewkt8b2] {
    font-size: 1.1rem;
    color: #e61141;
    font-weight: 800;
}

.calc-arrow[b-cpnewkt8b2] {
    font-size: 1.2rem;
    color: #ccc;
}

.confirm-unfreeze-btn[b-cpnewkt8b2] {
    width: 40%;
    background: #e61141;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.confirmation-text[b-cpnewkt8b2] {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
}



.modal-foot[b-cpnewkt8b2] {
    padding: 15px 20px;
    background: #fcfcfc;
    border-top: 1px solid #f0f0f0;
}

.button-group[b-cpnewkt8b2] {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Primary Action Button (Unfreeze) */
.btn-confirm-primary[b-cpnewkt8b2] {
    flex: 2; /* Makes confirm wider than cancel */
    background: #e61141;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(230, 17, 65, 0.2);
}

    .btn-confirm-primary:hover[b-cpnewkt8b2] {
        background: #c40e36;
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(230, 17, 65, 0.3);
    }

/* Secondary Action Button (Cancel) */
.btn-cancel[b-cpnewkt8b2] {
    flex: 1;
    background: #f0f0f0;
    color: #666;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-cancel:hover[b-cpnewkt8b2] {
        background: #e4e4e4;
        color: #333;
    }

    .btn-confirm-primary:active[b-cpnewkt8b2], .btn-cancel:active[b-cpnewkt8b2] {
        transform: scale(0.96);
    }
/* /Components/Pages/MemberShips/Members/MemberRoot.razor.rz.scp.css */
.loader[b-m3udaukuza] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-m3udaukuza 1s infinite linear;
}

@keyframes l7-b-m3udaukuza {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-m3udaukuza] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-m3udaukuza] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-m3udaukuza],
    .btn-orange:focus[b-m3udaukuza],
    .btn-orange:active[b-m3udaukuza] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-m3udaukuza] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-m3udaukuza] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-m3udaukuza] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-m3udaukuza] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-m3udaukuza] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-m3udaukuza] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-m3udaukuza] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-m3udaukuza] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-m3udaukuza] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-m3udaukuza] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-m3udaukuza],
.focus-ring-orange:focus[b-m3udaukuza] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-m3udaukuza] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-m3udaukuza] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-m3udaukuza]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-m3udaukuza]::after {
    animation: ripple-b-m3udaukuza 1s ease-out;
}

@keyframes ripple-b-m3udaukuza {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-m3udaukuza] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-m3udaukuza] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-m3udaukuza] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-m3udaukuza] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-m3udaukuza] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-m3udaukuza] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-m3udaukuza] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-m3udaukuza],
.btn-custom-secondary[b-m3udaukuza],
.btn-custom-danger[b-m3udaukuza] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/SportSessions/SportSessionRoot.razor.rz.scp.css */
.loader[b-9jwd96h3ea] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-9jwd96h3ea 1s infinite linear;
}

@keyframes l7-b-9jwd96h3ea {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-9jwd96h3ea] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-9jwd96h3ea] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-9jwd96h3ea],
    .btn-orange:focus[b-9jwd96h3ea],
    .btn-orange:active[b-9jwd96h3ea] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-9jwd96h3ea] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-9jwd96h3ea] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-9jwd96h3ea] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-9jwd96h3ea] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-9jwd96h3ea] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-9jwd96h3ea] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-9jwd96h3ea] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-9jwd96h3ea] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-9jwd96h3ea] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-9jwd96h3ea] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-9jwd96h3ea],
.focus-ring-orange:focus[b-9jwd96h3ea] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-9jwd96h3ea] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-9jwd96h3ea] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-9jwd96h3ea]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-9jwd96h3ea]::after {
    animation: ripple-b-9jwd96h3ea 1s ease-out;
}

@keyframes ripple-b-9jwd96h3ea {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-9jwd96h3ea] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-9jwd96h3ea] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-9jwd96h3ea] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-9jwd96h3ea] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-9jwd96h3ea] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-9jwd96h3ea] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-9jwd96h3ea] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-9jwd96h3ea],
.btn-custom-secondary[b-9jwd96h3ea],
.btn-custom-danger[b-9jwd96h3ea] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/Sports/SportRoot.razor.rz.scp.css */
.loader[b-jw6o7agokb] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-jw6o7agokb 1s infinite linear;
}

@keyframes l7-b-jw6o7agokb {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-jw6o7agokb] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-jw6o7agokb] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-jw6o7agokb],
    .btn-orange:focus[b-jw6o7agokb],
    .btn-orange:active[b-jw6o7agokb] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-jw6o7agokb] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-jw6o7agokb] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-jw6o7agokb] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-jw6o7agokb] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-jw6o7agokb] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-jw6o7agokb] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-jw6o7agokb] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-jw6o7agokb] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-jw6o7agokb] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-jw6o7agokb] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-jw6o7agokb],
.focus-ring-orange:focus[b-jw6o7agokb] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-jw6o7agokb] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-jw6o7agokb] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-jw6o7agokb]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-jw6o7agokb]::after {
    animation: ripple-b-jw6o7agokb 1s ease-out;
}

@keyframes ripple-b-jw6o7agokb {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-jw6o7agokb] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-jw6o7agokb] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-jw6o7agokb] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-jw6o7agokb] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-jw6o7agokb] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-jw6o7agokb] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-jw6o7agokb] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-jw6o7agokb],
.btn-custom-secondary[b-jw6o7agokb],
.btn-custom-danger[b-jw6o7agokb] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/MemberShips/SubSports/SubSportRoot.razor.rz.scp.css */
.loader[b-seb1xkmlyy] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-seb1xkmlyy 1s infinite linear;
}

@keyframes l7-b-seb1xkmlyy {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-seb1xkmlyy] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-seb1xkmlyy] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-seb1xkmlyy],
    .btn-orange:focus[b-seb1xkmlyy],
    .btn-orange:active[b-seb1xkmlyy] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-seb1xkmlyy] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-seb1xkmlyy] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-seb1xkmlyy] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-seb1xkmlyy] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-seb1xkmlyy] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-seb1xkmlyy] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-seb1xkmlyy] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-seb1xkmlyy] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-seb1xkmlyy] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-seb1xkmlyy] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-seb1xkmlyy],
.focus-ring-orange:focus[b-seb1xkmlyy] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-seb1xkmlyy] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-seb1xkmlyy] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-seb1xkmlyy]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-seb1xkmlyy]::after {
    animation: ripple-b-seb1xkmlyy 1s ease-out;
}

@keyframes ripple-b-seb1xkmlyy {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-seb1xkmlyy] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-seb1xkmlyy] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-seb1xkmlyy] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-seb1xkmlyy] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-seb1xkmlyy] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-seb1xkmlyy] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-seb1xkmlyy] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-seb1xkmlyy],
.btn-custom-secondary[b-seb1xkmlyy],
.btn-custom-danger[b-seb1xkmlyy] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/ApplicationUsers/ApplicationUserRoot.razor.rz.scp.css */
.loader[b-hhbeg7qmgm] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-hhbeg7qmgm 1s infinite linear;
}

@keyframes l7-b-hhbeg7qmgm {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-hhbeg7qmgm] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-hhbeg7qmgm] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-hhbeg7qmgm],
    .btn-orange:focus[b-hhbeg7qmgm],
    .btn-orange:active[b-hhbeg7qmgm] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-hhbeg7qmgm] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-hhbeg7qmgm] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-hhbeg7qmgm] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-hhbeg7qmgm] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-hhbeg7qmgm] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-hhbeg7qmgm] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-hhbeg7qmgm] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-hhbeg7qmgm] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-hhbeg7qmgm] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-hhbeg7qmgm] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-hhbeg7qmgm],
.focus-ring-orange:focus[b-hhbeg7qmgm] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-hhbeg7qmgm] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-hhbeg7qmgm] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-hhbeg7qmgm]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-hhbeg7qmgm]::after {
    animation: ripple-b-hhbeg7qmgm 1s ease-out;
}

@keyframes ripple-b-hhbeg7qmgm {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-hhbeg7qmgm] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-hhbeg7qmgm] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-hhbeg7qmgm] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-hhbeg7qmgm] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-hhbeg7qmgm] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-hhbeg7qmgm] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-hhbeg7qmgm] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-hhbeg7qmgm],
.btn-custom-secondary[b-hhbeg7qmgm],
.btn-custom-danger[b-hhbeg7qmgm] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/Branchs/BranchRoot.razor.rz.scp.css */
.loader[b-z8yt0jo0d1] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-z8yt0jo0d1 1s infinite linear;
}

@keyframes l7-b-z8yt0jo0d1 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-z8yt0jo0d1] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-z8yt0jo0d1] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-z8yt0jo0d1],
    .btn-orange:focus[b-z8yt0jo0d1],
    .btn-orange:active[b-z8yt0jo0d1] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-z8yt0jo0d1] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-z8yt0jo0d1] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-z8yt0jo0d1] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-z8yt0jo0d1] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-z8yt0jo0d1] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-z8yt0jo0d1] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-z8yt0jo0d1] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-z8yt0jo0d1] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-z8yt0jo0d1] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-z8yt0jo0d1] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-z8yt0jo0d1],
.focus-ring-orange:focus[b-z8yt0jo0d1] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-z8yt0jo0d1] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-z8yt0jo0d1] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-z8yt0jo0d1]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-z8yt0jo0d1]::after {
    animation: ripple-b-z8yt0jo0d1 1s ease-out;
}

@keyframes ripple-b-z8yt0jo0d1 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-z8yt0jo0d1] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-z8yt0jo0d1] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-z8yt0jo0d1] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-z8yt0jo0d1] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-z8yt0jo0d1] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-z8yt0jo0d1] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-z8yt0jo0d1] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-z8yt0jo0d1],
.btn-custom-secondary[b-z8yt0jo0d1],
.btn-custom-danger[b-z8yt0jo0d1] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/Employees/EmployeeRoot.razor.rz.scp.css */
.loader[b-zh0dr6bl0u] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-zh0dr6bl0u 1s infinite linear;
}

@keyframes l7-b-zh0dr6bl0u {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-zh0dr6bl0u] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-zh0dr6bl0u] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-zh0dr6bl0u],
    .btn-orange:focus[b-zh0dr6bl0u],
    .btn-orange:active[b-zh0dr6bl0u] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-zh0dr6bl0u] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-zh0dr6bl0u] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-zh0dr6bl0u] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-zh0dr6bl0u] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-zh0dr6bl0u] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-zh0dr6bl0u] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-zh0dr6bl0u] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-zh0dr6bl0u] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-zh0dr6bl0u] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-zh0dr6bl0u] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-zh0dr6bl0u],
.focus-ring-orange:focus[b-zh0dr6bl0u] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-zh0dr6bl0u] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-zh0dr6bl0u] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-zh0dr6bl0u]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-zh0dr6bl0u]::after {
    animation: ripple-b-zh0dr6bl0u 1s ease-out;
}

@keyframes ripple-b-zh0dr6bl0u {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-zh0dr6bl0u] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-zh0dr6bl0u] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-zh0dr6bl0u] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-zh0dr6bl0u] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-zh0dr6bl0u] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-zh0dr6bl0u] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-zh0dr6bl0u] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-zh0dr6bl0u],
.btn-custom-secondary[b-zh0dr6bl0u],
.btn-custom-danger[b-zh0dr6bl0u] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/Expenses/ExpenseRoot.razor.rz.scp.css */
.loader[b-gqsbd5tnhx] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-gqsbd5tnhx 1s infinite linear;
}

@keyframes l7-b-gqsbd5tnhx {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-gqsbd5tnhx] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-gqsbd5tnhx] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-gqsbd5tnhx],
    .btn-orange:focus[b-gqsbd5tnhx],
    .btn-orange:active[b-gqsbd5tnhx] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-gqsbd5tnhx] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-gqsbd5tnhx] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-gqsbd5tnhx] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-gqsbd5tnhx] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-gqsbd5tnhx] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-gqsbd5tnhx] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-gqsbd5tnhx] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-gqsbd5tnhx] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-gqsbd5tnhx] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-gqsbd5tnhx] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-gqsbd5tnhx],
.focus-ring-orange:focus[b-gqsbd5tnhx] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-gqsbd5tnhx] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-gqsbd5tnhx] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-gqsbd5tnhx]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-gqsbd5tnhx]::after {
    animation: ripple-b-gqsbd5tnhx 1s ease-out;
}

@keyframes ripple-b-gqsbd5tnhx {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-gqsbd5tnhx] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-gqsbd5tnhx] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-gqsbd5tnhx] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-gqsbd5tnhx] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-gqsbd5tnhx] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-gqsbd5tnhx] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-gqsbd5tnhx] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-gqsbd5tnhx],
.btn-custom-secondary[b-gqsbd5tnhx],
.btn-custom-danger[b-gqsbd5tnhx] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/GymPages/GymRoot.razor.rz.scp.css */
.loader[b-047b8rrulg] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-047b8rrulg 1s infinite linear;
}

@keyframes l7-b-047b8rrulg {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-047b8rrulg] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-047b8rrulg] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-047b8rrulg],
    .btn-orange:focus[b-047b8rrulg],
    .btn-orange:active[b-047b8rrulg] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-047b8rrulg] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-047b8rrulg] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-047b8rrulg] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-047b8rrulg] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-047b8rrulg] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-047b8rrulg] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-047b8rrulg] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-047b8rrulg] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-047b8rrulg] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-047b8rrulg] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-047b8rrulg],
.focus-ring-orange:focus[b-047b8rrulg] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-047b8rrulg] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-047b8rrulg] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-047b8rrulg]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-047b8rrulg]::after {
    animation: ripple-b-047b8rrulg 1s ease-out;
}

@keyframes ripple-b-047b8rrulg {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-047b8rrulg] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-047b8rrulg] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-047b8rrulg] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-047b8rrulg] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-047b8rrulg] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-047b8rrulg] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-047b8rrulg] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-047b8rrulg],
.btn-custom-secondary[b-047b8rrulg],
.btn-custom-danger[b-047b8rrulg] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Organizations/Jobs/JobRoot.razor.rz.scp.css */
.loader[b-l3a290coox] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-l3a290coox 1s infinite linear;
}

@keyframes l7-b-l3a290coox {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-l3a290coox] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-l3a290coox] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-l3a290coox],
    .btn-orange:focus[b-l3a290coox],
    .btn-orange:active[b-l3a290coox] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-l3a290coox] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-l3a290coox] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-l3a290coox] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-l3a290coox] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-l3a290coox] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-l3a290coox] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-l3a290coox] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-l3a290coox] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-l3a290coox] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-l3a290coox] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-l3a290coox],
.focus-ring-orange:focus[b-l3a290coox] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-l3a290coox] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-l3a290coox] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-l3a290coox]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-l3a290coox]::after {
    animation: ripple-b-l3a290coox 1s ease-out;
}

@keyframes ripple-b-l3a290coox {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-l3a290coox] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-l3a290coox] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-l3a290coox] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-l3a290coox] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-l3a290coox] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-l3a290coox] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-l3a290coox] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-l3a290coox],
.btn-custom-secondary[b-l3a290coox],
.btn-custom-danger[b-l3a290coox] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Payments/Payments/PaymentRoot.razor.rz.scp.css */
.loader[b-wttgh9ceis] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-wttgh9ceis 1s infinite linear;
}

@keyframes l7-b-wttgh9ceis {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-wttgh9ceis] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-wttgh9ceis] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-wttgh9ceis],
    .btn-orange:focus[b-wttgh9ceis],
    .btn-orange:active[b-wttgh9ceis] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-wttgh9ceis] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-wttgh9ceis] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-wttgh9ceis] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-wttgh9ceis] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-wttgh9ceis] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-wttgh9ceis] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-wttgh9ceis] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-wttgh9ceis] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-wttgh9ceis] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-wttgh9ceis] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-wttgh9ceis],
.focus-ring-orange:focus[b-wttgh9ceis] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-wttgh9ceis] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-wttgh9ceis] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-wttgh9ceis]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-wttgh9ceis]::after {
    animation: ripple-b-wttgh9ceis 1s ease-out;
}

@keyframes ripple-b-wttgh9ceis {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-wttgh9ceis] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-wttgh9ceis] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-wttgh9ceis] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-wttgh9ceis] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-wttgh9ceis] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-wttgh9ceis] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-wttgh9ceis] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-wttgh9ceis],
.btn-custom-secondary[b-wttgh9ceis],
.btn-custom-danger[b-wttgh9ceis] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
























:root[b-wttgh9ceis] {
    --primary: #e61141;
    --glass: rgba(255, 255, 255, 0.9);
}

.payment-grid[b-wttgh9ceis] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.glass-card[b-wttgh9ceis] {
    background: var(--glass);
    border: 1px solid rgba(230, 17, 65, 0.1);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-wttgh9ceis] {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(230, 17, 65, 0.08);
        /* border-color: var(--primary); */
    }

.avatar[b-wttgh9ceis] {
    width: 45px;
    height: 45px;
    background: #fff1f3;
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-right: 15px;
    font-size: 1.2rem;
}

.card-mid[b-wttgh9ceis] {
    flex-grow: 1;
}

.member-name[b-wttgh9ceis] {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #222;
}

.purpose-tag[b-wttgh9ceis] {
    font-size: 0.75rem;
    color: #e61141;
    background: #fff1f3;
    padding: 2px 8px;
    border-radius: 4px;
}

.footer-meta[b-wttgh9ceis] {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #999;
    display: flex;
    gap: 8px;
}

.card-right[b-wttgh9ceis] {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 15px;
}

.amount-group[b-wttgh9ceis] {
    display: flex;
    flex-direction: column;
}

.currency[b-wttgh9ceis] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #999;
}

.val[b-wttgh9ceis] {
    font-size: 1.3rem;
    font-weight: 900;
    color: #333;
}

.action-circle[b-wttgh9ceis] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: 0.2s;
}

    .action-circle:hover[b-wttgh9ceis] {
        background: var(--primary);
        color: white;
    }

.status-chip[b-wttgh9ceis] {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Styles based on Status */
.paid.status-chip[b-wttgh9ceis] {
    background: #e8f5e9;
    color: #2e7d32;
}

.pending.status-chip[b-wttgh9ceis] {
    background: #fff3e0;
    color: #ef6c00;
}

.mini-card.failed .status-chip[b-wttgh9ceis] {
    background: #ffebee;
    color: #c62828;
}

/* Optional: Make the whole card border change color based on status */
.mini-card.paid[b-wttgh9ceis] {
    border-left: 5px solid #2e7d32;
}

.mini-card.pending[b-wttgh9ceis] {
    border-left: 5px solid #ef6c00;
}























:root[b-wttgh9ceis] {
    --primary: #e61141;
}

/* The Overlay - ensuring it IS a popup */
.glass-overlay[b-wttgh9ceis] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.compact-modal[b-wttgh9ceis] {
    background: white;
    width: 500px; /* Reduced width */
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.modal-head[b-wttgh9ceis] {
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.status-dot[b-wttgh9ceis] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
}

    .status-dot.paid[b-wttgh9ceis] {
        background: #27ae60;
    }

    .status-dot.pending[b-wttgh9ceis] {
        background: #f39c12;
    }

.head-text h6[b-wttgh9ceis] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.head-text small[b-wttgh9ceis] {
    color: #888;
    font-size: 0.75rem;
}

/* Items List */
.mini-row[b-wttgh9ceis] {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    font-size: 0.85rem;
    color: #444;
}

.q[b-wttgh9ceis] {
    font-weight: bold;
    color: var(--primary);
    margin-right: 5px;
}

.n[b-wttgh9ceis] {
    flex-grow: 1;
}

/* Empty Animated Icon */
.empty-anim-container[b-wttgh9ceis] {
    padding: 30px;
    text-align: center;
    color: #ccc;
}

.pulse-icon[b-wttgh9ceis] {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    background: #fdf2f4;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-red-b-wttgh9ceis 2s infinite;
}

@keyframes pulse-red-b-wttgh9ceis {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(230, 17, 65, 0.4);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(230, 17, 65, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(230, 17, 65, 0);
    }
}

/* Footer & Reduced Value Size */
.modal-foot[b-wttgh9ceis] {
    padding: 12px 15px;
    background: #fafafa;
    border-radius: 0 0 16px 16px;
}

.total-line[b-wttgh9ceis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .total-line span[b-wttgh9ceis] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #777;
    }

.val-small[b-wttgh9ceis] {
    font-size: 1.1rem; /* Reduced from 2rem */
    font-weight: 800;
    color: var(--primary);
}

    .val-small small[b-wttgh9ceis] {
        font-size: 0.7rem;
        margin-left: 2px;
    }

/* Entry Animation */
.animate-pop[b-wttgh9ceis] {
    animation: popIn-b-wttgh9ceis 0.2s ease-out;
}

@keyframes popIn-b-wttgh9ceis {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.close-btn-enhanced[b-wttgh9ceis] {
    margin-left: auto;
    background: #f8f9fa; /* Very light gray */
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

    .close-btn-enhanced:hover[b-wttgh9ceis] {
        background: #ffebee; /* Soft red tint */
        color: #e61141; /* Your primary color */
        transform: rotate(90deg); /* Subtle playful animation */
    }

    .close-btn-enhanced:active[b-wttgh9ceis] {
        transform: scale(0.9); /* Click feedback */
    }

    /* Ensure the button doesn't have a blue outline on click */
    .close-btn-enhanced:focus[b-wttgh9ceis] {
        outline: none;
    }
/* /Components/Pages/PersonalTrainings/MemberPersonalTrainings/MemberPersonalTrainingRoot.razor.rz.scp.css */
.loader[b-9dym0zd255] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-9dym0zd255 1s infinite linear;
}

@keyframes l7-b-9dym0zd255 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-9dym0zd255] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-9dym0zd255] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-9dym0zd255],
    .btn-orange:focus[b-9dym0zd255],
    .btn-orange:active[b-9dym0zd255] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-9dym0zd255] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-9dym0zd255] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-9dym0zd255] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-9dym0zd255] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-9dym0zd255] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-9dym0zd255] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-9dym0zd255] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-9dym0zd255] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-9dym0zd255] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-9dym0zd255] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-9dym0zd255],
.focus-ring-orange:focus[b-9dym0zd255] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-9dym0zd255] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-9dym0zd255] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-9dym0zd255]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-9dym0zd255]::after {
    animation: ripple-b-9dym0zd255 1s ease-out;
}

@keyframes ripple-b-9dym0zd255 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-9dym0zd255] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-9dym0zd255] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-9dym0zd255] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-9dym0zd255] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-9dym0zd255] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-9dym0zd255] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-9dym0zd255] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-9dym0zd255],
.btn-custom-secondary[b-9dym0zd255],
.btn-custom-danger[b-9dym0zd255] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/PersonalTrainings/PersonalTrainingPackages/PersonalTrainingPackageRoot.razor.rz.scp.css */
.loader[b-brjqsbg3yl] {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#e61141 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7-b-brjqsbg3yl 1s infinite linear;
}

@keyframes l7-b-brjqsbg3yl {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}

:root[b-brjqsbg3yl] {
    --primary-orange: #e61141;
    --orange-light: #ffe4ed;
    --orange-dark: #c50f34;
    --orange-subtle: #fcb2c9;
}

.btn-orange[b-brjqsbg3yl] {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    position: relative;
    overflow: hidden;
}

    .btn-orange:hover[b-brjqsbg3yl],
    .btn-orange:focus[b-brjqsbg3yl],
    .btn-orange:active[b-brjqsbg3yl] {
        background-color: #c50f34;
        border-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange[b-brjqsbg3yl] {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

    .btn-outline-orange:hover[b-brjqsbg3yl] {
        background-color: var(--primary-orange);
        color: white;
    }

.btn-orange-gradient[b-brjqsbg3yl] {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d70 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-orange-gradient:hover[b-brjqsbg3yl] {
        background: linear-gradient(135deg, #c50f34 0%, var(--primary-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(230, 17, 65, 0.3);
    }

/* Backgrounds */
.bg-orange-light[b-brjqsbg3yl] {
    background-color: var(--orange-light) !important;
}

.bg-orange[b-brjqsbg3yl] {
    background-color: var(--primary-orange) !important;
}

/* Borders */
.border-orange[b-brjqsbg3yl] {
    border-color: var(--primary-orange) !important;
}

.border-orange-subtle[b-brjqsbg3yl] {
    border-color: var(--orange-subtle) !important;
}

/* Text */
.text-orange[b-brjqsbg3yl] {
    color: var(--primary-orange) !important;
}

.text-orange-dark[b-brjqsbg3yl] {
    color: var(--orange-dark) !important;
}

/* Focus States */
.focus-orange:focus[b-brjqsbg3yl],
.focus-ring-orange:focus[b-brjqsbg3yl] {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 17, 65, 0.25) !important;
}

/* Hover Effects */
.hover-orange:hover[b-brjqsbg3yl] {
    background-color: #c50f34 !important;
    color: white !important;
}

/* Search Input Focus */
.search-container .input-group:focus-within[b-brjqsbg3yl] {
    box-shadow: 0 0 0 3px rgba(230, 17, 65, 0.15);
    border-color: var(--primary-orange) !important;
}

/* Ripple effect for orange buttons */
.btn-orange[b-brjqsbg3yl]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.btn-orange:focus:not(:active)[b-brjqsbg3yl]::after {
    animation: ripple-b-brjqsbg3yl 1s ease-out;
}

@keyframes ripple-b-brjqsbg3yl {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Custom Buttons */
.btn-custom[b-brjqsbg3yl] {
    min-width: 90px;
    margin-right: 2px;
    padding: 3px 0px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Primary button */
.btn-custom-primary[b-brjqsbg3yl] {
    background-color: var(--primary-orange);
    color: #fff;
}

    .btn-custom-primary:hover[b-brjqsbg3yl] {
        background-color: #c50f34;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Secondary button */
.btn-custom-secondary[b-brjqsbg3yl] {
    background-color: #6c757d;
    color: #fff;
}

    .btn-custom-secondary:hover[b-brjqsbg3yl] {
        background-color: #5a6268;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Danger button */
.btn-custom-danger[b-brjqsbg3yl] {
    background-color: #dc3545;
    color: #fff;
}

    .btn-custom-danger:hover[b-brjqsbg3yl] {
        background-color: #c82333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

/* Optional text shadow for readability */
.btn-custom-primary[b-brjqsbg3yl],
.btn-custom-secondary[b-brjqsbg3yl],
.btn-custom-danger[b-brjqsbg3yl] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}