/* PocketParty customer portal
 * Shared skin for overview, orders, invoices, reviews, returns, addresses,
 * loyalty points, and account settings. All rules are scoped to the portal.
 */

.bb-customer-page {
    --portal-void: #03060d;
    --portal-void-deep: #010309;
    --portal-panel: #0a1120;
    --portal-panel-raised: #111b31;
    --portal-ink: #eaf1ff;
    --portal-muted: #9aa9c4;
    --portal-yellow: #ffd600;
    --portal-blue: #2e9bff;
    --portal-cyan: #72dcff;
    --portal-green: #17d694;
    --portal-red: #ff4f62;
    --portal-line: rgba(160, 180, 220, .2);
    --portal-line-blue: rgba(46, 155, 255, .42);
    background:
        radial-gradient(circle at 88% 8%, rgba(46, 155, 255, .07), transparent 28%),
        linear-gradient(145deg, var(--portal-void), var(--portal-void-deep));
    color: var(--portal-ink);
    font-family: "Rubik", system-ui, -apple-system, sans-serif;
    min-height: calc(100vh - 72px);
    padding: 42px 0 76px;
}

.bb-customer-page *,
.bb-customer-page *::before,
.bb-customer-page *::after {
    box-sizing: border-box;
}

.bb-customer-page > .container {
    max-width: 1440px;
}

.bb-customer-page .customer-body {
    background: rgba(3, 9, 20, .88);
    border: 1px solid var(--portal-line-blue);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    min-height: 720px;
    overflow: hidden;
}

.bb-customer-page :where(h1, h2, h3, h4, h5, h6) {
    color: var(--portal-ink);
}

.bb-customer-page :where(p, .text-muted, small) {
    color: var(--portal-muted) !important;
}

.bb-customer-page a {
    color: var(--portal-blue);
}

.bb-customer-page a:hover {
    color: var(--portal-cyan);
}

.bb-customer-page :focus-visible {
    outline: 2px solid var(--portal-blue) !important;
    outline-offset: 3px;
}

/* Account rail */
.bb-customer-page .bb-customer-sidebar-wrapper {
    background:
        linear-gradient(180deg, rgba(46, 155, 255, .055), transparent 36%),
        #06101e;
    border-inline-end: 1px solid var(--portal-line-blue);
    min-height: 100%;
}

.bb-customer-page .bb-customer-sidebar-heading {
    background: #081427 !important;
    border-bottom: 1px solid var(--portal-line-blue);
    min-height: 132px;
}

.bb-customer-page .bb-customer-sidebar-heading .wrapper-image {
    background: linear-gradient(145deg, #8d7200, #3a3100);
    border: 2px solid var(--portal-yellow);
    box-shadow: 0 0 0 4px rgba(255, 214, 0, .07);
    height: 66px;
    overflow: hidden;
    width: 66px;
}

.bb-customer-page .bb-customer-sidebar-heading .wrapper-image img {
    border: 0 !important;
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bb-customer-page .bb-customer-sidebar-heading .name {
    color: var(--portal-ink);
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 11px;
    font-weight: 400 !important;
    letter-spacing: .035em;
}

.bb-customer-page .bb-customer-sidebar-heading .email {
    color: var(--portal-muted) !important;
    font-size: 12px;
}

.bb-customer-page .bb-customer-navigation {
    padding: 22px 20px 36px !important;
}

.bb-customer-page .bb-customer-navigation .nav {
    gap: 5px !important;
    margin-top: 0 !important;
}

.bb-customer-page .bb-customer-navigation .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    color: #adc0df;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    min-height: 48px;
    padding: 11px 15px !important;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.bb-customer-page .bb-customer-navigation .nav-link .nav-icon {
    color: #86a6d3;
    height: 20px;
    stroke-width: 1.7;
    width: 20px;
}

.bb-customer-page .bb-customer-navigation .nav-link:hover {
    background: rgba(46, 155, 255, .08);
    border-color: var(--portal-line-blue);
    color: var(--portal-ink);
    transform: translateX(3px);
}

.bb-customer-page .bb-customer-navigation .nav-link.active {
    background: var(--portal-yellow) !important;
    border-color: var(--portal-yellow) !important;
    box-shadow: 0 8px 24px rgba(255, 214, 0, .1);
    color: #111000 !important;
}

.bb-customer-page .bb-customer-navigation .nav-link.active .nav-icon {
    color: #111000;
}

/* Main portal canvas */
.bb-customer-page .bb-profile-content {
    background:
        linear-gradient(90deg, rgba(46, 155, 255, .025), transparent 22%),
        var(--portal-void-deep) !important;
    min-height: 720px;
    padding: 42px clamp(24px, 4vw, 58px) 58px !important;
}

.bb-customer-page .bb-profile-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 214, 0, .65);
    display: flex;
    margin-bottom: 30px;
    min-height: 70px;
    padding: 0 0 20px;
    position: relative;
}

.bb-customer-page .bb-profile-header::after {
    border-right: 1px solid var(--portal-yellow);
    border-top: 1px solid var(--portal-yellow);
    bottom: -7px;
    content: "";
    height: 13px;
    position: absolute;
    right: 0;
    transform: skewX(45deg);
    width: 13px;
}

.bb-customer-page .bb-profile-header-title {
    color: var(--portal-ink) !important;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(38px, 4vw, 58px) !important;
    font-style: italic;
    letter-spacing: .005em;
    line-height: .95;
    text-shadow: 3px 4px 0 rgba(76, 101, 142, .32);
    text-transform: uppercase;
}

.bb-customer-page .bb-profile-main {
    padding: 0 !important;
}

/* Shared angular panels */
.bb-customer-page :where(.bb-customer-card, .bb-customer-profile, .bb-payment-proof-card, .bb-order-detail-card, .panel, .card) {
    background:
        linear-gradient(145deg, rgba(17, 27, 49, .92), rgba(5, 13, 27, .98)) !important;
    border: 1px solid var(--portal-line-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    color: var(--portal-ink);
    overflow: hidden;
}

.bb-customer-page :where(.bb-customer-card-header, .card-header) {
    background: rgba(46, 155, 255, .035) !important;
    border-bottom: 1px solid var(--portal-line) !important;
    padding: 20px 22px !important;
}

.bb-customer-page :where(.bb-customer-card-body, .card-body, .panel-body) {
    background: transparent !important;
    color: var(--portal-muted);
    padding: 22px !important;
}

.bb-customer-page :where(.bb-customer-card-footer, .card-footer) {
    background: rgba(1, 5, 12, .5) !important;
    border-top: 1px solid var(--portal-line) !important;
    padding: 15px 22px !important;
}

.bb-customer-page .bb-customer-card-title,
.bb-customer-page .card-title {
    color: var(--portal-ink) !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .035em;
    line-height: 1.45;
}

.bb-customer-page .bb-customer-card-list {
    gap: 18px;
}

.bb-customer-page .bb-customer-card-list > .bb-customer-card,
.bb-customer-page .bb-customer-card-list > .row > * {
    margin-bottom: 0;
}

.bb-customer-page .bb-customer-card-list .info-item {
    color: var(--portal-muted);
}

.bb-customer-page .bb-customer-card-list .info-item .label {
    color: #7f93b3 !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bb-customer-page .bb-customer-card-list .info-item .value {
    color: var(--portal-ink) !important;
    font-weight: 600;
}

/* Overview */
.bb-customer-page .bb-customer-profile-wrapper {
    margin-bottom: 24px;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile {
    margin: 0;
    padding: 32px 38px;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-avatar {
    height: 108px;
    margin: 0;
    width: 108px;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-avatar-img {
    background: linear-gradient(145deg, #8d7200, #3b3100);
    border: 3px solid var(--portal-yellow) !important;
    border-radius: 50%;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-avatar-overlay {
    background: #061126;
    border: 2px solid var(--portal-blue);
    height: 34px;
    width: 34px;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-info {
    border-inline-start: 1px solid var(--portal-line-blue);
    padding-inline-start: 38px;
    text-align: start !important;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-info h2 {
    color: var(--portal-ink);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-style: italic;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-info p {
    font-size: 15px;
    line-height: 1.65;
}

.bb-customer-page .bb-profile-main > .row.g-4 {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
}

.bb-customer-page .bb-profile-main > .row.g-4 .card {
    min-height: 250px;
}

.bb-customer-page .bb-profile-main > .row.g-4 .card-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 24px !important;
}

.bb-customer-page .bb-profile-main > .row.g-4 .rounded-circle,
.bb-customer-page .dashboard-address .rounded-circle,
.bb-customer-page .bb-empty .rounded-circle,
.bb-customer-page .account-settings-cards .rounded-circle {
    background: #071327 !important;
    border: 1px solid var(--portal-blue);
    border-radius: 0 !important;
    clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
    color: var(--portal-blue) !important;
}

.bb-customer-page .bb-profile-main > .row.g-4 > :nth-child(2) .rounded-circle {
    border-color: var(--portal-green);
    color: var(--portal-green) !important;
}

.bb-customer-page .bb-profile-main > .row.g-4 > :nth-child(3) .rounded-circle {
    border-color: var(--portal-yellow);
    color: var(--portal-yellow) !important;
}

/* Buttons */
.bb-customer-page .btn {
    align-items: center;
    border-radius: 0 !important;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    display: inline-flex;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 10px;
    font-weight: 400;
    gap: 7px;
    justify-content: center;
    letter-spacing: .07em;
    min-height: 42px;
    padding: 10px 18px;
    text-transform: uppercase;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.bb-customer-page .btn:hover {
    transform: translateY(-2px);
}

.bb-customer-page :where(.btn-primary, .btn-warning, .btn-success) {
    background: var(--portal-yellow) !important;
    border: 1px solid var(--portal-yellow) !important;
    color: #111000 !important;
}

.bb-customer-page :where(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-secondary) {
    background: transparent !important;
    border: 1px solid var(--portal-blue) !important;
    color: var(--portal-cyan) !important;
}

.bb-customer-page :where(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-secondary):hover {
    background: rgba(46, 155, 255, .12) !important;
    color: #fff !important;
}

.bb-customer-page :where(.btn-danger, .btn-outline-danger) {
    background: transparent !important;
    border: 1px solid var(--portal-red) !important;
    color: #ff8390 !important;
}

.bb-customer-page :where(.btn-danger, .btn-outline-danger):hover {
    background: rgba(255, 79, 98, .13) !important;
    color: #fff !important;
}

/* Empty and informational states */
.bb-customer-page .bb-profile-main > .card:not(.bb-customer-card) {
    margin-top: 24px;
}

.bb-customer-page .bb-empty {
    background:
        linear-gradient(145deg, rgba(17, 27, 49, .92), rgba(5, 13, 27, .98));
    border: 1px solid var(--portal-line-blue);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    min-height: 350px;
}

.bb-customer-page .bb-empty-title {
    color: var(--portal-ink) !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 16px !important;
    font-weight: 400;
}

.bb-customer-page .bb-empty-img svg {
    color: var(--portal-blue);
    height: 60px;
    width: 60px;
}

/* Forms and settings */
.bb-customer-page :where(.form-label, label) {
    color: #b9c8df !important;
    font-size: 12px;
    font-weight: 600;
}

.bb-customer-page :where(.form-control, .form-select, input:not([type=checkbox]):not([type=radio]), textarea, select) {
    background: #050b16 !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 0 !important;
    color: var(--portal-ink) !important;
    min-height: 48px;
}

.bb-customer-page :where(.form-control, .form-select, input, textarea, select):focus {
    border-color: var(--portal-blue) !important;
    box-shadow: 0 0 0 3px rgba(46, 155, 255, .14) !important;
}

.bb-customer-page :where(input, textarea)::placeholder {
    color: #60728f !important;
}

.bb-customer-page .form-check-input {
    background-color: #050b16;
    border: 1px solid #647796;
}

.bb-customer-page .form-check-input:checked {
    background-color: var(--portal-yellow);
    border-color: var(--portal-yellow);
}

.bb-customer-page .account-settings-cards {
    display: grid;
    gap: 22px;
}

.bb-customer-page .delete-account-card {
    border-color: rgba(255, 79, 98, .42) !important;
}

.bb-customer-page .nav-tabs {
    border-bottom: 1px solid var(--portal-line-blue);
    gap: 8px;
}

.bb-customer-page .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--portal-muted);
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 10px;
    letter-spacing: .07em;
    padding: 14px 18px;
    text-transform: uppercase;
}

.bb-customer-page .nav-tabs .nav-link.active {
    background: rgba(255, 214, 0, .06);
    border-bottom-color: var(--portal-yellow);
    color: var(--portal-yellow);
}

/* Lists, tables, badges and pagination */
.bb-customer-page .table-responsive {
    background: transparent !important;
    border: 1px solid var(--portal-line-blue) !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.bb-customer-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--portal-ink);
    --bs-table-border-color: var(--portal-line);
    color: var(--portal-ink) !important;
    margin: 0;
}

.bb-customer-page .table thead th {
    background: #081427 !important;
    border-color: var(--portal-line) !important;
    color: var(--portal-yellow) !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .07em;
    padding: 15px;
    text-transform: uppercase;
}

.bb-customer-page .table tbody :where(td, th) {
    background: transparent !important;
    border-color: var(--portal-line) !important;
    color: var(--portal-ink) !important;
    padding: 15px;
}

.bb-customer-page .badge {
    background: rgba(46, 155, 255, .12) !important;
    border: 1px solid var(--portal-line-blue);
    border-radius: 0 !important;
    color: var(--portal-cyan) !important;
    font-size: 10px;
    letter-spacing: .04em;
    padding: 6px 9px;
}

.bb-customer-page .pagination {
    gap: 6px;
}

.bb-customer-page .page-link {
    background: var(--portal-panel) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 0 !important;
    color: var(--portal-muted) !important;
}

.bb-customer-page .active > .page-link,
.bb-customer-page .page-link:hover {
    background: var(--portal-yellow) !important;
    border-color: var(--portal-yellow) !important;
    color: #111000 !important;
}

/* Order, invoice, review and return details */
.bb-customer-page :where(.order-card, .invoice-card, .product-review-card, .order-return-card) {
    margin-bottom: 18px;
}

.bb-customer-page :where(.bb-order-info, .bb-order-products, .bb-order-shipping, .bb-order-payment, .bb-payment-proof-card, .return-reason-section, .return-product-card, .info-item) {
    border-color: var(--portal-line) !important;
}

.bb-customer-page :where(.bb-file-label, .bb-payment-proof-card-file, .return-reason-section, .return-product-card .info-item) {
    background: rgba(46, 155, 255, .045) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 0 !important;
    color: var(--portal-muted) !important;
}

.bb-customer-page .product-reviews-cards .bb-customer-card-image,
.bb-customer-page .return-product-image,
.bb-customer-page .return-item-image {
    background: #eef3f8;
    border-color: var(--portal-line-blue) !important;
    border-radius: 0 !important;
}

/* Order detail: override the ecommerce light surface and restore readable type. */
.bb-customer-page .bb-customer-content-wrapper:has(.customer-order-detail) {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.bb-customer-page .customer-order-detail {
    color: var(--portal-ink);
    display: grid;
    gap: 20px;
}

.bb-customer-page .customer-order-detail .bb-order-detail-wrapper {
    display: grid;
    gap: 20px;
}

.bb-customer-page .customer-order-detail .bb-order-detail-wrapper > .card,
.bb-customer-page .customer-order-detail > .card,
.bb-customer-page .customer-order-detail > .bb-payment-proof-card {
    background:
        linear-gradient(145deg, rgba(24, 37, 66, .96), rgba(7, 16, 31, .99)) !important;
    border: 1px solid rgba(76, 166, 255, .62) !important;
    box-shadow: 8px 9px 0 rgba(0, 0, 0, .2) !important;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    color: var(--portal-ink) !important;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
}

.bb-customer-page .customer-order-detail .bb-order-detail-wrapper > .card::before,
.bb-customer-page .customer-order-detail > .bb-payment-proof-card::before,
.bb-customer-page .customer-order-detail > .card::before {
    background: linear-gradient(90deg, var(--portal-yellow) 0 82px, var(--portal-blue) 82px 148px, transparent 148px);
    content: "";
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
    z-index: 2;
}

.bb-customer-page .customer-order-detail .card > .card-body {
    background: transparent !important;
    color: var(--portal-ink) !important;
    padding: 30px 32px !important;
}

.bb-customer-page .customer-order-detail .bb-order-info > .row {
    --bs-gutter-x: 44px;
    --bs-gutter-y: 28px;
}

.bb-customer-page .customer-order-detail :where(.bb-order-info-section, .bb-order-address-section) {
    height: 100%;
}

.bb-customer-page .customer-order-detail .bb-section-title {
    border-bottom: 1px solid rgba(126, 164, 211, .42) !important;
    color: #f5f8ff !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: .025em;
    line-height: 1.35;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    text-transform: uppercase;
}

.bb-customer-page .customer-order-detail .bb-order-info-list {
    display: grid;
    gap: 0;
}

.bb-customer-page .customer-order-detail .bb-order-info-item {
    align-items: start;
    border-bottom: 1px solid rgba(160, 180, 220, .1);
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(118px, .72fr) minmax(0, 1.28fr);
    margin: 0;
    min-height: 45px;
    padding: 10px 0;
}

.bb-customer-page .customer-order-detail .bb-order-info-item:last-child {
    border-bottom: 0;
}

.bb-customer-page .customer-order-detail .bb-order-info-item .label {
    color: #aebed7 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .015em;
    line-height: 1.55;
    min-width: 0;
}

.bb-customer-page .customer-order-detail .bb-order-info-item .value {
    color: #f3f7ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
    word-break: normal;
}

.bb-customer-page .customer-order-detail .bb-order-info-item .value a {
    color: #63b9ff !important;
    text-decoration-color: rgba(99, 185, 255, .45);
    text-underline-offset: 3px;
}

.bb-customer-page .customer-order-detail .bb-order-info-item .value a:hover {
    color: #a3ddff !important;
}

.bb-customer-page .customer-order-detail .bb-order-info-item .badge {
    color: var(--portal-cyan) !important;
    font-size: 10px !important;
    padding: 6px 10px;
}

.bb-customer-page .customer-order-detail .bb-order-product-card {
    background: rgba(2, 8, 18, .58) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 0 !important;
    color: var(--portal-ink) !important;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-content {
    gap: 18px;
    padding: 18px;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-image img {
    background: #020812;
    border: 1px solid var(--portal-line-blue);
    border-radius: 0;
    height: 88px;
    object-fit: contain;
    width: 88px;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-name,
.bb-customer-page .customer-order-detail .bb-order-product-card-name a {
    color: #f3f7ff !important;
}

.bb-customer-page .customer-order-detail :where(.bb-order-product-card-sku, .bb-order-product-card-meta, .bb-order-product-card-attributes) {
    color: #aebed7 !important;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-price-item {
    gap: 20px;
    padding: 4px 0;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-price-item .label,
.bb-customer-page .customer-order-detail .bb-order-totals .label {
    color: #aebed7 !important;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-price-item .value,
.bb-customer-page .customer-order-detail .bb-order-totals .value {
    color: #f3f7ff !important;
}

.bb-customer-page .customer-order-detail .bb-order-product-card-price-item.total,
.bb-customer-page .customer-order-detail .bb-order-totals {
    border-color: var(--portal-line) !important;
}

.bb-customer-page .customer-order-detail .bb-order-totals .bb-order-total-item {
    border-color: rgba(160, 180, 220, .14) !important;
    padding: 10px 0;
}

.bb-customer-page .customer-order-detail .bb-order-totals .grand-total .label {
    color: var(--portal-ink) !important;
}

.bb-customer-page .customer-order-detail .bb-order-totals .grand-total .value,
.bb-customer-page .customer-order-detail .bb-order-product-card-price-item.total .value {
    color: var(--portal-yellow) !important;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-content {
    background: transparent !important;
    color: var(--portal-ink) !important;
    gap: 20px;
    padding: 30px 32px !important;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-icon {
    background: #061226 !important;
    border: 1px solid var(--portal-blue);
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    height: 52px;
    width: 52px;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-icon .payment-icon {
    color: var(--portal-cyan) !important;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-title {
    color: #f5f8ff !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 15px !important;
    font-weight: 400;
    letter-spacing: .025em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-message,
.bb-customer-page .customer-order-detail .bb-payment-proof-card-message p {
    color: #c3d0e4 !important;
    font-size: 13px;
    line-height: 1.65;
}

.bb-customer-page .customer-order-detail .bb-file-upload-wrapper {
    align-items: stretch;
    gap: 12px;
}

.bb-customer-page .customer-order-detail .bb-file-label {
    background: rgba(46, 155, 255, .055) !important;
    border: 1px dashed rgba(99, 185, 255, .55) !important;
    color: #dce7f7 !important;
    min-height: 64px;
    padding: 11px 14px;
}

.bb-customer-page .customer-order-detail .bb-file-label:hover {
    background: rgba(46, 155, 255, .1) !important;
    border-color: var(--portal-blue) !important;
}

.bb-customer-page .customer-order-detail .bb-file-icon {
    color: var(--portal-blue) !important;
}

.bb-customer-page .customer-order-detail .bb-file-placeholder,
.bb-customer-page .customer-order-detail .bb-file-name {
    color: #dce7f7 !important;
    font-size: 13px;
    font-weight: 600;
}

.bb-customer-page .customer-order-detail .bb-file-button {
    background: #13233d !important;
    border: 1px solid rgba(99, 185, 255, .42);
    border-radius: 0 !important;
    color: #dce7f7 !important;
}

.bb-customer-page .customer-order-detail .bb-payment-proof-card-upload > .text-muted,
.bb-customer-page .customer-order-detail .bb-payment-proof-card-upload small {
    color: #aebed7 !important;
    font-size: 11px;
    line-height: 1.5;
    margin-top: 10px !important;
}

.bb-customer-page .customer-order-detail > .card.mt-3 {
    margin-top: 0 !important;
}

.bb-customer-page .customer-order-detail > .card.mt-3 .card-body {
    padding: 25px 28px !important;
}

.bb-customer-page .customer-order-detail > .card.mt-3 h3 {
    color: #f5f8ff !important;
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: .03em;
    margin-bottom: 20px !important;
    text-transform: uppercase;
}

.bb-customer-page .customer-order-detail > .card.mt-3 .row {
    row-gap: 18px;
}

.bb-customer-page .customer-order-detail > .card.mt-3 .text-muted {
    color: #aebed7 !important;
    font-size: 11px !important;
}

.bb-customer-page .customer-order-detail > .card.mt-3 .fw-semibold {
    color: var(--portal-yellow) !important;
    font-size: 16px;
    margin-top: 5px;
}

.bb-customer-page .customer-order-detail .bb-order-actions {
    gap: 11px !important;
    margin: 0 !important;
    padding-top: 2px;
}

.bb-customer-page .customer-order-detail .bb-order-actions .btn {
    min-height: 48px;
    padding-inline: 20px;
}

@media (max-width: 767.98px) {
    .bb-customer-page .customer-order-detail,
    .bb-customer-page .customer-order-detail .bb-order-detail-wrapper {
        gap: 15px;
    }

    .bb-customer-page .customer-order-detail .card > .card-body,
    .bb-customer-page .customer-order-detail .bb-payment-proof-card-content {
        padding: 23px 19px !important;
    }

    .bb-customer-page .customer-order-detail .bb-order-info-item {
        gap: 4px;
        grid-template-columns: 1fr;
        padding: 11px 0;
    }

    .bb-customer-page .customer-order-detail .bb-order-info-item .value {
        text-align: left;
    }

    .bb-customer-page .customer-order-detail .bb-order-product-card-content {
        padding: 15px;
    }

    .bb-customer-page .customer-order-detail .bb-payment-proof-card-icon {
        margin: 0;
    }

    .bb-customer-page .customer-order-detail .bb-payment-proof-card-title {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .bb-customer-page .customer-order-detail .bb-order-product-card-info {
        min-width: 0;
        width: 100%;
    }

    .bb-customer-page .customer-order-detail > .card.mt-3 .row {
        gap: 16px;
    }
}

/* Alerts and modals */
.bb-customer-page .alert {
    background: rgba(255, 214, 0, .055) !important;
    border: 1px solid rgba(255, 214, 0, .3) !important;
    border-radius: 0 !important;
    color: #d9e4f7 !important;
}

.bb-customer-page .alert-danger {
    background: rgba(255, 79, 98, .07) !important;
    border-color: rgba(255, 79, 98, .4) !important;
}

.bb-customer-page .modal-content {
    background: var(--portal-panel) !important;
    border: 1px solid var(--portal-line-blue) !important;
    border-radius: 0 !important;
    color: var(--portal-ink);
}

.bb-customer-page :where(.modal-header, .modal-footer) {
    border-color: var(--portal-line) !important;
}

.bb-customer-page .btn-close {
    filter: invert(1) grayscale(1);
}

/* Loyalty points: override the plugin's light inline theme. */
.bb-customer-page .bb-profile-content:has(.lp-dashboard) {
    background: var(--portal-void-deep) !important;
}

.bb-customer-page .lp-dashboard {
    color: var(--portal-ink) !important;
    max-width: none !important;
}

.bb-customer-page .lp-dashboard-card,
.bb-customer-page .lp-dashboard-hero,
.bb-customer-page .lp-transaction-list {
    background: linear-gradient(145deg, rgba(17, 27, 49, .92), rgba(5, 13, 27, .98)) !important;
    border: 1px solid var(--portal-line-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--portal-ink) !important;
}

.bb-customer-page .lp-dashboard-hero {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    padding: 30px !important;
}

.bb-customer-page .lp-dashboard-title {
    color: var(--portal-ink) !important;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    font-style: italic;
    text-transform: uppercase;
}

.bb-customer-page .lp-top-rule,
.bb-customer-page .lp-loyalty-card-header,
.bb-customer-page .lp-loyalty-card-footer,
.bb-customer-page .lp-benefits-list li,
.bb-customer-page .lp-transaction-row {
    border-color: var(--portal-line) !important;
}

.bb-customer-page :where(.lp-stat-label, .lp-stat-note, .lp-transaction-meta, .lp-loyalty-card-footer) {
    color: var(--portal-muted) !important;
}

.bb-customer-page .lp-stat-value,
.bb-customer-page .lp-transaction-title,
.bb-customer-page .lp-transaction-points,
.bb-customer-page .lp-section-label {
    color: var(--portal-ink) !important;
}

.bb-customer-page .lp-stat-icon,
.bb-customer-page .lp-level-badge,
.bb-customer-page .lp-transaction-icon {
    background: #071327 !important;
    border: 1px solid var(--portal-blue);
    border-radius: 0 !important;
    clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
    color: var(--portal-blue) !important;
}

.bb-customer-page .lp-level-card {
    background: rgba(255, 214, 0, .065) !important;
    border: 1px solid rgba(255, 214, 0, .32);
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.bb-customer-page .lp-level-card::after {
    border-color: rgba(255, 214, 0, .09) !important;
}

.bb-customer-page .lp-card-brand {
    background: transparent !important;
    color: var(--portal-cyan) !important;
    font-family: "Bungee", "Rubik", sans-serif;
}

.bb-customer-page .lp-tier-pill {
    background: var(--portal-yellow) !important;
    border-radius: 0 !important;
    color: #111000 !important;
}

.bb-customer-page .lp-progress-bar {
    background: #111b31 !important;
    border-radius: 0 !important;
}

.bb-customer-page .lp-progress-fill {
    background: linear-gradient(90deg, var(--portal-blue), var(--portal-cyan)) !important;
    border-radius: 0 !important;
}

.bb-customer-page code {
    background: rgba(46, 155, 255, .1);
    color: var(--portal-cyan);
    padding: 3px 6px;
}

/* Mobile portal header and drawer */
.bb-customer-page .customer-body > .d-lg-none {
    background: #06101e !important;
    border-color: var(--portal-line-blue) !important;
    color: var(--portal-ink);
}

.bb-customer-page .customer-body > .d-lg-none > .d-flex {
    flex-wrap: nowrap;
    gap: 12px;
}

.bb-customer-page .customer-body > .d-lg-none .wrapper-image {
    flex: 0 0 40px;
    height: 40px !important;
    width: 40px !important;
}

.bb-customer-page .customer-body > .d-lg-none .fw-semibold {
    color: var(--portal-ink);
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 10px;
    font-weight: 400 !important;
    line-height: 1.4;
}

.bb-customer-page .customer-body > .d-lg-none .btn {
    flex: 0 0 44px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    width: 44px !important;
}

.bb-customer-page .customer-body > .d-lg-none .wrapper-image {
    border: 1px solid var(--portal-yellow);
    border-radius: 50%;
    overflow: hidden;
}

.bb-customer-page .offcanvas {
    background: #06101e;
    border-color: var(--portal-line-blue);
    color: var(--portal-ink);
}

.bb-customer-page .offcanvas-header {
    border-color: var(--portal-line-blue) !important;
}

.bb-customer-page .offcanvas-title {
    color: var(--portal-ink);
    font-family: "Bungee", "Rubik", sans-serif;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .bb-customer-page {
        min-height: auto;
        padding: 22px 0 52px;
    }

    .bb-customer-page > .container {
        max-width: 100%;
        padding-inline: 16px;
    }

    .bb-customer-page .customer-body {
        min-height: 0;
    }

    .bb-customer-page .bb-profile-content {
        min-height: 0;
        padding: 28px 22px 40px !important;
    }

    .bb-customer-page .bb-profile-header-title {
        font-size: 42px !important;
    }

    .bb-customer-page .bb-customer-sidebar-wrapper {
        border-inline-end: 0;
    }

    .bb-customer-page .lp-stat-grid,
    .bb-customer-page .lp-progress-wrap,
    .bb-customer-page .lp-info-grid,
    .bb-customer-page .lp-loyalty-card-body {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    .bb-customer-page .bb-profile-content {
        padding: 25px 16px 34px !important;
    }

    .bb-customer-page .bb-profile-header {
        margin-bottom: 22px;
        min-height: 58px;
    }

    .bb-customer-page .bb-profile-header-title {
        font-size: 36px !important;
    }

    .bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile {
        padding: 24px 20px;
    }

    .bb-customer-page .bb-customer-profile-wrapper .row {
        gap: 22px;
    }

    .bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-avatar {
        height: 86px;
        margin: 0 auto;
        width: 86px;
    }

    .bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-info {
        border-inline-start: 0;
        border-top: 1px solid var(--portal-line-blue);
        padding-inline-start: 0;
        padding-top: 22px;
        text-align: center !important;
    }

    .bb-customer-page .bb-customer-profile-wrapper .bb-customer-profile-info h2 {
        font-size: 30px;
    }

    .bb-customer-page .bb-profile-main > .row.g-4 .card {
        min-height: 0;
    }

    .bb-customer-page .table-responsive .table tbody tr {
        background: var(--portal-panel) !important;
        border: 1px solid var(--portal-line) !important;
        border-radius: 0 !important;
    }

    .bb-customer-page .table-responsive .table tbody tr td::before {
        color: var(--portal-muted) !important;
    }

    .bb-customer-page .lp-dashboard-hero {
        padding: 22px 18px !important;
    }
}

@media (max-width: 575.98px) {
    .bb-customer-page > .container {
        padding-inline: 10px;
    }

    .bb-customer-page .customer-body,
    .bb-customer-page :where(.bb-customer-card, .bb-customer-profile, .card, .bb-empty) {
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    .bb-customer-page .bb-customer-card-header,
    .bb-customer-page .bb-customer-card-body,
    .bb-customer-page .bb-customer-card-footer,
    .bb-customer-page .card-body {
        padding-inline: 16px !important;
    }

    .bb-customer-page .btn {
        width: 100%;
    }

    .bb-customer-page .bb-customer-card-footer {
        align-items: stretch !important;
        flex-direction: column;
        gap: 9px;
    }

    .bb-customer-page .lp-member-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-customer-page *,
    .bb-customer-page *::before,
    .bb-customer-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}