/* ***** Common Css **** */

:root {
    scroll-behavior: initial;
    --admin-header-height: 75px;
    --admin-mobile-header-height: 60px;
    --font-app: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --color-brand: #35196E;
    --color-brand-mid: #4a2a8a;
    --color-brand-deep: #2a1458;
    /* Marketing accent (matches .jg-home / pricing) */
    --site-secondary: #7c3aed;
    --site-violet-mid: #6d28d9;
    --site-light: #f8f7ff;
    --site-muted: rgba(31, 20, 55, 0.72);
    /* Dashboard sidebar active / accent (backend UI) */
    --color-admin-accent: #0D3474;
    --btn-pill-radius: 9999px;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.container-fluid{
    zoom: 90%;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

ol,
ul {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

a,
button {
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
    text-decoration: none;
}

body {
    font-family: var(--font-app);
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

input,
select,
textarea,
.form-control,
.btn {
    font-family: var(--font-app);
}

/* Global primary CTA — pill, glass, brand purple */
.btn-main,
a.btn-main,
button.btn-main {
    font-family: var(--font-app);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.5rem;
    /* min-height: 2.75rem; */
    width: auto;
    max-width: 100%;
    border-radius: var(--btn-pill-radius);
    border: 1px solid rgba(255, 255, 255, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%);
    color: #fff !important;
    box-shadow:
        0 2px 12px rgba(53, 25, 110, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.35;
}

.btn-main:hover {
    color: #fff !important;
    filter: brightness(1.05);
    box-shadow:
        0 4px 16px rgba(53, 25, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.btn-main:focus-visible {
    outline: 2px solid rgba(53, 25, 110, 0.45);
    outline-offset: 3px;
}

.btn-main:disabled,
.btn-main.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Bootstrap buttons: pill + brand primary */
.btn:not(.btn-link):not(.btn-close) {
    border-radius: var(--btn-pill-radius);
}

.btn-group > .btn,
.btn-group-vertical > .btn {
    border-radius: 0 !important;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--btn-pill-radius) !important;
    border-bottom-left-radius: var(--btn-pill-radius) !important;
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--btn-pill-radius) !important;
    border-bottom-right-radius: var(--btn-pill-radius) !important;
}

.btn-group > .btn:only-child {
    border-radius: var(--btn-pill-radius) !important;
}

.btn-group-vertical > .btn:first-child {
    border-radius: var(--btn-pill-radius) var(--btn-pill-radius) 0 0 !important;
}

.btn-group-vertical > .btn:last-child {
    border-radius: 0 0 var(--btn-pill-radius) var(--btn-pill-radius) !important;
}

.btn-primary {
    font-weight: 500;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow:
        0 2px 12px rgba(53, 25, 110, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover,
.btn-primary:focus {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%),
        #452694;
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

.main-wrpper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Admin panel: allow page scroll; home/marketing layout keeps overflow hidden */
.main-wrpper:not(.home-page) {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 100vh;
}

.home-page .container {
    max-width: 1440px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-app);
}

.main-part-body {
    font-weight: 400;
}

/* Responsive form layout — label + field columns (sm full stack, md 4/8, lg 3/9, xl 2/10) */
.main-part-body .form-group .row,
.recharge-now-modal .form-group .row {
    row-gap: 0.5rem;
}

.main-part-body .form-group .form-control,
.main-part-body .form-group select.form-control,
.main-part-body .form-group textarea.form-control,
.recharge-now-modal .form-group .form-control,
.recharge-now-modal .form-group select.form-control,
.recharge-now-modal .form-group textarea.form-control {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .main-part-body .form-group .row.align-items-center,
    .recharge-now-modal .form-group .row.align-items-center {
        align-items: flex-start !important;
    }

    .main-part-body .form-group label.m-0,
    .recharge-now-modal .form-group label.m-0 {
        margin-bottom: 0.35rem !important;
    }
}


/* ***** End Common Css **** */


/* **** Header **** */

header {
    top: 0px;
    left: 0;
    right: 0;
    background: #FDFDFD;
    padding: 15px;
    z-index: 120;
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
}

/* Admin dashboard header — stays fixed while content scrolls */
.main-wrpper:not(.home-page) > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.nav-row {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.logo-box img {
    height: 45px;
}

.overflow-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    z-index: 120;
    display: none;
}

/* Customer dashboard — KYC status pill button (users.kyc_status) */
.header-kyc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem 0.5rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border: 2px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease, filter 0.25s ease;
}

.header-kyc-btn:hover {
    text-decoration: none;
    filter: brightness(1.03);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

.header-kyc-btn--zoom {
    animation: header-kyc-zoom 2.2s ease-in-out infinite;
}

.header-kyc-btn--zoom:hover {
    animation-play-state: paused;
    transform: scale(1.05);
}

.header-kyc-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.header-kyc-btn__label {
    padding-right: 0.15rem;
}

.header-kyc-btn.kyc-status--pending {
    background: rgba(239, 206, 47, 0.16);
    color: #7a6a12;
    border-color: rgba(239, 206, 47, 0.45);
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.06);
}

.header-kyc-btn.kyc-status--pending .header-kyc-btn__icon {
    background: rgba(239, 206, 47, 0.25);
    color: #EFCE2F;
    border: 1px solid rgba(239, 206, 47, 0.35);
}

.header-kyc-btn.kyc-status--submitted {
    background: rgba(45, 95, 196, 0.12);
    color: #1e3f8a;
    border-color: rgba(45, 95, 196, 0.4);
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.06);
}

.header-kyc-btn.kyc-status--submitted .header-kyc-btn__icon {
    background: rgba(45, 95, 196, 0.18);
    color: #2D5FC4;
    border: 1px solid rgba(45, 95, 196, 0.35);
}

.header-kyc-btn.kyc-status--approved {
    background: rgba(9, 168, 71, 0.1);
    color: #09863f;
    border-color: rgba(9, 168, 71, 0.4);
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.06);
}

.header-kyc-btn.kyc-status--approved .header-kyc-btn__icon {
    background: rgba(9, 168, 71, 0.15);
    color: #09A847;
    border: 1px solid rgba(9, 168, 71, 0.3);
}

@keyframes header-kyc-zoom {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-kyc-btn--zoom {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .header-kyc-btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.85rem 0.4rem 0.4rem;
        gap: 0.35rem;
    }

    .header-kyc-btn__icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }
}

/* Admin header — user menu (hover dropdown) */
.header-nav-row {
    gap: 1rem;
}

.header-actions,
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.mobile-header-actions {
    gap: 0.5rem;
}

.header-user-menu {
    position: relative;
    flex-shrink: 0;
}

.header-user-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.header-email-verify-btn {
    border: 1px solid color-mix(in srgb, #d97706 30%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, #fff);
    color: #92400e;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    transition: all 0.2s ease;
}

.header-email-verify-btn:hover {
    background: color-mix(in srgb, #f59e0b 20%, #fff);
    color: #7c2d12;
}

.header-email-verify-btn--pending {
    box-shadow: 0 4px 12px color-mix(in srgb, #f59e0b 18%, transparent);
}

.header-email-verify-modal .modal-content {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #6d28d9 24%, transparent);
    box-shadow: 0 16px 38px color-mix(in srgb, #4c1d95 28%, transparent);
    overflow: hidden;
}

.header-email-verify-modal .modal-header {
    background: linear-gradient(120deg, #35196E 0%, #4a2a8a 55%, #5d36a4 100%);
    color: #fff;
    border-bottom: none;
}

.header-email-verify-modal .modal-title {
    color: #fff;
}

.header-email-verify-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.95;
}

.header-email-verify-modal .modal-body {
    background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 65%);
}

.header-email-verify-modal {
    z-index: 1060;
}

.modal-backdrop.show {
    /* z-index: 1055; */
}

.header-email-verify-modal__help {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.header-email-verify-modal__send-form {
    margin-bottom: 0.75rem;
}

.header-email-verify-modal__inline-row {
    width: 100%;
}

.header-email-verify-modal__inline-row .form-control {
    width: 100%;
}

.header-email-verify-modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

.header-email-verify-modal__inline-btn {
    white-space: nowrap;
    margin: 0;
    min-width: 130px;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.62rem 0.75rem;
    background: linear-gradient(120deg, #35196E 0%, #4a2a8a 55%, #5d36a4 100%);
    border: none;
    color: #fff;
}

.header-email-verify-modal__inline-btn:hover {
    color: #fff;
    background: linear-gradient(120deg, #4a2a8a 0%, #5d36a4 55%, #6f47bd 100%);
}

.header-email-verify-modal__verify-form label,
.header-email-verify-modal__send-form label,
.header-email-verify-modal .modal-title {
    font-size: 0.95rem;
}

.header-email-verify-modal .form-control {
    font-size: 0.9rem;
}

.header-email-verify-modal__alert {
    font-size: 0.82rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.7rem;
}

.header-email-verify-modal__error {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.45rem;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .header-email-verify-modal__inline-btn {
        width: 100%;
        min-width: 0;
    }

    .header-email-verify-modal__actions {
        justify-content: stretch;
    }
}

.header-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.header-user-menu__trigger:hover,
.header-user-menu:focus-within .header-user-menu__trigger,
.header-user-menu.is-open .header-user-menu__trigger {
    border-color: color-mix(in srgb, #35196E 35%, transparent);
    background: color-mix(in srgb, #35196E 4%, #fff);
    box-shadow: 0 4px 16px color-mix(in srgb, #35196E 12%, transparent);
}

.header-user-menu__avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
    color: #fff !important;
    background: linear-gradient(145deg, #4a2a8a, #35196E);
    box-shadow: 0 4px 12px color-mix(in srgb, #35196E 25%, transparent);
}

.header-user-menu__avatar--lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 1rem;
}

.header-user-menu__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
    text-align: left;
}

.header-user-menu__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.header-user-menu__role {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.header-user-menu__caret {
    font-size: 0.65rem;
    color: #35196E;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.header-user-menu:hover .header-user-menu__caret,
.header-user-menu:focus-within .header-user-menu__caret,
.header-user-menu.is-open .header-user-menu__caret {
    transform: rotate(180deg);
}

.header-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    padding: 0.65rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, #35196E 18%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 200;
    pointer-events: none;
}

.header-user-menu__dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    transform: rotate(45deg);
}

.header-user-menu:hover .header-user-menu__dropdown,
.header-user-menu:focus-within .header-user-menu__dropdown,
.header-user-menu.is-open .header-user-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.header-user-menu__dropdown-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, #35196E 10%, transparent);
}

.header-user-menu__dropdown-head strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.header-user-menu__dropdown-meta-wrap {
    min-width: 0;
    flex: 1;
}

.header-user-menu__dropdown-meta {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    margin-top: 0.15rem;
    line-height: 1.35;
}

.header-user-menu__dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.header-user-menu__dropdown-actions form {
    margin: 0;
}

.header-user-menu__action {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: left;
}

.header-user-menu__action i {
    width: 1.25rem;
    text-align: center;
    color: #35196E;
}

.header-user-menu__action:hover {
    background: color-mix(in srgb, #35196E 6%, #fff);
    color: #35196E;
    text-decoration: none;
}

.header-user-menu__action--primary:hover {
    background: color-mix(in srgb, #35196E 10%, #fff);
    color: #35196E;
}

.header-user-menu__action--danger {
    color: #b91c1c;
}

.header-user-menu__action--danger i {
    color: #dc2626;
}

.header-user-menu__action--danger:hover {
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 767.98px) {
    .header-user-menu__info,
    .header-user-menu__caret {
        display: none;
    }

    .header-user-menu__trigger {
        padding: 0.25rem;
        border-radius: 50%;
    }

    .header-user-menu__dropdown {
        min-width: 220px;
        right: -4px;
    }
}

/* **** End Header **** */


/* **** Mobile Header **** */

.mobile-header {
    padding: 10px 0;
    background: #fff;
    display: none;
}

.mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-logo img {
    height: 40px;
}

.btn-bar {
    margin: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #111;
    line-height: 40px;
    text-align: center;
    color: #111;
    border-radius: 3px;
    font-size: 20px;
    display: block;
}


/* **** End Mobile Header **** */


/* ***** Login **** */

[x-cloak] {
    display: none !important;
}

.login-wrp {
    width: 100%;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 72% 55% at 15% 20%, rgba(196, 181, 253, 0.4), transparent 55%),
        radial-gradient(ellipse 62% 50% at 88% 70%, rgba(208, 201, 222, 0.45), transparent 52%),
        linear-gradient(165deg, #ede9fe 0%, #f5f3ff 32%, #fafafa 72%, #ffffff 100%);
}

.login-wrp::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, rgba(53, 25, 110, 0.14), rgba(124, 58, 237, 0.1));
}

.login-blocks {
    width: 100%;
    position: relative;
    margin: 0 auto;
    z-index: 2;
    max-width: 460px;
}

.login-box {
    position: relative;
    padding: 70px 34px 34px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 24px 52px rgba(53, 25, 110, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
    border: 1px solid rgba(53, 25, 110, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 28px;
}

.login-box::before {
    content: '\2192';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--site-light);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    box-shadow:
        0 8px 18px rgba(53, 25, 110, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(53, 25, 110, 0.1);
}

.login-box h1 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 8px;
    line-height: 1.2;
    position: relative;
    color: #35196E;
}

.login-box p {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: rgba(15, 30, 51, 0.7);
    margin: 0 0 24px;
}

.login-box .form-group {
    margin: 0 auto 16px;
    position: relative;
}

.login-box .form-group label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(15, 30, 51, 0.78);
    margin: 0 0 6px;
    display: block;
}

.login-box .form-group .form-control {
    padding: 12px 14px;
    background: #f1f4f9;
    color: #1d2635;
    font-size: 15px;
    font-weight: normal;
    height: auto;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 12px;
}

.login-box .form-group .form-control:focus {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
    background: #fff;
}

.login-box .password-field-wrap {
    position: relative;
}

.login-box .password-field-wrap .form-control {
    padding-right: 46px;
}

.login-box .password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(53, 25, 110, 0.55);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.login-box .password-toggle-btn:hover {
    color: #35196E;
    background: rgba(124, 58, 237, 0.1);
}

.login-box .password-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.login-box .password-toggle-btn i {
    font-size: 16px;
    pointer-events: none;
}

.btn-forgot {
    margin: 2px 0 18px;
    display: block;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: #35196E;
}

.btn-forgot:hover {
    color: #082a61;
}

/* Login / register — secondary link buttons */
.login-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 18px;
}

.login-auth-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-auth-actions__row > .btn-auth-alt {
    flex: 1 1 calc(50% - 5px);
    min-width: 8.5rem;
}

.login-auth-actions .btn-auth-alt--block {
    width: 100%;
}

.btn-auth-alt,
a.btn-auth-alt {
    font-family: var(--font-app);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--btn-pill-radius);
    border: 1px solid rgba(53, 25, 110, 0.22);
    background: #f1f4f9;
    color: #35196E !important;
    box-shadow: 0 1px 4px rgba(53, 25, 110, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.btn-auth-alt:hover,
a.btn-auth-alt:hover {
    color: #35196E !important;
    background: #fff;
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.1);
    transform: translateY(-1px);
}

.btn-auth-alt:focus-visible,
a.btn-auth-alt:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.45);
    outline-offset: 2px;
}

.login-wrp .btn-main {
    display: block;
    width: 100%;
    padding: 14px 45px;
    font-size: 17px;
    margin: 0 auto 6px;
}

.login-wrp .btn-main:hover {
    color: #fff;
}

.login-wrp .btn-main:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.login-box .otp-resend-timer {
    margin: 0 0 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(53, 25, 110, 0.88);
    text-align: center;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 10px;
}

.login-box .otp-resend-timer strong {
    font-weight: 700;
    color: #35196E;
}

/* Auth pages — card layout (image left, form right) */
.login-wrp--split.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
    background: var(--site-light);
    overflow: hidden;
}

.login-wrp--split.auth-page::after {
    display: none;
}

.auth-page__container {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0;
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(53, 25, 110, 0.14);
    border-radius: 1.35rem;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(53, 25, 110, 0.08),
        0 20px 48px rgba(53, 25, 110, 0.1);

        background-image: url('../backend/images/login.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}


.auth-card__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    background-color: #ffffffa6;
    margin: 28px;
    border-radius: 20px;
    /* border: 2px solid #CEC4F5; */
}

.auth-page .login-blocks {
    width: 100%;
    max-width: 26.5rem;
    margin: 0 auto;
}

.auth-page .login-panel,
.auth-page .login-box.login-panel {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.auth-page .login-box::before {
    display: none;
}

/* Auth pages — unified inputs & buttons (login, register, forgot, verify OTP) */
.auth-page {
    --auth-input-h: 2.25rem;
    --auth-input-fs: 0.8125rem;
    --auth-input-px: 0.7rem;
    --auth-input-icon-space: 2.2rem;
    --auth-input-icon-pos: 0.7rem;
    --auth-btn-h: 2.5rem;
    --auth-input-bg: #ffffff;
    --auth-btn-track: #ede9fe;
    --auth-btn-inner: #ffffff;
    --auth-btn-text: var(--color-brand-deep);
    --auth-btn-arrow: var(--color-brand);
}

.auth-page .form-control,
.auth-page .login-box .form-group .form-control {
    min-height: var(--auth-input-h);
    height: var(--auth-input-h);
    padding: 0.35rem var(--auth-input-px);
    background-color: var(--auth-input-bg);
    border: 1px solid rgba(53, 25, 110, 0.16);
    border-radius: var(--btn-pill-radius);
    font-size: var(--auth-input-fs);
    line-height: 1.35;
    color: #1a1f36;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-page .form-control::placeholder {
    color: rgba(53, 25, 110, 0.38);
}

.auth-page .form-control:focus,
.auth-page .login-box .form-group .form-control:focus {
    border-color: rgba(124, 58, 237, 0.65);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    background-color: var(--auth-input-bg);
    outline: none;
}

.auth-page .password-field-wrap {
    position: relative;
    z-index: 1;
}

.auth-page .password-field-wrap .form-control,
.auth-page .login-box .password-field-wrap .form-control {
    padding-left: var(--auth-input-icon-space);
    padding-right: 2.35rem;
    background-color: var(--auth-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--auth-input-icon-pos) center;
    background-size: 0.95rem;
}

.auth-page .password-field-wrap .form-control:focus,
.auth-page .login-box .password-field-wrap .form-control:focus {
    background-color: var(--auth-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--auth-input-icon-pos) center;
    background-size: 0.95rem;
}

.auth-page .password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(53, 25, 110, 0.5);
    background: rgba(124, 58, 237, 0.06);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.auth-page .password-toggle-btn i {
    font-size: 0.8rem;
    pointer-events: none;
}

.auth-page .password-toggle-btn:hover {
    color: var(--color-brand);
    background: rgba(124, 58, 237, 0.14);
}

.auth-page:not(.login-wrp--register) .login-box form > .form-group:first-of-type .form-control {
    padding-left: var(--auth-input-icon-space);
    background-color: var(--auth-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--auth-input-icon-pos) center;
    background-size: 0.95rem;
}

.auth-page:not(.login-wrp--register) .login-box form > .form-group:first-of-type .form-control:focus {
    background-color: var(--auth-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Auth CTA — pill track + white label pill + arrow */
.auth-page button.btn-main,
.auth-page .btn-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.35rem 0 0;
    min-height: calc(var(--auth-btn-h) + 0.45rem);
    padding: 0.3rem 0.35rem 0.3rem 0.3rem;
    font-family: var(--font-app);
    background: var(--auth-btn-track) !important;
    border: none !important;
    border-radius: var(--btn-pill-radius);
    box-shadow: none !important;
    cursor: pointer;
    filter: none !important;
    transition: transform 0.2s ease;
}

.auth-page .btn-main::before {
    display: none;
}

.auth-page .auth-btn__text {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--auth-btn-h);
    padding: 0.45rem 1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--auth-btn-text) !important;
    -webkit-text-fill-color: var(--auth-btn-text);
    background: var(--auth-btn-inner);
    border-radius: var(--btn-pill-radius);
    box-shadow:
        0 2px 10px rgba(53, 25, 110, 0.12),
        0 1px 2px rgba(53, 25, 110, 0.06);
    transition: box-shadow 0.2s ease;
}

.auth-page .btn-main::after {
    content: '→';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    color: var(--auth-btn-arrow) !important;
    pointer-events: none;
}

.auth-page .btn-main:hover:not(:disabled) {
    background: var(--auth-btn-track) !important;
    filter: none !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.auth-page .btn-main:hover:not(:disabled) .auth-btn__text {
    box-shadow:
        0 4px 14px rgba(53, 25, 110, 0.16),
        0 2px 4px rgba(53, 25, 110, 0.08);
}

.auth-page .btn-main:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.45);
    outline-offset: 3px;
}

.auth-page .btn-main:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.auth-page .btn-main:disabled .auth-btn__text {
    box-shadow: none;
}

.auth-page .btn-main.btn-main--secondary,
.auth-page .btn-main.login-panel__submit--secondary {
    --auth-btn-track: rgba(13, 52, 116, 0.1);
    --auth-btn-inner: var(--site-light);
    --auth-btn-text: var(--color-admin-accent);
    --auth-btn-arrow: var(--color-admin-accent);
}

.auth-page .btn-main.btn-main--secondary .auth-btn__text,
.auth-page .btn-main.login-panel__submit--secondary .auth-btn__text {
    border: 1px solid rgba(13, 52, 116, 0.15);
}

.auth-page .btn-auth-alt,
.auth-page a.btn-auth-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(53, 25, 110, 0.55) !important;
    transform: none;
}

.auth-page .btn-auth-alt:hover,
.auth-page a.btn-auth-alt:hover {
    background: transparent;
    color: var(--color-brand) !important;
    text-decoration: underline !important;
    transform: none;
}

.auth-page .login-box .form-group {
    margin-bottom: 0.65rem;
}

.auth-page .login-box .form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(42, 20, 88, 0.88);
    margin-bottom: 0.3rem;
}

.auth-page .login-box .form-group--password {
    margin-bottom: 0.5rem;
}

.auth-page .login-box .text-danger {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
}

.auth-page .otp-btn-block .form-control {
    padding-right: var(--auth-input-px);
}

.auth-page .otp-btn-block .btn-main {
    position: static;
    transform: none;
    right: auto;
    width: 100%;
    margin: 0;
}

.login-wrp--split::after {
    display: none;
}

.login-panel__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.35rem;
}

.login-panel__brand img {
    width: auto;
    max-width: 9.5rem;
    max-height: 3rem;
    object-fit: contain;
}

.auth-page .login-box h1 {
    font-size: clamp(1.65rem, 3.5vw, 2.125rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.4rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-brand-deep);
}

.auth-page .login-box p {
    text-align: center;
    margin: 0 0 1.65rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--site-muted);
}

.login-forgot-row {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 1.25rem;
    margin: 0.1rem 0 0.65rem;
    padding: 0 0.1rem;
}

.login-forgot-link {
    display: inline-block;
    position: relative;
    z-index: 5;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-admin-accent) !important;
    text-decoration: none !important;
    pointer-events: auto;
}

.login-forgot-link:hover {
    color: var(--color-brand) !important;
    text-decoration: underline !important;
}

.auth-page .login-panel__footer.login-auth-actions {
    margin: 1.35rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(53, 25, 110, 0.08);
    gap: 0.85rem;
    align-items: center;
    text-align: center;
}

.login-panel__signup {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--site-muted);
    line-height: 1.5;
}

.login-panel__signup a {
    font-weight: 700;
    color: var(--site-secondary) !important;
    text-decoration: none !important;
    margin-left: 0.2rem;
}

.login-panel__signup a:hover {
    color: var(--color-brand) !important;
    text-decoration: underline !important;
}

@media (max-width: 991px) {
    .login-wrp--split.auth-page {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .auth-card {
        display: block;
        grid-template-columns: none;
        min-height: auto;
        overflow: hidden;
        background-image: none;
        background-color: #ffffff;
    }

    .auth-card__media {
        display: none !important;
    }

    .auth-card__form {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 3.5vw, 1.5rem);
        background-color: #ffffff;
        border-radius: 0;
        box-sizing: border-box;
    }

    .auth-page .login-blocks {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .auth-card__form {
        padding: clamp(1rem, 3.5vw, 1.25rem) clamp(0.85rem, 3vw, 1rem);
    }

    .auth-page .login-panel__footer.login-auth-actions {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .auth-page .login-box p {
        margin-bottom: 1.25rem;
    }
}

/* Register — wider card + 2-column form */
.auth-page.login-wrp--register .auth-page__container {
    max-width: 1120px;
}

.auth-page.login-wrp--register .auth-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.auth-page.login-wrp--register .login-blocks {
    max-width: 100%;
}

.auth-page.login-wrp--register .login-panel__brand {
    margin-bottom: 0.85rem;
}

.auth-page.login-wrp--register .login-box h1 {
    margin-bottom: 0.25rem;
}

.auth-page.login-wrp--register .login-box p {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.auth-page.login-wrp--register .register-form__grid {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.4rem;
}

.auth-page.login-wrp--register .register-form__grid > [class*="col-"] > .form-group {
    margin-bottom: 0;
}

.auth-page.login-wrp--register .register-form__grid .col-12.col-md-6:first-child .form-control {
    padding-left: var(--auth-input-icon-space);
    background-color: var(--auth-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--auth-input-icon-pos) center;
    background-size: 0.95rem;
}

.auth-page.login-wrp--register .register-form__grid .col-12:not(.col-md-6) .form-control {
    padding-left: var(--auth-input-px);
    background-color: var(--auth-input-bg);
    background-image: none;
}

.auth-page.login-wrp--register .register-form__messages {
    margin: 0.65rem 0 0;
}

.auth-page.login-wrp--register .register-form__messages .text-danger {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
}

.auth-page.login-wrp--register .btn-main {
    margin-top: 0.5rem;
}

.auth-page.login-wrp--register .login-panel__footer {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

.auth-page .login-box .otp-resend-timer {
    margin: 0 0 0.65rem;
    border-radius: var(--btn-pill-radius);
    font-size: 0.8125rem;
}

.login-otp-actions {
    margin: 0.75rem 0 0.25rem;
}

.forget-password-page:not(.auth-page) .login-box h1 {
    margin: 0 auto 20px;
}

.forget-password-page:not(.auth-page) .btn-main {
    margin: 12px auto 0;
}

.forget-password-page:not(.auth-page) .btn-forgot {
    margin: 0 auto;
}

.forget-password-page:not(.auth-page) .otp-btn-block .btn-main {
    position: static;
    transform: none;
    right: auto;
    width: 100%;
    margin: 12px 0 0;
    padding: 10px 16px;
    border-radius: var(--btn-pill-radius);
}

.forget-password-page:not(.auth-page) .otp-btn-block .form-control {
    padding-right: 14px;
}

.otp-btn-block {
    position: relative;
}

.otp-btn-block .btn-main {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    margin: 0;
    padding: 6px 14px;
    border-radius: var(--btn-pill-radius);
    font-size: 14px;
    min-height: auto;
}

/* .otp-btn-block .btn-main:hover {
    transform: translateY(calc(-50% - 1px));
} */

.otp-btn-block .form-control {
    padding-right: 75px;
}

/* ***** End Login **** */




/* **** Sidebar **** */

aside.sidebar {
    position: fixed;
    top: var(--admin-header-height);
    bottom: auto;
    left: 0;
    max-width: 280px;
    width: 100%;
    border-radius: 20px;
    height: calc(100vh - var(--admin-header-height));
    z-index: 120;
    padding: 15px 0;
    overflow: auto;
    background: url(../images/dashboard-bg.png) 0 0 no-repeat;
    background-size: cover;
    z-index: 99;
    transition: .4s linear;
    -webkit-transition: .4s linear;
}

aside.sidebar ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

aside.sidebar ul li {
    margin: 3px 10px;
    padding: 0;
}

aside.sidebar ul li a {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    color: #fff;
    min-height: 42px;
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    position: relative;
    text-decoration: none;
    line-height: 1.4;
}

aside.sidebar ul li a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #FFFFFF;
    transition: all 0.25s ease;
    opacity: 0;
}

aside.sidebar ul li a:hover::after,
aside.sidebar ul li.active a::after {
    width: 0;
    height: 0;
    border-left: 4px solid #FFFFFF;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 1;
    right: 12px;
}

/* Submenu Styles */
aside.sidebar ul .collapse,
aside.sidebar ul ul.collapse {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 20px;
    padding-left: 8px;
}

aside.sidebar ul .collapse li,
aside.sidebar ul ul.collapse li {
    margin: 2px 0;
    padding: 0;
}

aside.sidebar ul .collapse li a,
aside.sidebar ul ul.collapse li a {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 400;
    min-height: 31px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 0;
    position: relative;
}

aside.sidebar ul .collapse li a::before,
aside.sidebar ul ul.collapse li a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.25s ease;
}

aside.sidebar ul .collapse li a:hover::before,
aside.sidebar ul .collapse li.active a::before,
aside.sidebar ul ul.collapse li a:hover::before,
aside.sidebar ul ul.collapse li.active a::before {
    background: #FFFFFF;
    width: 8px;
    height: 8px;
    left: -12px;
}

aside.sidebar ul .collapse li.active a,
aside.sidebar ul .collapse li a:hover,
aside.sidebar ul ul.collapse li.active a,
aside.sidebar ul ul.collapse li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding-left: 18px;
}

aside.sidebar ul li a i {
    margin: 0 0 0 auto;
    font-size: 11px;
    transition: transform 0.25s ease;
    opacity: 0.7;
}

aside.sidebar ul li a.dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
    opacity: 1;
}

aside.sidebar ul li a .menuic-box {
    min-width: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

aside.sidebar ul li a .menuic-box img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    object-fit: contain;
}

/* Submenu icon size */
aside.sidebar ul .collapse li a .menuic-box img,
aside.sidebar ul ul.collapse li a .menuic-box img {
    width: 16px;
    height: 16px;
}

aside.sidebar ul li.active a,
aside.sidebar ul li a:hover {
    background: #FFFFFF;
    color: #0D3474;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateX(2px);
}

aside.sidebar ul li a.dropdown-toggle.show .menuic-box img,
aside.sidebar ul li.active a .menuic-box img,
aside.sidebar ul li a:hover .menuic-box img {
    filter: unset;
    -webkit-filter: unset;
}

/* Dropdown toggle active state */
aside.sidebar ul li a.dropdown-toggle.show {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

aside.sidebar ul li a.dropdown-toggle.show:hover {
    background: #FFFFFF;
    color: #0D3474;
}

/* Smooth collapse animation */
aside.sidebar .collapse {
    transition: all 0.3s ease;
}

aside.sidebar .collapse.show {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Scrollbar styling for sidebar */
aside.sidebar::-webkit-scrollbar {
    width: 4px;
}

aside.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

aside.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

aside.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Unique design elements */
aside.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

aside.sidebar ul li:first-child {
    margin-top: 0;
}

aside.sidebar ul li:last-child {
    margin-bottom: 0;
}


/* **** End Sidebar **** */


/* **** Dashboard Page **** */

.main-part-body {
    padding: calc(var(--admin-header-height) + 3px) 15px 15px 295px;
    position: relative;
    min-height: 100vh;
}

.main-part-body .main-part-body-inner {
    position: relative;
    z-index: 2;
}

.top-line {
    position: relative;
    width: 100%;
    border-top: 1px solid #000000;
    padding-top: 20px;
}

.error-box {
    margin: 0 auto 20px;
    padding: 15px;
    background: #FBC7C7;
    border: 1px solid #B40C0C;
    border-radius: 10px;
    position: relative;
}

.error-box p {
    margin: 0 auto;
    font-size: 18px;
    font-weight: 500;
    color: #B00404;
}

.error-box p strong {
    font-weight: bold;
}

.btn-noteclose {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background: #C71111;
    font-size: 18px;
    border: none;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 15px;
}

.btn-noteclose:hover {
    background: #101010;
    color: #fff;
}

.headding-box h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 140%;
    color: #000000;
}

.headding-box p {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
}

.dashboard-header-action {
    display: flex;
    align-items: center;
}

.dashboard-limit-trigger {
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #35196E 0%, #198964 100%);
    box-shadow: 0 10px 24px rgba(13, 52, 117, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.dashboard-limit-trigger i {
    font-size: 16px;
}

.dashboard-limit-trigger:hover,
.dashboard-limit-trigger:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(13, 52, 117, 0.24);
}

.dashboard-limit-trigger.disabled {
    opacity: 0.7;
    pointer-events: none;
}

.payin-limit-modal .modal-content {
    border: 1px solid #0C316F;
    border-radius: 25px;
    overflow: hidden;
}

.payin-limit-modal .modal-header {
    border-bottom: 1px solid rgba(12, 49, 111, 0.12);
}

.payin-limit-modal .modal-body {
    padding: 20px;
}

.payin-limit-modal .last-payment-table {
    box-shadow: none;
    margin: 0;
}

.timing-boxs,
.transaction-boxs {
    width: 97%;
    position: relative;
    border: 1px solid #0C316F;
    border-top: 5px solid #35196E;
    /* box-shadow: 0px 9px 7px 6px rgba(0, 0, 0, 0.04); */
    /* -webkit-box-shadow: 0px 9px 7px 6px rgba(0, 0, 0, 0.04); */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 25px;
    background: url(../images/box-bg-1.png) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
    padding: 25px;
    margin: 25px 0 0;
}

@media (max-width: 575.98px) {
    .dashboard-header-action {
        width: 100%;
        justify-content: flex-end;
    }
}

.timing-boxs h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    margin: 0 0 30px;
}

.timing-boxs ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.timing-boxs ul li {
    position: relative;
    border-right: 1px dashed #0D3474;
    width: 33%;
}

.timing-boxs ul li:last-child {
    border-right: 0;
}

.timing-boxs ul li p {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #737272;
    margin: 0 0 20px;
}

.timing-boxs ul li h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    margin: 0;
}

.timing-boxs.timing-boxs2,
.transaction-boxs.timing-boxs2 {
    margin-left: auto;
}

.transaction-boxs h2 {
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    margin: 0 0 15px;
}

.transaction-boxs h1 {
    font-weight: 800;
    font-size: 35px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    position: relative;
    margin: 0;
}

.transaction-boxs figure {
    margin: 0 auto 0 0;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 0;
}

.transaction-boxs figure img {
    width: 100%;
}

.txns-box {
    position: relative;
    width: 100%;
    background: #FAFAFA;
    border: 2px solid #35196E;
    border-radius: 20px;
    padding: 30px;
    margin: 25px 0 0;
}

.txns-box-img {
    width: 70%;
    margin: 0 auto 10px;
    position: relative;
}

.txns-box-img figure {
    margin: 0;
}

.txns-box-img figure img {
    width: 100%;
}

.txns-box-img span {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #FFFFFF;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    bottom: 20%;
    display: block;
    width: 100%;
    text-align: center;
}

.txns-box ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 15px;
}

.txns-box ul li h3,
.txns-box ul li p {
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    margin: 0;
}

.txns-box ul li p {
    color: #000;
    font-weight: 400;
    margin: 0;
}

.txns-box h2 {
    font-weight: 800;
    font-size: 26px;
    line-height: 140%;
    text-align: center;
    color: #35196E;
    margin: 0;
}

.txns-box h2 span {
    color: #E71616;
    font-weight: 600;
}

.txns-box-chart {
    margin: 0 auto;
}

.txns-box-chart img {
    width: 100%;
}

.last-payment h2.title {
    font-weight: 500;
    font-size: 25px;
    line-height: 140%;
    color: #000000;
    margin: 20px 0;
}

.last-payment .last-payment-table {
    background: #F9F9F9;
    border: 2px solid #35196E;
    border-radius: 20px;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px;
}

.last-payment table thead th {
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
    color: #000000;
    text-align: center;
    padding: 0 0 20px;
    background-color: transparent;
    border-bottom: 1px solid #000;
}

.dummy-code {
    text-align: center;
    padding: 120px 80px;
}

.dummy-code h2 {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #000;
    margin: 0;
}

.dummy-code figure {
    margin: 0 auto 20px;
    width: 10%;
}

.dummy-code figure img {
    width: 100%;
}

.main-part-body footer {
    padding: 40px 0 30px;
}

.main-part-body footer h6 {
    font-size: 14px;
    font-weight: normal;
    color: #636363;
    text-align: center;
    margin: 0 auto 10px;
    line-height: 22px;
}

.main-part-body footer h6 a {
    color: #287BFF;
    font-weight: 700;
}

.main-part-body footer h6 a:hover {
    color: #000;
}

.main-part-body footer p {
    font-size: 16px;
    font-weight: 500;
    color: #8C8C8C;
    margin: 0;
    text-align: center;
}

.main-part-body footer p i {
    margin-right: 5px;
}

.custome-boxs{
    padding: 16px 20px;
}
.custome-boxs h6 {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    color: #35196E;
}
.custome-boxs h5 {
    font-size: 12px;
    text-align: center;
    color: #35196E;
}
.custome-boxs ul li p {
    font-weight: 400;
    font-size: 13px;
    line-height: 140%;
    text-align: center;
    color: #737272;
    margin-bottom: 8px;
}
.custome-boxs ul li p a{
    background-color: rgb(40 40 40 / 9%);
    border-radius: 3px;
    color: rgb(115, 114, 114);;
    font-weight: 600;
    padding: 2px 4px;
    font-size: 13px;
}
.custome-boxs ul li p a:hover{
    background-color: #0D3474;
    color: #fff;
}

/* **** End Dashboard Page **** */


/* **** API & Documentation Page **** */

.api-page-box {
    width: 100%;
    position: relative;
    padding: 30px;
    background: #FCFCFC;
    border: 2px solid #0D3474;
    border-radius: 30px;
    margin: 30px 0 0;
}

.api-page-box .modal-header { 
    border-bottom: none;
    padding: 25px 35px;
}

.api-page-box .modal-body {
    border-radius: 30px;
    background: #fff;
}

.url-box h2 {
    font-weight: 500;
    font-size: 22px;
    line-height: 140%;
    color: #000000;
    margin: 0 0 20px;
}

.api-page-box .form-group {
    margin: 0 0 20px;
}

.api-page-box .form-group .form-control {
    padding: 15px 20px;
    background: #F1F1F1;
    border-radius: 26px;
    /* border: 1px solid rgba(0, 0, 0, 0.5); */
    height: auto;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    resize: none;
}

.api-page-box .form-group label {
    font-size: 18px;
    line-height: 32px;
    font-weight: 500;
    color: #000000;
    display: block;
    margin: 0 0 10px;
}

.url-box-btn-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0;
}

.url-box-btn-group .btn-main {
    display: inline-block;
    margin: 0 0 0 30px;
}

.api-inner-title h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 140%;
    color: #35196E;
}

.api-page-box .form-group .keybox {
    width: 100%;
    position: relative;
}

.api-page-box .form-group .keybox button {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #868686;
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: 600;
}

.api-page-box .form-group .keybox .form-control {
    padding-right: 60px;
}


/* **** End API & Documentation Page **** */


/* **** Balance & Recharge Page **** */

.page-head-ts {
    margin: 0 0 20px;
}

.searchbox {
    position: relative;
}

.searchbox .form-control {
    width: 100%;
    position: relative;
    background: #FFFFFF;
    border: 1px solid #35196E;
    border-radius: 13px;
    padding: 15px 120px 15px 25px;
}

.searchbox .form-control:focus {
    outline: none;
    box-shadow: none;
}

.searchbox button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 12px;
    background: #35196E;
    border-radius: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #FFFFFF;
    border: none;
    padding: 8px 15px;
}

.searchbox button:hover {
    background: #000;
}

.allsearchbox .form-control {
    background: #FFFFFF;
    border: 1px solid #35196E;
    border-radius: 13px;
    padding: 15px 25px 15px 25px;
}
.allsearchbox button {
    width: 100%;
    right: 12px;
    background: #35196E;
    border-radius: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #FFFFFF;
    border: none;
    padding: 15px 15px;
}
.allsearchbox button:hover {
    background: #000;
}

.balance-row .headding-box h2 {
    font-weight: 500;
}

.balance-row .headding-box h2 span {
    font-weight: 700;
    font-size: 30px;
    color: #0C3577;
}

.balance-row .btn-main {
    width: 60%;
    text-align: center;
    margin: 0 0 0 auto;
}

.balance-row .btn-main:hover {
    filter: brightness(1.08);
}

span.success-color {
    color: #089630;
}

span.accept-color {
    color: #3498db;
}

span.error-color {
    color: #DC0000;
}

.balance-row table {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    white-space: nowrap;
}

.balance-row table thead th {
    padding: 15px;
    background: transparent;
    font-size: 22px;
    font-weight: bold;
    color: #35196E;
    text-align: center;
    border: 1px solid #35196E;
}

.balance-row table thead th:first-child {
    border-radius: 25px 0 0 0;
}

.balance-row table thead th:last-child {
    border-radius: 0 25px 0 0;
}

.balance-row table tbody td {
    padding: 12px 25px;
    font-size: 18px;
    font-weight: 500;
    color: #202020;
    background: transparent;
    text-align: center;
    border: none;
    vertical-align: middle;
    border-right: 1px solid #35196E;
    border-left: 1px solid #35196E;
}

.balance-row table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 25px;
}

.balance-row table tbody tr:last-child td:last-child {
    border-radius: 0 0 25px 0;
}

.balance-row table tbody tr:last-child td {
    border-bottom: 1px solid #35196E;
}

.pagination-row {
    margin: 10px auto 0;
    padding: 10px 35px;
    border-radius: 12px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 2px solid #0C3577;
}

.pagination-row .btn-next,
.pagination-row .btn-prev {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #757575;
}

.pagination-row .btn-next {
    color: #1E1E1E;
}

.pagination-row .btn-next i {
    margin: 0 0 0 8px;
}

.pagination-row .btn-prev i {
    margin: 0 8px 0 0;
}

.pagination-row .btn-next:hover,
.pagination-row .btn-prev:hover {
    color: #0C3577;
}

.pagination-row ul {
    display: flex;
    align-items: center;
    margin: 0 35px;
}

.pagination-row ul li {
    margin-right: 15px;
}

.pagination-row ul li:last-child {
    margin: 0;
}

.pagination-row ul li a {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    line-height: 30px;
    display: block;
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    color: #1E1E1E;
}

.pagination-row ul li a:hover {
    color: #0C3577;
}

.pagination-row ul li.active a {
    background: #0C3577;
    color: #fff;
}

/* **** End Balance & Recharge Page **** */


/* **** Balance & Recharge Page MOdal (all .recharge-now-modal) **** */

.recharge-now-modal .api-page-box {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, #312e81 0%, #1e3a8a 45%, #0f766e 160%);
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.recharge-now-modal .modal-header {
    position: relative;
    padding: 1.35rem 1.5rem 1.15rem;
    border-bottom: none;
    background: transparent;
}

.recharge-now-modal .modal-header .modal-title {
    font-style: normal;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #f8fafc;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.recharge-now-modal .modal-header .btn-close {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
    background: #C71111;
    font-size: 18px;
    border: none;
    color: #fff;
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 1;
}

.recharge-now-modal .modal-header .btn-close:hover {
    background: #000;
}

.recharge-now-modal .modal-body {
    margin: 0 0.85rem 0.85rem;
    padding: 1.5rem 1.35rem 1.35rem;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.recharge-now-modal .recharge-modal-section-label {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.recharge-now-modal .modal-footer {
    padding: 1rem 1.35rem 1.35rem;
    border-top: none;
    background: transparent;
    gap: 0.65rem;
    justify-content: flex-end;
}

.recharge-now-modal .api-page-box .form-group .form-control {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recharge-now-modal .api-page-box .form-group .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    background: #fff;
}

/* Input groups (add/deduct etc.) */
.recharge-now-modal .input-group {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recharge-now-modal .input-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.recharge-now-modal form .modal-body > .form-group:nth-child(1) .input-group:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.recharge-now-modal form .modal-body > .form-group:nth-child(2) .input-group:focus-within {
    border-color: #f43f5e;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18);
}

.recharge-now-modal .input-group-text {
    border: none;
    border-radius: 0;
    padding: 0 1rem;
    font-size: 1rem;
}

.recharge-now-modal form .modal-body > .form-group:nth-child(1) .input-group-text {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
}

.recharge-now-modal form .modal-body > .form-group:nth-child(2) .input-group-text {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    color: #e11d48;
}

.recharge-now-modal .input-group .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 500;
}

.recharge-now-modal .input-group .form-control:focus {
    box-shadow: none !important;
}

/* PayIn radio (wallet modals) */
.recharge-now-modal .wallet-payin-radio {
    display: inline-flex;
    cursor: pointer;
    margin: 0;
}

.recharge-now-modal .wallet-payin-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.recharge-now-modal .wallet-payin-radio__box {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.recharge-now-modal .wallet-payin-radio:hover .wallet-payin-radio__box {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.recharge-now-modal .wallet-payin-radio input[type="radio"]:focus-visible + .wallet-payin-radio__box {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.recharge-now-modal .wallet-payin-radio input[type="radio"]:checked + .wallet-payin-radio__box {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.12);
}

.recharge-now-modal .wallet-payin-radio__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease;
}

.recharge-now-modal .wallet-payin-radio input[type="radio"]:checked + .wallet-payin-radio__box .wallet-payin-radio__dot {
    border-color: #4f46e5;
    background: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.recharge-now-modal .wallet-payin-radio input[type="radio"]:checked + .wallet-payin-radio__box .wallet-payin-radio__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
}

.recharge-now-modal .wallet-payin-radio__text {
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
}

.recharge-now-modal .wallet-payin-radio input[type="radio"]:checked + .wallet-payin-radio__box .wallet-payin-radio__text {
    color: #312e81;
}

.recharge-now-modal .api-page-box .form-group ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.recharge-now-modal .api-page-box .form-group ul li a {
    background: #FFFFFF;
    border: 1px solid #0D3678;
    border-radius: 10px;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    color: #0D3678;
    padding: 8px 25px;
    display: inline-block;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.recharge-now-modal .api-page-box .form-group ul li a:hover,
.recharge-now-modal .api-page-box .form-group ul li a.active {
    background: #35196E;
    border: 1px solid #131518;
    color: #fff;
}

.recharge-now-modal .api-page-box .form-group ul li {
    margin: 10px;
}

/* Modal actions: Cancel + Submit (body = light card; footer = on gradient) */
.recharge-now-modal .modal-body .btn-main[data-bs-dismiss="modal"] {
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none;
    min-width: 6.5rem;
    padding: 0.55rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--btn-pill-radius);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    filter: none;
}

.recharge-now-modal .modal-body .btn-main[data-bs-dismiss="modal"]:hover {
    color: #334155 !important;
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

.recharge-now-modal .modal-footer .btn-main[data-bs-dismiss="modal"] {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: none;
    min-width: 6.5rem;
    padding: 0.55rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--btn-pill-radius);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    filter: none;
}

.recharge-now-modal .modal-footer .btn-main[data-bs-dismiss="modal"]:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.recharge-now-modal .btn-main[type="submit"] {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%) !important;
    box-shadow:
        0 2px 14px rgba(53, 25, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    min-width: 6.5rem;
    padding: 0.55rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--btn-pill-radius);
    transition: filter 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.recharge-now-modal .btn-main[type="submit"]:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow:
        0 4px 18px rgba(53, 25, 110, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.recharge-now-modal .btn-main[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.recharge-now-modal .modal-body > .alert .btn-main,
.recharge-now-modal .modal-body .alert .btn-main {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%) !important;
    box-shadow:
        0 2px 14px rgba(53, 25, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    font-weight: 500;
}

/* **** End Balance & Recharge Modal Page **** */


/* **** Setting Page **** */

.setting-title h2 {
    font-weight: 500;
    font-size: 25px;
    line-height: 140%;
    color: #FFFFFF;
    background: #35196E;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    text-align: center;
}

.titlebar {
    position: relative;
    margin: 30px 0;
}

.titlebar:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background: #000;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.titlebar h2 {
    font-size: 22px;
    font-weight: 700;
    color: #191923;
    padding: 0 30px;
    display: table;
    margin: 0 auto;
    background: #fff;
    position: relative;
    z-index: 1;
}

.change-password-block {
    background: #F5F5F5;
    border: 1px solid #35196E;
    border-radius: 20px;
    padding: 60px 30px;
}

.change-password-block .btn-main {
    margin: 30px auto 0;
}

.change-password-block input[type=checkbox] {
    position: relative;
    border: 3px solid #35196E;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 30px;
    width: 30px;
    /* -webkit-appearance: none; */
}

.change-password-block input[type=checkbox]:checked {
    background-color: transparent;
}

.change-password-block input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 8px;
    height: 14px;
    border: solid #35196E;
    border-width: 0 3px 3px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
}

.change-password-block input[type=checkbox]:checked::before {
    opacity: 1;
}


/* **** End Setting Page **** */


/* **** Admin Dashboard Page **** */

.admin-dash-page .txns-box-chart {
    width: auto;
}


/* **** End Admin Dashboard Page **** */


/* **** Admin Connect Merchant Page **** */
.connect-merchant-page .api-page-box .form-group .keybox .form-control {
    margin-top: 10px;
}

.note-blue-box {
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.note-blue-box i {
    font-size: 1.35rem;
    color: var(--color-brand);
    margin: 0 1rem 0 0;
    flex-shrink: 0;
}

.note-blue-box p {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-brand-deep);
    margin: 0;
}

.btn-checkbox input {
    display: none;
    opacity: 0;
}

.btn-checkbox label {
    position: relative;
    width: 50px;
    height: 24px;
    display: inline-block;
    background: #666666;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.btn-checkbox label::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 1px 3px 6px #666666;
}

.btn-checkbox input:checked+label {
    background: #35196E;
}

.btn-checkbox input:checked+label:after {
    left: auto;
    right: 2px;
}

.custom-checkbox {
    accent-color: green;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.keybox-btn-group {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    display: flex;
    align-items: center;
}

.upi-id-block {
    background: var(--site-light);
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    border-radius: 18px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 10px 32px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.upi-id-block.api-page-box .form-group .form-control {
    padding-right: 120px;
}

.btn-delete {
    color: #D31616;
    font-size: 22px;
    margin-left: 20px;
}

.btn-delete-back {
    color: #000;
    font-size: 22px;
    margin-left: 20px;
}

.upi-id-block .btn-main {
    margin: 10px 0 0 auto;
}

.merchant-details-box {
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    border-radius: 10px;
    color: var(--color-brand-deep);
    font-size: 14px;
}

.connect-merchant-page input[type="checkbox"] {
    accent-color: var(--color-brand);
}

.connect-merchant-page .highlight td {
    background-color: color-mix(in srgb, var(--site-secondary) 14%, #fff) !important;
}

.download-app {
    background: linear-gradient(180deg, #6798F8 0%, #0076CC 100%);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    color: #FFFFFF;
    padding: 15px 25px;
    margin: 0 0 0 auto;
    display: table;
    position: relative;
    z-index: 1;
}

.download-app:hover {
    background: #000;
}

.download-app::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #FFFFFF;
    z-index: -1;
    border-radius: 8px;
}

.app-log-key {
    padding: 30px 0;
}

.app-log-key .form-group label {
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
    color: #000000;
    display: block;
    margin: 0 0 10px;
}

.app-log-key .form-group .keybox {
    width: 100%;
    position: relative;
}

.app-log-key .form-group .keybox .form-control {
    padding: 15px 60px 15px 20px;
}

.app-log-key .form-group .form-control {
    padding: 15px 20px;
    background: #F1F1F1;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    height: auto;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    resize: none;
}

.app-log-key .form-group .keybox button {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #868686;
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: 600;
}

.app-log-key .top-line {
    margin-top: 30px;
}

.gateway-list .gateway-list-box {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    border-radius: 16px;
    padding: 1.15rem 3.5rem 1.15rem 1.25rem;
    position: relative;
    margin: 0 0 0.65rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gateway-list .gateway-list-box:hover {
    border-color: color-mix(in srgb, var(--color-brand) 28%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.gateway-list .gateway-list-box p {
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    color: #000000;
}

.gateway-list .gateway-list-box p span {
    color: #727272;
}

.gateway-icon-box {
    display: flex;
}

.gateway-icon-box i {
    color: #F04E09;
    font-size: 16px;
    font-weight: 400;
    margin: 3px 10px 0 0;
}

.gateway-icon-box ul li {
    font-weight: 400;
    font-size: 15px;
    line-height: 140%;
    color: rgba(111, 111, 111, 0.95);
}

.gateway-list .gateway-list-box .btn-checkbox {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

/* **** End Admin Connect Merchant Page **** */


/* **** Admin Connect Merchant Page Add New UPI Modal **** */

.add-new-upi-modal .modal-header {
    background: #0C3577;
    border-radius: 0;
}

.add-new-upi-modal .modal-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    width: 100%;
}

.add-new-upi-modal .modal-title figure {
    margin: 0 10px 0 0;
    width: 50px;
}

.add-new-upi-modal .modal-title figure img {
    width: 100%;
}

.add-new-upi-modal .modal-header .btn-close {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
    background: #C71111;
    font-size: 18px;
    border: none;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
}

.add-new-upi-modal .modal-header .btn-close:hover {
    background: #000;
}

.add-new-upi-modal .modal-body {
    padding: 30px;
}

.add-new-upi-modal .modal-content {
    border-radius: 0 0 20px 20px;
    border: 2px solid #0C3577;
}

.add-new-upi-modal .modal-body .form-group label {
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #000000;
    margin: 0 0 10px;
}

.add-new-upi-modal .modal-body .form-group .form-control {
    background: #F4F4F4;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    resize: none;
    margin: 0 0 15px;
}

.add-new-upi-modal .form-group {
    margin: 0 0 20px;
}


/* **** End Admin Connect Merchant Page Add New UPI Modal **** */


/* **** Admin Customers Page **** */

.customers-add-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.customers-add-btn .btn-main {
    margin-right: 30px;
}

.admin-customers-page .balance-row table,
.admin-add-customers-page .balance-row table {
    margin-top: 0;
}

.btn-share {
    width: 30px;
    height: 30px;
    background: #31D2F2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 3px;
}

.btn-edit {
    width: 30px;
    height: 30px;
    background: #C50707;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 3px;
}

.btn-edit:hover, .btn-share:hover {
    background: #000;
}

.btn-wallet {
    width: 30px;
    height: 30px;
    background: #198964;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 3px;
}

.btn-edit:hover {
    background: #000;
}

/* Add / Edit Customer — modern form card */
.admin-add-customers-page .setting-title {
    margin-bottom: 1.25rem;
}

.admin-add-customers-page .setting-title h2 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1rem 1.35rem;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(53, 25, 110, 0.18);
}

.admin-add-customers-page .customer-form-card.api-page-box {
    padding: 2rem 2.25rem 2.5rem;
    /* max-width: 1040px; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 4px 28px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(53, 25, 110, 0.06);
}

@media (min-width: 992px) {
    .admin-add-customers-page .customer-form-card.api-page-box {
        padding: 2.5rem 3rem 3rem;
    }
}

.admin-add-customers-page .form-group {
    margin-bottom: 1.35rem;
}

.admin-add-customers-page .api-page-box .form-group label {
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.admin-add-customers-page .api-page-box .form-group label .text-danger {
    font-weight: 700;
}

.admin-add-customers-page .api-page-box .form-group .form-control,
.admin-add-customers-page .api-page-box select.form-control {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
    background: #f8fafc;
    height: auto;
    resize: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-add-customers-page .api-page-box .form-group .form-control::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.admin-add-customers-page .api-page-box .form-group .form-control:focus,
.admin-add-customers-page .api-page-box select.form-control:focus {
    border-color: #35196e;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(53, 25, 110, 0.12);
    outline: none;
}

.admin-add-customers-page .api-page-box input[type="file"].form-control {
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    font-size: 0.875rem;
}

.admin-add-customers-page .form-group small {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.admin-add-customers-page .form-group .d-flex {
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-add-customers-page .row.justify-content-center .col-lg-12 {
    text-align: center;
}

.admin-add-customers-page .btn-main {
    margin-top: 2rem;
    padding: 0.7rem 2.75rem;
    min-width: 200px;
}

.admin-add-customers-page .btn-main:hover {
    filter: brightness(1.06);
}

.img-preview {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}


/* **** End Admin Customers Page **** */


/* **** Admin Plans Page **** */

.admin-add-plans-page .btn-main {
    background: #35196E;
    padding: 10px 80px;
    margin-top: 40px;
}

.admin-add-plans-page .btn-main:hover {
    background: #0C3577;
}

.admin-add-plans-page .form-group {
    margin-bottom: 30px;
}

.admin-add-plans-page .api-page-box {
    padding: 80px;
}

.admin-add-plans-page .api-page-box .form-group label {
    font-size: 22px;
    font-weight: 600;
}

span.ongoing-color {
    color: #FF6B00;
}

.admin-api-documentation-page .top-line {
    padding: 0;
    margin: 20px 0 0;
}

.admin-api-documentation-page .api-page-box .btn-main {
    margin: 0 0 0 auto;
}


/* **** End Admin Plans Page **** */


/* **** Admin Setting Page **** */

.admin-setting-page .change-password-block {
    padding: 30px;
}

.admin-setting-page .change-password-block .titlebar {
    margin-top: 0;
}

.admin-setting-page .change-password-block .titlebar h2 {
    background: #F5F5F5;
}

.admin-setting-page .change-password-block .btn-main {
    background: #35196E;
    padding: 10px 80px;
}

.admin-setting-page .change-password-block .btn-main:hover {
    background: #000;
}

.admin-setting-page .form-group {
    margin-bottom: 30px;
}

.admin-setting-page .form-group .download-app {
    margin: 0;
}

/* **** End Admin Setting Page **** */


/* **** Tab Page **** */

.pay-from-upi-tab {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 80px;
}

.pay-from-upi-tab-inner {
    width: 100%;
    position: relative;
    max-width: 380px;
    background: #FDFDFD;
    border: 2px solid #084EBF;
    box-shadow: 16px 18px 42px -7px rgba(0, 0, 0, 0.06);
    padding: 20px;
    margin: 0 auto;
}

.pay-from-upi-tab-inner .nav-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    border: none;
}

.pay-from-upi-tab-inner .nav-tabs li a {
    width: 120px;
    height: 40px;
    background: #F9F9F9;
    border: 1px solid #0051D6;
    border-radius: 8px 0 0 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    text-align: center;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-from-upi-tab-inner .nav-tabs .nav-item.show .nav-link,
.pay-from-upi-tab-inner .nav-tabs .nav-link.active {
    background: #0051D6;
    color: #fff;
    border: 2px solid #0051D6;
}

.pay-from-upi-tab-inner .nav-tabs li:last-child a {
    border-radius: 0px 8px 8px 0px;
}

.pay-from-upi-tab-inner .tab-logo figure {
    margin: 10px auto;
    width: 85px;
}

.pay-from-upi-tab-inner .tab-logo figure img {
    width: 100%;
}

.qr-code-block {
    position: relative;
}

.qr-code-block .form-group label {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #000000;
    margin: 0 0 10px;
}

.qr-code-block .form-group label span {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.5);
}

.qr-code-block .form-group {
    margin: 0 0 10px;
}

.qr-code-block .form-group .form-control {
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 16px;
    color: #000;
}

.qr-code-block .form-group .form-control::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.qr-code-block .form-group .form-control:focus {
    outline: none;
    box-shadow: none;
}

.qr-code-block-scan figure {
    margin: 0 auto;
    width: 50%;
}

.qr-code-block-scan figure img {
    width: 100%;
}

.qr-code-block-time {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.qr-code-block-time span {
    background: #FFFFFF;
    border: 1px solid #065EE0;
    border-radius: 8px;
    display: inline-block;
    padding: 5px 15px;
    font-size: 16px;
    line-height: 140%;
    color: #065EE0;
    margin: 0 auto;
    font-weight: 800;
}

.qr-code-block-wait p,
.qr-code-block-btn p {
    text-align: center;
    font-size: 15px;
    line-height: 140%;
    color: #000;
    margin: 0;
}

.qr-code-block-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 15px 0 0;
}

.qr-code-block-btn .btn-main {
    font-size: 14px;
    padding: 10px;
    margin: 0;
    background: #084EBF;
}

.qr-code-block-btn .btn-main:hover {
    background: #35196E;
}

.qr-code-block .form-group .keybox {
    width: 100%;
    position: relative;
    margin: 0 0 20px;
}

.qr-code-block .form-group .keybox button {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #868686;
    position: absolute;
    top: 10px;
    right: 12px;
    font-weight: 600;
}

.qr-code-block .form-group .keybox .form-control {
    padding-right: 40px;
}

.input-file-container {
    position: relative;
    width: 40%;
    margin: 0 auto;
}

.input-file-trigger {
    display: block;
    padding: 12px 20px;
    color: #ABA9A9;
    font-size: 12px;
    transition: all .4s;
    cursor: pointer;
    background: #F7F7F7;
    border: 1px solid #ABA9A9;
    border-radius: 10px;
    text-align: center;
    z-index: 0;
    position: relative;
}

.input-file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    padding: 22px;
    cursor: pointer;
    height: 100%;
    z-index: 9;
}

.qr-code-modal .tab-logo figure {
    margin: 10px auto;
    width: 85px;
}

.qr-code-modal .tab-logo figure img {
    width: 100%;
}

.qr-code-modal-title h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    text-align: center;
    color: #084EBF;
    margin: 20px 0 40px;
}

.qr-code-modal .modal-header .btn-close {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
    background: #C71111;
    font-size: 18px;
    border: none;
    color: #fff;
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 1;
    z-index: 2;
}

.qr-code-modal .modal-header {
    padding: 0;
    border: none;
}

.qr-code-modal .form-group {
    margin: 20px 0 0;
}

.qr-code-modal .form-group label {
    font-size: 15px;
    margin: 0 0 10px;
}

.qr-code-modal .form-group .check-img-box figure {
    margin: 0;
    background: #F8F8F8;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.qr-code-modal .form-group .check-img-box figure img {
    width: 100%;
}

.qr-code-modal .btn-main {
    font-size: 14px;
    padding: 10px 25px;
    margin: 20px auto 10px;
    background: #084EBF;
}

.qr-code-modal .btn-main:hover {
    background: #35196E;
}

.qr-code-modal .modal-dialog .modal-content {
    width: 100%;
    position: relative;
    max-width: 380px;
    background: #FDFDFD;
    border: 2px solid #084EBF;
    box-shadow: 16px 18px 42px -7px rgba(0, 0, 0, 0.06);
    border-radius: 0;
    margin: 0 auto;
}

.pay-from-upi-tab2 .qr-code-block-wait p i {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
}

.pay-from-upi-tab2 .qr-code-block-wait {
    margin: 0px 0 10px;
}

.pay-from-upi-tab2 .qr-code-block-btn .btn-main {
    margin: 5px auto;
}

.app-list-boxs h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #084EBF;
    margin: 15px 0 2px;
}

.app-list-boxs ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
}

.app-list-boxs ul li {
    background: #FFFFFF;
    box-shadow: 0px 10px 21px rgba(0, 0, 0, 0.13), inset 0px 0px 11px rgba(159, 159, 159, 0.25);
    border-radius: 8px;
    margin: 0 7px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.app-list-boxs ul li a figure {
    margin: 0;
}

.app-list-boxs ul li a figure img {
    width: 100%;
}

/* **** End Tab Page **** */
/******** Payment bottom sheet modals **********/
.pay-bottom-sheet.modal {
    /* display: flex !important; */
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

.pay-bottom-sheet.modal.fade .modal-dialog.pay-bottom-sheet__dialog {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.pay-bottom-sheet.modal.fade:not(.show) .modal-dialog.pay-bottom-sheet__dialog {
    transform: translate(-50%, 100%) !important;
}

.pay-bottom-sheet .modal-dialog.pay-bottom-sheet__dialog {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: auto;
    top: auto;
    margin: 0 !important;
    width: 100%;
    max-width: 390px;
    height: auto;
    transform: translate(-50%, 100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
}

.pay-bottom-sheet.show .modal-dialog.pay-bottom-sheet__dialog,
.pay-bottom-sheet.modal.show .modal-dialog.pay-bottom-sheet__dialog {
    transform: translate(-50%, 0) !important;
}

.pay-bottom-sheet .modal-content.pay-bottom-sheet__content {
    border: none;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.pay-bottom-sheet--processing .pay-bottom-sheet__content {
    background: linear-gradient(180deg, #eff6ff 0%, #fff 38%);
}

.pay-bottom-sheet--success .pay-bottom-sheet__content {
    background: linear-gradient(180deg, rgba(79, 192, 84, 0.22) 0%, rgba(79, 192, 84, 0.08) 42%, #fff 100%);
    border: 2px solid #4FC054;
    border-bottom: none;
    box-shadow: 0 -12px 36px rgba(79, 192, 84, 0.18);
}

.pay-bottom-sheet--fail .pay-bottom-sheet__content {
    background: linear-gradient(180deg, rgba(242, 19, 0, 0.16) 0%, rgba(242, 19, 0, 0.06) 42%, #fff 100%);
    border: 2px solid #f21300;
    border-bottom: none;
    box-shadow: 0 -12px 36px rgba(242, 19, 0, 0.14);
}

.pay-bottom-sheet .modal-body.pay-bottom-sheet__body {
    padding: 0.35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.pay-bottom-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 0.6rem auto 1rem;
    border-radius: 999px;
    background: #cbd5e1;
}

.pay-bottom-sheet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    position: relative;
}

.pay-bottom-sheet__icon i {
    font-size: 1.4rem;
    line-height: 1;
}

.pay-bottom-sheet__icon--processing {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1);
}

.pay-bottom-sheet__icon--processing i {
    font-size: 1.3rem;
    animation: pay-bottom-sheet-fly 1.2s ease-in-out infinite;
}

.pay-bottom-sheet__icon-motion {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 1rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2563eb);
    border-radius: 999px;
    transform: translateY(-50%);
    animation: pay-bottom-sheet-motion 1.2s ease-in-out infinite;
}

.pay-bottom-sheet__icon-motion::before,
.pay-bottom-sheet__icon-motion::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2563eb);
    border-radius: 999px;
    opacity: 0.55;
}

.pay-bottom-sheet__icon-motion::before {
    top: -5px;
    width: 70%;
}

.pay-bottom-sheet__icon-motion::after {
    bottom: -5px;
    width: 85%;
}

.pay-bottom-sheet__icon--success {
    color: #4FC054;
    background: rgba(79, 192, 84, 0.12);
    box-shadow: 0 0 0 6px rgba(79, 192, 84, 0.1);
}

.pay-bottom-sheet__icon--success i {
    font-size: 1.3rem;
    animation: pay-bottom-sheet-pop 1.1s ease-in-out infinite;
}

.pay-bottom-sheet__icon--fail {
    color: #f21300;
    background: rgba(242, 19, 0, 0.1);
    box-shadow: 0 0 0 6px rgba(242, 19, 0, 0.08);
}

.pay-bottom-sheet__icon--fail i {
    font-size: 1.3rem;
    animation: pay-bottom-sheet-shake 1.1s ease-in-out infinite;
}

.pay-bottom-sheet__icon-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: pay-bottom-sheet-ring 1.4s ease-out infinite;
}

.pay-bottom-sheet__icon-ring--success {
    border-color: rgba(79, 192, 84, 0.45);
}

.pay-bottom-sheet__icon-ring--fail {
    border-color: rgba(242, 19, 0, 0.4);
}

@keyframes pay-bottom-sheet-pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.14);
    }
}

@keyframes pay-bottom-sheet-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

@keyframes pay-bottom-sheet-ring {
    0% {
        transform: scale(0.92);
        opacity: 0.9;
    }
    70% {
        transform: scale(1.18);
        opacity: 0.15;
    }
    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

@keyframes pay-bottom-sheet-fly {
    0%, 100% {
        transform: translate(0, 0) rotate(-8deg);
    }
    50% {
        transform: translate(3px, -3px) rotate(-4deg);
    }
}

@keyframes pay-bottom-sheet-motion {
    0%, 100% {
        opacity: 0.25;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) translateX(-4px);
    }
}

.pay-bottom-sheet__title {
    margin: 0 0 0.3rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
}

.pay-bottom-sheet--processing .pay-bottom-sheet__title {
    color: #1d4ed8;
}

.pay-bottom-sheet--success .pay-bottom-sheet__title {
    color: #4FC054;
}

.pay-bottom-sheet--fail .pay-bottom-sheet__title {
    color: #f21300;
}

.pay-bottom-sheet__amount {
    margin: 0 0 0.3rem;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    color: #4FC054;
}

.pay-bottom-sheet__subtitle {
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #6b7280;
    font-weight: 400;
}

.pay-bottom-sheet--processing .pay-bottom-sheet__subtitle {
    margin-bottom: 0.35rem;
    color: #3b82f6;
}

.pay-bottom-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pay-bottom-sheet__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.85rem;
    padding: 0.7rem 1.15rem;
    border: none;
    border-radius: 999px;
    color: #fff !important;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pay-bottom-sheet--success .pay-bottom-sheet__btn {
    background: #4FC054;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(79, 192, 84, 0.32);
}

.pay-bottom-sheet--success .pay-bottom-sheet__btn:hover {
    background: #45ad49;
    color: #fff !important;
    transform: translateY(-1px);
}

.pay-bottom-sheet--fail .pay-bottom-sheet__btn {
    background: #f21300;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(242, 19, 0, 0.28);
}

.pay-bottom-sheet--fail .pay-bottom-sheet__btn:hover {
    background: #d91100;
    color: #fff !important;
    transform: translateY(-1px);
}

.pay-bottom-sheet__btn--outline {
    background: #f21300;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(242, 19, 0, 0.22);
}

.pay-bottom-sheet__btn--outline:hover {
    background: #d91100;
    color: #fff !important;
}

/******** PAYMENT SUCCESSFUL Modal **********/
/* —— Admin: blog list buttons (avoid .btn-edit 30×30 clipping text) —— */
.admin-blogs-page .jg-blog-admin-btn {
    font-weight: 600;
    border-radius: 10px !important;
    padding: 0.35rem 0.95rem !important;
    letter-spacing: 0.01em;
    border-width: 1px !important;
}

.admin-blogs-page .jg-blog-admin-btn--view {
    background: linear-gradient(135deg, var(--site-secondary), var(--color-brand)) !important;
    border: none !important;
    color: #fff !important;
}

.admin-blogs-page .jg-blog-admin-btn--view:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

.admin-blogs-page .jg-blog-admin-btn--edit {
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff) !important;
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent) !important;
    color: var(--color-brand-deep) !important;
}

.admin-blogs-page .jg-blog-admin-btn--delete {
    border-color: #dc3545 !important;
    color: #c82333 !important;
    background: #fff5f5 !important;
}

.admin-blogs-page .jg-blog-admin-btn--delete:hover {
    background: #ffe5e8 !important;
    color: #a71d2a !important;
}

.admin-blogs-page .jg-blog-table__image-col {
    width: 88px;
}

.admin-blogs-page .jg-blog-table__title {
    font-weight: 600;
    color: var(--color-brand-deep);
}

.admin-blogs-page .jg-blog-table-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: linear-gradient(180deg, #fff 0%, var(--site-light) 100%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 10%, transparent);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-blogs-page .jg-blog-table-thumb:hover {
    border-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
    transform: scale(1.04);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.admin-blogs-page .jg-blog-table-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-blogs-page .jg-blog-table-thumb--empty {
    color: color-mix(in srgb, var(--color-brand) 45%, #9ca3af);
    font-size: 1.15rem;
    border-style: dashed;
    background: color-mix(in srgb, var(--color-brand) 4%, #fff);
}

.admin-blogs-page .jg-blog-table tbody td {
    vertical-align: middle;
}

.admin-blogs-form-page .jg-blog-featured-preview {
    display: inline-flex;
    margin-bottom: 0.75rem;
    padding: 0.35rem;
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: linear-gradient(180deg, #fff 0%, var(--site-light) 100%);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.admin-blogs-form-page .jg-blog-featured-preview img {
    display: block;
    max-width: 220px;
    max-height: 140px;
    width: auto;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.admin-blogs-form-page .admin-blogs-form-actions {
    margin-top: 0.75rem;
    margin-bottom: 2rem;
}

.admin-blogs-form-page .jg-blog-form-submit {
    min-height: 3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(53, 25, 110, 0.25);
}

.admin-blogs-form-page #cke_blog-content {
    margin-bottom: 1rem;
}

.admin-blogs-form-page fieldset.border {
    background: rgba(248, 247, 255, 0.65);
}

/* ===== Merged from css/model_dialog.css ===== */
/* Model Dialog Custom Styles - Enhanced Attractive Design */
/* Uncomment the CSS link in admin.blade.php to enable these styles */
/* Comment the CSS link to use the default styles from style.css */

/* Modal Backdrop - Enhanced */
.modal.fade.add-new-upi-modal .modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
}

.modal.fade.add-new-upi-modal.show .modal-backdrop {
    animation: fadeInBackdrop 0.3s ease-out;
}

@keyframes fadeInBackdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal.fade.add-new-upi-modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal.fade.add-new-upi-modal.show .modal-dialog {
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Dialog */
.add-new-upi-modal .modal-dialog {
    /* max-width: 550px; */
    margin: 1.75rem auto;
    position: relative;
}

.add-new-upi-modal .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

/* WhatsApp Button */
.float-whatsapp-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1020;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #25d366, #128c7e);
    color: #fff !important;
    font-size: 1.65rem;
    box-shadow: 0 10px 30px rgba(18, 140, 126, 0.45);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

/* Modal Content - Enhanced with Glassmorphism */
.add-new-upi-modal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(12, 53, 119, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #FFFFFF;
    position: relative;
    transform: translateZ(0);
}

.add-new-upi-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #0C3577 0%, 
        #1a4a9e 25%, 
        #2d5fc4 50%, 
        #1a4a9e 75%, 
        #0C3577 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Modal Header - Premium Gradient */
.add-new-upi-modal .modal-header {
    background: linear-gradient(135deg, 
        #0C3577 0%, 
        #1a4a9e 30%, 
        #2d5fc4 60%, 
        #1a4a9e 100%);
    border-radius: 0;
    padding: 25px 35px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.add-new-upi-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.add-new-upi-modal .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
}

/* Modal Title - Enhanced Typography */
.add-new-upi-modal .modal-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.add-new-upi-modal .modal-title figure {
    margin: 0 15px 0 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.add-new-upi-modal .modal-title figure:hover {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.25);
}

.add-new-upi-modal .modal-title figure img {
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

/* Close Button - Premium Design */
.add-new-upi-modal .modal-header .btn-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.add-new-upi-modal .modal-header .btn-close i {
    color: #FFFFFF;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.add-new-upi-modal .modal-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.add-new-upi-modal .modal-header .btn-close:active {
    transform: rotate(90deg) scale(0.95);
}

.add-new-upi-modal .modal-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3),
                0 4px 15px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Modal Body - Enhanced Spacing */
.add-new-upi-modal .modal-body {
    padding: 40px 35px;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    position: relative;
}

/* Form Group - Enhanced */
.add-new-upi-modal .modal-body .form-group {
    margin: 0 0 28px;
    position: relative;
}

.add-new-upi-modal .modal-body .form-group:last-of-type {
    margin-bottom: 0px;
}

/* Labels - Modern Design */
.add-new-upi-modal .modal-body .form-group label {
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: #2C3E50;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-left: 5px;
}

.add-new-upi-modal .modal-body .form-group label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #0C3577 0%, transparent 100%);
    border-radius: 2px;
}

/* Merchant Type Image Radios */
.add-new-upi-modal .modal-body .merchant-type-selector {
    align-items: center;
    margin-bottom: 32px;
    gap: 14px !important;
}

.add-new-upi-modal .modal-body .merchant-type-option {
    position: relative;
    flex: 0 0 calc(16.66% - 12px);
    min-width: 150px;
}

.add-new-upi-modal .modal-body .merchant-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.add-new-upi-modal .modal-body .merchant-type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 96px;
    width: 100%;
    margin-bottom: 0;
    padding: 12px 12px 10px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    border: 2px solid #E6ECF5;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    box-shadow: 0 10px 25px rgba(12, 53, 119, 0.08);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.add-new-upi-modal .modal-body .merchant-type-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #B8C6DB;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 4px #FFFFFF;
    transition: all 0.25s ease;
}

.add-new-upi-modal .modal-body .merchant-type-label:hover {
    border-color: #9AB0D5;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(12, 53, 119, 0.14);
}

.add-new-upi-modal .modal-body .merchant-type-label::after {
    display: none;
}

.add-new-upi-modal .modal-body .merchant-type-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}

.add-new-upi-modal .modal-body .merchant-type-label img {
    display: block;
    height: auto;
    max-height: 34px;
    width: auto;
    max-width: 100px;
}

.add-new-upi-modal .modal-body .merchant-type-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #41556F;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.add-new-upi-modal .modal-body .merchant-type-option input[type="radio"]:checked + .merchant-type-label {
    border-color: #2D5FC4;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%);
    box-shadow: 0 16px 34px rgba(45, 95, 196, 0.22);
}

.add-new-upi-modal .modal-body .merchant-type-option input[type="radio"]:checked + .merchant-type-label::before {
    border-color: #2D5FC4;
    background: #2D5FC4;
    box-shadow: inset 0 0 0 4px #FFFFFF;
}

.add-new-upi-modal .modal-body .merchant-type-option input[type="radio"]:checked + .merchant-type-label .merchant-type-name {
    color: #0C3577;
}

.add-new-upi-modal .modal-body .merchant-type-option input[type="radio"]:focus + .merchant-type-label {
    box-shadow: 0 0 0 4px rgba(45, 95, 196, 0.14),
                0 16px 34px rgba(45, 95, 196, 0.18);
}

/* Form Controls - Premium Input Design */
.add-new-upi-modal .modal-body .form-group .form-control {
    background: #FFFFFF;
    border: 2px solid #E8ECEF;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    color: #2C3E50;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

.add-new-upi-modal .modal-body .form-group .form-control:hover {
    border-color: #0C3577;
    box-shadow: 0 4px 12px rgba(12, 53, 119, 0.1);
    transform: translateY(-1px);
}

.add-new-upi-modal .modal-body .form-group .form-control:focus {
    background: #FFFFFF;
    border-color: #0C3577;
    box-shadow: 0 0 0 4px rgba(12, 53, 119, 0.1),
                0 4px 16px rgba(12, 53, 119, 0.15);
    outline: none;
    transform: translateY(-2px);
}

.add-new-upi-modal .modal-body .form-group .form-control::placeholder {
    color: #95A5A6;
    opacity: 0.8;
    font-weight: 400;
}

/* Select Dropdown - Enhanced */
.add-new-upi-modal .modal-body .form-group select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%230C3577' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 45px;
    background-color: #FFFFFF;
}

/* Buttons - Premium Design */
.add-new-upi-modal .modal-body .d-flex.gap-2 {
    gap: 15px !important;
    margin-top: 10px;
}

.add-new-upi-modal .modal-body .btn-main {
    padding: 14px 30px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font-app, "Poppins", sans-serif);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 4px 20px rgba(53, 25, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.add-new-upi-modal .modal-body .btn-main::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.add-new-upi-modal .modal-body .btn-main:hover::before {
    width: 300px;
    height: 300px;
}

.add-new-upi-modal .modal-body .btn-main span,
.add-new-upi-modal .modal-body .btn-main {
    position: relative;
    z-index: 1;
}

/* Cancel Button */
.add-new-upi-modal .modal-body .btn-main[data-bs-dismiss="modal"] {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

.add-new-upi-modal .modal-body .btn-main[data-bs-dismiss="modal"]:hover {
    background: #e2e8f0 !important;
    color: #334155 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}

/* Submit Button */
.add-new-upi-modal .modal-body .btn-main[type="submit"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #4a2a8a 0%, #35196e 50%, #2a1458 100%) !important;
    color: #FFFFFF !important;
    animation: none;
}

.add-new-upi-modal .modal-body .btn-main[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow:
        0 8px 26px rgba(53, 25, 110, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.add-new-upi-modal .modal-body .btn-main:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Merchant Setup Video Card */
.add-new-upi-modal .modal-body .merchant-type-video-wrap {
    margin-top: 18px;
}

.add-new-upi-modal .modal-body .merchant-type-video-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(45, 95, 196, 0.18);
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #ffffff 100%);
    box-shadow: 0 12px 28px rgba(24, 62, 128, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.add-new-upi-modal .modal-body .merchant-type-video-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 48%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

.add-new-upi-modal .modal-body .merchant-type-video-link:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 95, 196, 0.34);
    box-shadow: 0 18px 36px rgba(24, 62, 128, 0.18);
}

.add-new-upi-modal .modal-body .merchant-type-video-link:hover::before {
    transform: translateX(130%);
}

.add-new-upi-modal .modal-body .merchant-type-video-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #0C3577 0%, #2D5FC4 100%);
    color: #FFFFFF;
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(12, 53, 119, 0.24);
    transition: transform 0.25s ease;
}

.add-new-upi-modal .modal-body .merchant-type-video-link:hover .merchant-type-video-icon {
    transform: scale(1.06) rotate(-4deg);
}

.add-new-upi-modal .modal-body .merchant-type-video-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.add-new-upi-modal .modal-body .merchant-type-video-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6A84B4;
}

.add-new-upi-modal .modal-body .merchant-type-video-title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #15345E;
}

.add-new-upi-modal .modal-body .merchant-type-video-subtitle {
    font-size: 12px;
    line-height: 1.4;
    color: #70839E;
}

.add-new-upi-modal .modal-body .merchant-type-video-arrow {
    position: relative;
    z-index: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(45, 95, 196, 0.1);
    color: #2D5FC4;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.add-new-upi-modal .modal-body .merchant-type-video-link:hover .merchant-type-video-arrow {
    transform: translateX(4px);
    background: rgba(45, 95, 196, 0.16);
}

/* Responsive Design - Enhanced */
@media (max-width: 576px) {
    .add-new-upi-modal .modal-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }

    .add-new-upi-modal .modal-header {
        padding: 20px 25px;
    }

    .add-new-upi-modal .modal-title {
        font-size: 20px;
    }

    .add-new-upi-modal .modal-title figure {
        width: 40px;
        height: 40px;
        margin: 0 12px 0 0;
        padding: 8px;
    }

    .add-new-upi-modal .modal-body {
        padding: 30px 25px;
    }

    .add-new-upi-modal .modal-body .form-group {
        margin: 0 0 22px;
    }

    .add-new-upi-modal .modal-body .btn-main {
        padding: 12px 20px;
        font-size: 14px;
    }

    .add-new-upi-modal .modal-body .merchant-type-video-link {
        padding: 14px 15px;
        gap: 12px;
    }

    .add-new-upi-modal .modal-body .merchant-type-video-icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .add-new-upi-modal .modal-body .merchant-type-video-title {
        font-size: 14px;
    }
}

/* Tablet Responsive */
@media (min-width: 577px) and (max-width: 768px) {
    .add-new-upi-modal .modal-dialog {
        max-width: 90%;
    }
}

/* Smooth Scrollbar for Select */
.add-new-upi-modal .modal-body .form-group select.form-control::-webkit-scrollbar {
    width: 8px;
}

.add-new-upi-modal .modal-body .form-group select.form-control::-webkit-scrollbar-track {
    background: #F1F1F1;
    border-radius: 10px;
}

.add-new-upi-modal .modal-body .form-group select.form-control::-webkit-scrollbar-thumb {
    background: #0C3577;
    border-radius: 10px;
}

.add-new-upi-modal .modal-body .form-group select.form-control::-webkit-scrollbar-thumb:hover {
    background: #0a2d63;
}


/* ===== Merged from css/new_design_style.css ===== */
/* New Beautiful Table Design — card rows, soft header, Poppins via var(--font-app) */

.balance-row .table-responsive {
    background: #f4f6f9;
    border-radius: 16px;
    padding: 12px 12px 4px;
    font-size: 13px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
}

.balance-row table {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: 0;
    white-space: nowrap;
    width: 100%;
    min-width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    font-family: var(--font-app, "Poppins", sans-serif);
}

/* Table header — neutral bar (reference: small caps, gray) */
.balance-row table thead {
    background: transparent;
}

.balance-row table thead tr {
    box-shadow: none;
}

.balance-row table thead th {
    padding: 10px 14px 14px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    vertical-align: bottom;
}

.balance-row table thead th:not(:last-child) {
    border-right: none;
}

.balance-row table thead th:first-child,
.balance-row table thead th:last-child {
    border-radius: 0;
}

/* Card-style body rows */
.balance-row table tbody {
    background: transparent;
}

.balance-row table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    background: #ffffff;
    text-align: center;
    border: none;
    vertical-align: middle;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.balance-row table tbody td:first-child {
    border-left: 1px solid #eef2f7;
    border-radius: 14px 0 0 14px;
}

.balance-row table tbody td:last-child {
    border-right: 1px solid #eef2f7;
    border-radius: 0 14px 14px 0;
}

.balance-row table tbody tr {
    transition: filter 0.2s ease;
}

.balance-row table tbody tr:hover td {
    background: #fafbfc;
    color: #1e293b;
    font-weight: 500;
}

/* Last Row Styling */
.balance-row table tbody tr:last-child td:first-child {
    border-radius: 14px 0 0 14px;
}

.balance-row table tbody tr:last-child td:last-child {
    border-radius: 0 14px 14px 0;
}

/* Highlight Row (for special rows like date separators) */
.balance-row table tbody tr.highlight td {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.14) 0%, rgba(255, 193, 7, 0.06) 100%) !important;
    font-weight: 600;
    color: #854d0e;
}

.balance-row table tbody tr.date-separator-row td {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 600;
    color: #475569;
    padding: 12px 15px;
}

/* Badge Styles - Modern and Compact (original) */
.balance-row table tbody td .badge {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.balance-row table tbody td .badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.balance-row table tbody td .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff;
}

.balance-row table tbody td .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff;
}

/* Action Buttons - Modern Style */
.balance-row table tbody td .btn-delete,
.balance-row table tbody td .btn,
.balance-row table tbody td a {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    margin: 2px;
}

/* Action Column - Ensure buttons are visible */
.balance-row table tbody td.text-nowrap,
.balance-row table tbody td.text-center.text-nowrap {
    white-space: nowrap !important;
    min-width: fit-content;
}

/* Action Button Groups */
.balance-row table tbody td .d-flex {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.balance-row table tbody td .btn-delete:hover,
.balance-row table tbody td .btn:hover,
.balance-row table tbody td a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.balance-row table tbody td .btn-delete i,
.balance-row table tbody td .btn i,
.balance-row table tbody td a i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.balance-row table tbody td .btn-delete:hover i,
.balance-row table tbody td .btn:hover i,
.balance-row table tbody td a:hover i {
    transform: scale(1.1);
}

/* Success/Error Color Text */
.balance-row table tbody td .success-color {
    color: #28a745;
    font-weight: 500;
}

.balance-row table tbody td .text-success {
    color: #28a745 !important;
    font-weight: 500;
}

.balance-row table tbody td .text-danger {
    color: #dc3545 !important;
    font-weight: 500;
}

/* Ensure table maintains width for horizontal scroll */
.balance-row .table-responsive > table {
    margin-bottom: 0;
    width: 100%;
    min-width: max-content;
}

.balance-row .table-responsive .table-footer td {
    background-color: #0C3D86;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    padding: 10px 14px;
}

/* Support for table-sm and table-hover classes */
.balance-row .table-responsive table.table-sm {
    font-size: 12px;
}

.balance-row .table-responsive table.table-sm thead th {
    padding: 10px 12px;
    font-size: 11px;
}

.balance-row .table-responsive table.table-sm tbody td {
    padding: 8px 12px;
    font-size: 12px;
}

.balance-row .table-responsive table.table-hover tbody tr:hover td {
    background: #f1f5f9;
}

/* Support for table-dark header */
.balance-row .table-responsive table thead.table-dark {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
}

.balance-row .table-responsive table thead.table-dark th {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Empty State */
.balance-row table tbody tr td.text-center[colspan] {
    padding: 30px 20px;
    color: #6c757d;
    font-style: italic;
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
}

/* Small Text Styling */
.balance-row table tbody td small {
    font-size: 11px;
    line-height: 1.6;
    display: block;
}

/* Button Groups in Table */
.balance-row table tbody td .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .balance-row table thead th {
        padding: 10px 8px;
        font-size: 11px;
    }
    
    .balance-row table tbody td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Special Button Styles for Merchant Management */
.balance-row table tbody td .btn-wallet,
.balance-row table tbody td .btn-edit,
.balance-row table tbody td .btn-share {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 30px;
    height: 30px;
    margin: 2px;
}

/* Compact table "Login" / small primary actions — aligned, lighter weight, flatter shadow */
.balance-row table tbody td a.btn-main,
.balance-row table tbody td button.btn-main {
    width: 100%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    margin: 2px;
    vertical-align: middle;
    border-radius: 9999px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, #45307a 0%, #35196e 52%, #2a1458 100%) !important;
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.2) !important;
}

.balance-row table tbody td a.btn-main:hover,
.balance-row table tbody td button.btn-main:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(53, 25, 110, 0.26) !important;
}

/* Focus States for Accessibility */
.balance-row table tbody td a:focus,
.balance-row table tbody td .btn:focus {
    outline: 2px solid #35196E;
    outline-offset: 2px;
}

/* No Settlement Found - Empty State Row */
.no-settlement-cell {
    padding: 20px 15px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #6c757d;
}

.no-settlement-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.no-settlement-icon {
    font-size: 18px;
    color: #adb5bd;
}

.no-settlement-text {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.btn-create-settlement {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    padding: 6px 16px;
}

.btn-create-settlement:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

/* ========== Dashboard tabs — pill style ========== */
.main-part-body .nav.nav-tabs {
    border-bottom: none;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    padding: 0 2px;
    margin-bottom: 1rem !important;
}

.main-part-body .nav.nav-tabs .nav-item {
    margin-bottom: 0;
}

.main-part-body .nav.nav-tabs .nav-link {
    margin-bottom: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.45rem 1.2rem;
    font-family: var(--font-app, "Poppins", sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    color: #64748b;
    background: #ffffff;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-part-body .nav.nav-tabs .nav-link:hover {
    color: #334155;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.main-part-body .nav.nav-tabs .nav-link.active,
.main-part-body .nav.nav-tabs .nav-link.active:focus {
    color: #ffffff !important;
    background: #35196e !important;
    border-color: #35196e !important;
    box-shadow: 0 2px 10px rgba(53, 25, 110, 0.25);
}

/* Optional: underline secondary tabs — add class nav-underline next to nav-tabs */
.main-part-body .nav.nav-tabs.nav-underline {
    border-bottom: 1px solid #e2e8f0;
    gap: 1rem 1.25rem;
    padding-bottom: 0;
}

.main-part-body .nav.nav-tabs.nav-underline .nav-link {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.15rem;
    margin-bottom: -1px;
    background: transparent;
    color: #94a3b8;
    box-shadow: none;
}

.main-part-body .nav.nav-tabs.nav-underline .nav-link:hover {
    color: #64748b;
    border-bottom-color: transparent;
    background: transparent;
}

.main-part-body .nav.nav-tabs.nav-underline .nav-link.active,
.main-part-body .nav.nav-tabs.nav-underline .nav-link.active:focus {
    color: #35196e !important;
    background: transparent !important;
    border-color: transparent !important;
    border-bottom-color: #35196e !important;
    font-weight: 600;
    box-shadow: none;
}

/* Bootstrap 5 standalone .nav-underline (if used without .nav-tabs) */
.main-part-body .nav.nav-underline {
    border-bottom: 1px solid #e2e8f0;
    gap: 1rem;
}

.main-part-body .nav.nav-underline .nav-link {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.25rem;
    margin-bottom: -1px;
    color: #94a3b8;
    background: transparent;
    font-family: var(--font-app, "Poppins", sans-serif);
    font-weight: 500;
}

.main-part-body .nav.nav-underline .nav-link.active {
    color: #35196e !important;
    font-weight: 600;
    border-bottom-color: #35196e !important;
    background: transparent !important;
}


/* New card Design */
.sort-card {
    background: #fff;
    border: 1px solid #35196e;
    padding: 20px 20px;
    border-radius: 14px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.sort-card .title{
    color: #35196e;
    font-size: 18px;
    font-weight: 600;
}

.sort-card .text{
    color: #032448;
    font-size: 16px;
    font-weight: 500;
}


/* ===== Merged from css/kyc.css ===== */
/* KYC status — light tints (brand hex as accent, not heavy fills) */
:root {
    --kyc-pending: #EFCE2F;
    --kyc-pending-bg: rgba(239, 206, 47, 0.14);
    --kyc-pending-border: rgba(239, 206, 47, 0.45);
    --kyc-pending-text: #7a6a12;

    --kyc-submitted: #2D5FC4;
    --kyc-submitted-bg: rgba(45, 95, 196, 0.12);
    --kyc-submitted-border: rgba(45, 95, 196, 0.4);
    --kyc-submitted-text: #1e3f8a;

    --kyc-approved: #09A847;
    --kyc-approved-bg: rgba(9, 168, 71, 0.1);
    --kyc-approved-border: rgba(9, 168, 71, 0.4);
    --kyc-approved-text: #09863f;

    --kyc-rejected: #E40714;
    --kyc-rejected-bg: rgba(228, 7, 20, 0.08);
    --kyc-rejected-border: rgba(228, 7, 20, 0.35);
    --kyc-rejected-text: #c40610;

    --kyc-brand: var(--color-brand, #35196E);
    --kyc-brand-soft: rgba(53, 25, 110, 0.04);
}

/* —— Admin profile page —— */
.customer-profile-page .kyc-admin-card {
    padding: 1.1rem 1.15rem 1.25rem;
    margin-top: 0;
}

.customer-profile-page .kyc-admin-card .kyc-doc-card__title {
    font-size: 0.95rem;
}

.kyc-overall-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kyc-overall-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kyc-brand);
    text-align: left;
}

.kyc-overall-card__hint {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    max-width: 26rem;
    line-height: 1.45;
}

/* Segmented status control (3 cols on cards, 2 on overall) */
.kyc-status-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
}

.kyc-status-picker--overall {
    grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
    width: auto;
    min-width: 20rem;
}

.kyc-status-picker__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.kyc-status-picker__option {
    margin: 0;
    cursor: pointer;
    min-width: 0;
}

.kyc-status-picker__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.35rem;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: 1px solid #e8ecf1;
    background: #fafbfc;
    color: #9aa3af;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    min-height: 2.15rem;
}

.kyc-status-picker__pill i {
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Hover — whisper of status color */
.kyc-status-picker__option--pending:hover .kyc-status-picker__pill {
    background: var(--kyc-pending-bg);
    border-color: var(--kyc-pending-border);
    color: var(--kyc-pending-text);
}

.kyc-status-picker__option--submitted:hover .kyc-status-picker__pill {
    background: var(--kyc-submitted-bg);
    border-color: var(--kyc-submitted-border);
    color: var(--kyc-submitted-text);
}

.kyc-status-picker__option--approved:hover .kyc-status-picker__pill {
    background: var(--kyc-approved-bg);
    border-color: var(--kyc-approved-border);
    color: var(--kyc-approved-text);
}

.kyc-status-picker__option--rejected:hover .kyc-status-picker__pill {
    background: var(--kyc-rejected-bg);
    border-color: var(--kyc-rejected-border);
    color: var(--kyc-rejected-text);
}

/* Selected — light fill + colored text (no solid blocks) */
.kyc-status-picker__option--pending .kyc-status-picker__input:checked + .kyc-status-picker__pill {
    background: var(--kyc-pending-bg);
    border-color: var(--kyc-pending-border);
    color: var(--kyc-pending-text);
    font-weight: 700;
}

.kyc-status-picker__option--pending .kyc-status-picker__input:checked + .kyc-status-picker__pill i {
    color: var(--kyc-pending);
}

.kyc-status-picker__option--submitted .kyc-status-picker__input:checked + .kyc-status-picker__pill {
    background: var(--kyc-submitted-bg);
    border-color: var(--kyc-submitted-border);
    color: var(--kyc-submitted-text);
    font-weight: 700;
}

.kyc-status-picker__option--submitted .kyc-status-picker__input:checked + .kyc-status-picker__pill i {
    color: var(--kyc-submitted);
}

.kyc-status-picker__option--approved .kyc-status-picker__input:checked + .kyc-status-picker__pill {
    background: var(--kyc-approved-bg);
    border-color: var(--kyc-approved-border);
    color: var(--kyc-approved-text);
    font-weight: 700;
}

.kyc-status-picker__option--approved .kyc-status-picker__input:checked + .kyc-status-picker__pill i {
    color: var(--kyc-approved);
}

.kyc-status-picker__option--rejected .kyc-status-picker__input:checked + .kyc-status-picker__pill {
    background: var(--kyc-rejected-bg);
    border-color: var(--kyc-rejected-border);
    color: var(--kyc-rejected-text);
    font-weight: 700;
}

.kyc-status-picker__option--rejected .kyc-status-picker__input:checked + .kyc-status-picker__pill i {
    color: var(--kyc-rejected);
}

.kyc-status-picker__input:focus-visible + .kyc-status-picker__pill {
    outline: 2px solid var(--kyc-brand);
    outline-offset: 2px;
}

/* Document card controls */
.kyc-admin-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    margin-top: 0.15rem;
    border-top: 1px dashed rgba(53, 25, 110, 0.15);
}

.kyc-admin-controls__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kyc-admin-controls__row--status {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.kyc-admin-controls__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kyc-brand);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* KYC rejection reason input should match change-password styling */
.kyc-admin-form .kyc-rejection-reason {
    width: 100%;
}

.kyc-admin-form .kyc-rejection-reason .keybox {
    position: relative;
    width: 100%;
}

.kyc-admin-form .kyc-rejection-reason__textarea.form-control {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    min-height: 6rem;
    resize: vertical;
}

.kyc-admin-form .kyc-rejection-reason__textarea.form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 10%, transparent);
    outline: none;
}

.kyc-doc-card--admin .kyc-preview {
    min-height: 130px;
    border-radius: 12px;
    border-color: rgba(53, 25, 110, 0.15);
    background: var(--kyc-brand-soft);
}

.kyc-doc-card--admin .kyc-doc-card__header {
    align-items: center;
}

/* Customer KYC inputs should match change-password styling */
.kyc-page .settings-password-form .settings-password-form__label {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.kyc-page .settings-password-form .keybox {
    position: relative;
    width: 100%;
}

.kyc-page .settings-password-form .form-control {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    min-height: 2.45rem;
}

.kyc-page .settings-password-form .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 10%, transparent);
    outline: none;
}

.kyc-page .settings-password-form .settings-password-form__actions {
    margin-top: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, #35196E 12%, transparent);
}

.kyc-page .kyc-aadhaar-panel {
    padding: 1.15rem 1.25rem 1.35rem;
}

.kyc-page .kyc-aadhaar-message {
    font-size: 0.875rem;
    font-weight: 500;
}

.kyc-page .kyc-aadhaar-message.is-success {
    color: #047857;
}

.kyc-page .kyc-aadhaar-message.is-error {
    color: #b91c1c;
}

.kyc-page .kyc-aadhaar-verified {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kyc-page .kyc-aadhaar-verified__photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    background: #fff;
}

.kyc-page .kyc-aadhaar-verified__meta {
    flex: 1 1 220px;
    min-width: 0;
}

.kyc-page .kyc-aadhaar-verified__meta p {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: #374151;
}

.kyc-page .kyc-aadhaar-verified__badge {
    color: #047857 !important;
    font-weight: 700;
}

.kyc-page .kyc-file-name {
    display: inline-flex;
    align-items: center;
    min-height: 2.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    color: #4b5563;
    font-size: 0.86rem;
}

/* Business categories page */
.business-categories-page .dash-panel {
    border: 1px solid rgba(53, 25, 110, 0.1);
}

.business-categories-page .business-category-create-form .form-control,
.business-categories-page .business-category-edit-form .form-control {
    border-color: rgba(53, 25, 110, 0.25);
}

.business-categories-page .business-category-action-cell {
    min-width: 140px;
    width: 140px;
    text-align: center;
}

.business-categories-page .business-category-edit-form {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.business-categories-page .business-category-status-input {
    width: 100%;
    min-width: 120px;
}

.business-categories-page .business-category-cell--name .form-control,
.business-categories-page .business-category-cell--icon .form-control {
    width: 100%;
    min-width: 220px;
}

.business-categories-page .business-category-cell--status {
    min-width: 140px;
}

.business-categories-page .business-category-icon-pill {
    background: rgba(53, 25, 110, 0.08);
    color: #35196E;
    border: 1px solid rgba(53, 25, 110, 0.2);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.business-categories-page .business-category-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #35196E;
    background: rgba(53, 25, 110, 0.06);
    border-bottom: 1px solid rgba(53, 25, 110, 0.18);
}

.business-categories-page .business-category-table tbody td {
    vertical-align: middle;
    border-color: rgba(53, 25, 110, 0.1);
}

.business-categories-page .business-category-table tbody tr:hover {
    background: rgba(53, 25, 110, 0.03);
}

.business-categories-page .business-category-update-btn {
    border: none;
    border-radius: 8px;
    width: 100%;
    max-width: 110px;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(120deg, #35196E 0%, #4a2a8a 55%, #5d36a4 100%);
    box-shadow: 0 6px 14px rgba(53, 25, 110, 0.2);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.business-categories-page .business-category-update-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(53, 25, 110, 0.26);
}

/* Payment links page */
.payment-links-page .dash-panel {
    border: 1px solid rgba(53, 25, 110, 0.1);
}

/* Payment link create modal */
.payment-link-create-modal .modal-dialog {
    max-width: 440px;
}

.payment-link-create-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(12, 53, 119, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.payment-link-create-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 10%, #fff) 0%, color-mix(in srgb, var(--color-brand-mid) 5%, #fff) 100%);
}

.payment-link-create-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brand);
    letter-spacing: 0.01em;
}

.payment-link-create-modal .modal-title figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.payment-link-create-modal .modal-title figure img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.payment-link-create-modal .modal-header .btn-close {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-brand) 8%, #fff);
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.payment-link-create-modal .modal-header .btn-close i {
    font-size: 16px;
    color: var(--color-brand);
    line-height: 1;
}

.payment-link-create-modal .modal-header .btn-close:hover {
    background: color-mix(in srgb, var(--color-brand) 16%, #fff);
    transform: scale(1.04);
}

.payment-link-create-modal .modal-header .btn-close:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.payment-link-create-modal .modal-body {
    padding: 20px 24px 24px;
}

.payment-link-create-modal .payment-link-modal-subtitle {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #5b6b85;
}

.payment-link-create-modal .payment-link-field {
    margin-bottom: 14px;
}

.payment-link-create-modal .payment-link-field:last-of-type {
    margin-bottom: 0;
}

.payment-link-create-modal .payment-link-input-wrap {
    position: relative;
}

.payment-link-create-modal .payment-link-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.payment-link-create-modal .payment-link-create-form .form-control {
    height: 48px;
    padding: 0.7rem 0.95rem 0.7rem 2.55rem;
    border: 1.5px solid rgba(12, 53, 119, 0.16);
    border-radius: 12px;
    background: #ffffff;
    color: #1f2a44;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(12, 53, 119, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.payment-link-create-modal .payment-link-create-form .form-control:hover {
    border-color: rgba(12, 53, 119, 0.3);
}

.payment-link-create-modal .payment-link-create-form .form-control:focus {
    border-color: #2D5FC4;
    box-shadow: 0 0 0 4px rgba(45, 95, 196, 0.14);
    background: #fff;
    outline: none;
}

.payment-link-create-modal .payment-link-create-form .form-control::placeholder {
    color: #8a97ad;
    font-weight: 500;
}

.payment-link-create-modal .payment-link-create-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230C3577' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 2.4rem;
    cursor: pointer;
}

.payment-link-create-modal .payment-link-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.payment-link-create-modal .payment-link-modal-actions .btn-main {
    flex: 1;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.payment-link-create-modal .payment-link-btn-cancel {
    background: rgba(12, 53, 119, 0.08) !important;
    color: #0C3577 !important;
    border: 1px solid rgba(12, 53, 119, 0.12) !important;
    box-shadow: none !important;
}

.payment-link-create-modal .payment-link-btn-cancel:hover {
    background: rgba(12, 53, 119, 0.14) !important;
    color: #0C3577 !important;
}

.payment-link-create-modal .invalid-feedback,
.payment-link-create-modal .text-danger {
    margin-top: 6px;
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .payment-link-create-modal .modal-dialog {
        margin: 0.75rem;
    }

    .payment-link-create-modal .modal-header,
    .payment-link-create-modal .modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .payment-link-create-modal .payment-link-modal-actions {
        flex-direction: column;
    }

    .payment-link-create-modal .payment-link-modal-actions .btn-main {
        width: 100%;
    }
}

.payment-links-page .payment-link-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #35196E;
    background: rgba(53, 25, 110, 0.06);
    border-bottom: 1px solid rgba(53, 25, 110, 0.18);
    white-space: nowrap;
}

.payment-links-page .payment-link-table tbody td {
    vertical-align: middle;
    border-color: rgba(53, 25, 110, 0.1);
}

.payment-links-page .payment-link-table tbody tr:hover {
    background: rgba(53, 25, 110, 0.03);
}

.payment-links-page .payment-link-url-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.payment-links-page .payment-link-url {
    flex: 1 1 auto;
    min-width: 0;
    color: #2D5FC4;
    word-break: break-all;
    font-size: 0.82rem;
}

.payment-links-page .payment-link-actions {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin-left: auto;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--color-brand) 4%, #fff) 100%);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--color-brand) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.payment-links-page .payment-link-btn-copy,
.payment-links-page .payment-link-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.35rem 0.85rem;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 1;
    font-family: var(--font-app);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.payment-links-page .payment-link-btn-copy i,
.payment-links-page .payment-link-btn-whatsapp i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
}

.payment-links-page .payment-link-btn-copy {
    color: var(--color-brand);
    border-right: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.payment-links-page .payment-link-btn-copy:hover {
    color: #fff;
    background: linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 100%);
}

.payment-links-page .payment-link-btn-whatsapp {
    color: #128C7E;
}

.payment-links-page .payment-link-btn-whatsapp:hover {
    color: #fff;
    background: linear-gradient(180deg, #25D366 0%, #128C7E 100%);
    text-decoration: none;
}

.payment-links-page .payment-link-btn-copy:focus-visible,
.payment-links-page .payment-link-btn-whatsapp:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

/* Admin KYC business section */
.kyc-business-details-box {
    border: 1px solid rgba(53, 25, 110, 0.12);
}

.kyc-aadhaar-details-box {
    border: 1px solid rgba(53, 25, 110, 0.12);
}

.kyc-aadhaar-details-box .kyc-aadhaar-verified,
.customer-profile-page .kyc-aadhaar-verified {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kyc-aadhaar-details-box .kyc-aadhaar-verified__photo,
.customer-profile-page .kyc-aadhaar-verified__photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(53, 25, 110, 0.14);
    flex-shrink: 0;
}

.kyc-aadhaar-details-box .kyc-aadhaar-verified__meta,
.customer-profile-page .kyc-aadhaar-verified__meta {
    flex: 1 1 280px;
    min-width: 0;
}

.kyc-aadhaar-details-box .kyc-aadhaar-verified__badge,
.customer-profile-page .kyc-aadhaar-verified__badge {
    color: #047857;
    font-weight: 700;
    margin: 0 0 0.85rem;
}

.kyc-business-input {
    background: rgba(53, 25, 110, 0.04) !important;
    border-color: rgba(53, 25, 110, 0.25) !important;
    color: #35196E !important;
    font-weight: 600;
}

.kyc-mandatory-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(53, 25, 110, 0.12);
    background: #fff;
}

@media (max-width: 767.98px) {
    .business-categories-page .business-category-cell--name .form-control,
    .business-categories-page .business-category-cell--icon .form-control {
        min-width: 180px;
    }
}

.customer-profile-page .btn-outline-brand {
    color: var(--kyc-brand);
    border: 1.5px solid var(--kyc-brand);
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    background: #fff;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.customer-profile-page .btn-outline-brand:hover {
    background: var(--kyc-brand);
    color: #fff;
}

@media (max-width: 575.98px) {
    .kyc-status-picker__pill {
        font-size: 0.58rem;
        padding: 0.4rem 0.2rem;
    }

    .kyc-overall-card__body {
        flex-direction: column;
        align-items: stretch;
    }

    .kyc-status-picker--overall {
        width: 100%;
    }
}

/* KYC documents page */
.kyc-page .timing-boxs.profile-box {
    width: 100%;
    padding: 1.25rem 1.35rem 1.5rem;
}

.kyc-page .timing-boxs.profile-box h4 {
    text-align: left;
    margin: 0;
    font-size: 1.05rem;
}

.kyc-doc-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.kyc-doc-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.kyc-doc-card__title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--color-brand, #35196E);
    margin: 0;
}

.kyc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    line-height: 1.2;
}

.kyc-status i {
    font-size: 0.75rem;
}

.kyc-status--pending {
    background: var(--kyc-pending-bg);
    color: var(--kyc-pending-text);
    border-color: var(--kyc-pending-border);
}

.kyc-status--pending i {
    color: var(--kyc-pending);
}

.kyc-status--submitted {
    background: var(--kyc-submitted-bg);
    color: var(--kyc-submitted-text);
    border-color: var(--kyc-submitted-border);
}

.kyc-status--submitted i {
    color: var(--kyc-submitted);
}

.kyc-status--approved {
    background: var(--kyc-approved-bg);
    color: var(--kyc-approved-text);
    border-color: var(--kyc-approved-border);
}

.kyc-status--approved i {
    color: var(--kyc-approved);
}

.kyc-status--rejected {
    background: var(--kyc-rejected-bg);
    color: var(--kyc-rejected-text);
    border-color: var(--kyc-rejected-border);
}

.kyc-status--rejected i {
    color: var(--kyc-rejected);
}

.kyc-status--verified {
    background: var(--kyc-approved-bg);
    color: var(--kyc-approved-text);
    border-color: var(--kyc-approved-border);
}

.kyc-status--verified i {
    color: var(--kyc-approved);
}

.kyc-status--incomplete {
    background: rgba(53, 25, 110, 0.08);
    color: var(--kyc-brand);
    border-color: rgba(53, 25, 110, 0.2);
}

.kyc-preview {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f7ff 0%, #ede9fe 100%);
    border: 1px dashed rgba(53, 25, 110, 0.22);
    min-height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kyc-preview__link {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 168px;
}

.kyc-preview__img {
    width: 100%;
    height: 168px;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.35s ease;
}

.kyc-preview__link:hover .kyc-preview__img {
    transform: scale(1.03);
}

.kyc-preview__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(0deg, rgba(42, 20, 88, 0.75) 0%, transparent 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.kyc-preview__link:hover .kyc-preview__overlay {
    opacity: 1;
}

.kyc-preview--pdf {
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.5rem 1rem;
    text-decoration: none;
    color: var(--color-brand, #35196E);
}

.kyc-preview--pdf:hover {
    color: var(--color-brand-mid, #4a2a8a);
}

.kyc-preview--pdf .kyc-preview__pdf-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff 0%, #e8e0f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #c0392b;
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.12);
}

.kyc-preview--pdf span {
    font-size: 0.8rem;
    font-weight: 600;
}

.kyc-preview-empty {
    text-align: center;
    padding: 1.25rem 1rem;
    color: rgba(53, 25, 110, 0.55);
}

.kyc-preview-empty__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--color-brand, #35196E);
    box-shadow: 0 4px 12px rgba(53, 25, 110, 0.1);
}

.kyc-preview-empty p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.kyc-upload-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.kyc-file-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kyc-file-picker__row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kyc-choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(53, 25, 110, 0.25);
    background: #fff;
    color: var(--color-brand, #35196E);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    flex-shrink: 0;
}

.kyc-choose-btn:hover {
    background: #f3effc;
    border-color: var(--color-brand, #35196E);
    box-shadow: 0 2px 10px rgba(53, 25, 110, 0.12);
}

.kyc-choose-btn i {
    font-size: 0.95rem;
    opacity: 0.85;
}

.kyc-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.kyc-file-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(53, 25, 110, 0.12);
    font-size: 0.75rem;
    color: #5c5c5c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-file-name.has-file {
    color: var(--color-brand, #35196E);
    font-weight: 500;
}

.kyc-file-hint {
    font-size: 0.7rem;
    color: #888;
    margin: 0;
}

.kyc-submit-btn {
    width: 100%;
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
}

.kyc-doc-card .text-error {
    font-size: 0.75rem;
}


/* Asset path fix: sidebar & dashboard cards keep background images */
aside.sidebar:not(.modern-sidebar) {
    background-color: #35196E !important;
    background-image: url(../images/dashboard-bg.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: cover !important;
}

.timing-boxs,
.transaction-boxs {
    background-image: url(../images/box-bg-1.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: cover !important;
}

@media (max-width: 767px) {
    aside.sidebar.show-sidebar:not(.modern-sidebar) {
        background-color: #35196E !important;
        background-image: url(../images/dashboard-bg.png) !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: cover !important;
    }
}

/* Profile details tab: page-scoped redesign */
.profile-details-tab {
    --profile-brand: #35196E;
    --profile-brand-soft: #f5f2ff;
    --profile-text-muted: #6b7280;
    --profile-border: rgba(53, 25, 110, 0.16);
}

.profile-details-tab .profile-details-tab__row {
    row-gap: 1rem;
}

.profile-details-tab .profile-details-card,
.profile-details-tab .profile-details-table-wrap {
    border: 1px solid var(--profile-border);
    border-top: 4px solid var(--profile-brand);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 10px 28px rgba(24, 17, 38, 0.08);
}

.profile-details-tab .profile-details-card {
    width: 100%;
    padding: 1.3rem 1.25rem;
}

.profile-details-tab .profile-details-card__title {
    margin: 0 0 1.05rem;
    text-align: left;
    font-size: 1.08rem;
    line-height: 1.3;
}

.profile-details-tab .profile-stats-list {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.5rem;
}

.profile-details-tab .profile-stats-list__item {
    width: 100%;
    border-right: 0;
    border-radius: 12px;
    background: var(--profile-brand-soft);
    border: 1px dashed rgba(53, 25, 110, 0.22);
    padding: 0.9rem 0.6rem;
}

.profile-details-tab .profile-stats-list__item p {
    color: var(--profile-text-muted);
    margin-bottom: 0.45rem;
}

.profile-details-tab .profile-stats-list__item h3 {
    font-size: 1.35rem;
}

.profile-details-tab .profile-detail-grid {
    row-gap: 0.72rem;
}

.profile-details-tab .profile-detail-grid__label {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--profile-text-muted);
}

.profile-details-tab .profile-detail-grid__value {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 700;
    color: #121827;
}

.profile-details-tab .profile-detail-grid__value--break {
    overflow-wrap: anywhere;
    font-size: 0.84rem;
}

.profile-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.profile-status-pill--success {
    color: #0f5132;
    background: #d1f5e1;
    border-color: #8adab2;
}

.profile-status-pill--warning {
    color: #7a4b00;
    background: #ffefcc;
    border-color: #ffd37d;
}

.profile-status-pill--danger {
    color: #842029;
    background: #ffd6da;
    border-color: #f59ba4;
}

.profile-details-tab .profile-details-table-card {
    margin-top: 0.6rem;
}

.profile-details-tab .profile-details-table-card__title {
    margin: 1rem 0 0.7rem;
    font-size: 1.22rem;
    font-weight: 700;
    color: #1a1330;
}

.profile-details-tab .profile-details-table-wrap {
    background: #fff;
    padding: 1rem;
}

.profile-details-tab .profile-details-table thead th {
    font-weight: 600;
    font-size: 0.86rem;
    color: #3b3258;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.75rem;
}

.profile-details-tab .profile-details-table tbody td {
    font-size: 0.86rem;
    vertical-align: middle;
    border-color: #f0f1f5;
}

.profile-details-tab .profile-details-table tbody tr:hover td {
    background: #faf8ff;
}

.profile-details-tab .profile-badge {
    border-radius: 999px;
    padding: 0.42rem 0.62rem;
    font-weight: 600;
}

.profile-details-tab .profile-details-empty {
    padding: 4rem 1.5rem;
}

.profile-details-tab .profile-details-empty figure {
    width: 56px;
}

.profile-details-tab .btn-checkbox label {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 10px rgba(17, 24, 39, 0.2);
}

@media (max-width: 991.98px) {
    .profile-details-tab .profile-details-card {
        margin-top: 0.9rem;
    }
}

@media (max-width: 767.98px) {
    .profile-details-tab .profile-detail-grid {
        row-gap: 0.45rem;
    }

    .profile-details-tab .profile-detail-grid__label {
        font-size: 0.78rem;
    }

    .profile-details-tab .profile-detail-grid__value {
        font-size: 0.84rem;
        margin-bottom: 0.3rem;
    }

    .profile-details-tab .profile-details-table-wrap {
        padding: 0.8rem;
    }
}

/* Customer profile page */
.customer-profile-page .customer-profile-page__header h2 {
    margin-bottom: 0.25rem;
}

.customer-profile-page .customer-profile-page__header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.customer-profile-page .customer-profile-card {
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    border: 1px solid rgba(53, 25, 110, 0.14);
    border-top: 4px solid #35196E;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    padding: 1.25rem 1.1rem;
}

.customer-profile-page .customer-profile-card--identity {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.customer-profile-page .customer-profile-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(145deg, #35196E, #4c2b92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}

.customer-profile-page .customer-profile-card--identity h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 700;
}

.customer-profile-page .customer-profile-card--identity p {
    margin: 0;
    color: #6b7280;
    font-size: 0.88rem;
}

.customer-profile-page .customer-profile-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.customer-profile-page .customer-profile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.28rem 0.64rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.customer-profile-page .customer-profile-pill.is-success {
    background: #d1f5e1;
    color: #0f5132;
    border-color: #8adab2;
}

.customer-profile-page .customer-profile-pill.is-warning {
    background: #ffefcc;
    color: #7a4b00;
    border-color: #ffd37d;
}

.customer-profile-page .customer-profile-card--details h4 {
    margin: 0 0 0.85rem;
    color: #1f1540;
    font-size: 1.02rem;
    font-weight: 700;
}

.customer-profile-page .customer-profile-details {
    row-gap: 0.68rem;
}

.customer-profile-page .customer-profile-details span {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.84rem;
}

.customer-profile-page .customer-profile-details strong {
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.customer-profile-page .customer-stat-card {
    background: #fff;
    border: 1px solid rgba(53, 25, 110, 0.12);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 8px 18px rgba(53, 25, 110, 0.08);
    height: 100%;
}

.customer-profile-page .customer-stat-card p {
    margin: 0 0 0.4rem;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.82rem;
}

.customer-profile-page .customer-stat-card h5 {
    margin: 0;
    color: #1b1237;
    font-size: 1.15rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .customer-profile-page .customer-profile-card {
        padding: 1rem 0.85rem;
    }

    .customer-profile-page .customer-profile-details {
        row-gap: 0.4rem;
    }
}

/* My Profile page (customer) */
.my-profile-page .dash-welcome.my-profile-hero {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
}

.my-profile-page .my-profile-section {
    margin-bottom: 1rem;
}

.my-profile-page .my-profile-section--stats {
    margin-bottom: 1.25rem;
}

.my-profile-page .my-profile-section--stats .dash-mini-card__value {
    font-size: clamp(1.1rem, 1.8vw, 1.55rem);
    word-break: break-word;
}

.my-profile-page .my-profile-section--stats .dash-mini-card__label {
    font-size: 0.8rem;
    line-height: 1.35;
}

.my-profile-page .my-profile-section .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.my-profile-page .dash-txn-top-row {
    margin-top: 0;
    margin-bottom: 0;
}

.my-profile-page .dash-txn-top-row > [class*='col-'],
.my-profile-page .my-profile-stats-row > [class*='col-'] {
    display: flex;
    align-items: stretch;
}

.my-profile-page .dash-txn-top-row .dash-mini-card,
.my-profile-page .my-profile-stats-row .my-profile-stat-tile {
    width: 100%;
    flex: 1 1 auto;
}

.my-profile-page .my-profile-hero__content {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.my-profile-page .my-profile-hero__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.my-profile-page .my-profile-hero__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(145deg, #4a2a8a, #35196E);
    box-shadow: 0 8px 20px color-mix(in srgb, #35196E 30%, transparent);
}

img.my-profile-hero__avatar.customer-avatar {
    display: block;
    object-fit: cover;
    object-position: center top;
    padding: 0;
    font-size: 0;
    color: transparent;
    background: #E8E2F4;
}

.my-profile-page .my-profile-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.my-profile-page .my-profile-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
    flex-shrink: 0;
}

.my-profile-page .my-profile-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #35196E;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 20%, transparent);
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.my-profile-page .my-profile-hero__btn:hover {
    background: var(--dash-brand-soft);
    box-shadow: 0 4px 14px color-mix(in srgb, #35196E 18%, transparent);
    color: #35196E;
}

.my-profile-page .my-profile-hero__btn--muted {
    color: #5c6578;
    border-color: color-mix(in srgb, #5c6578 22%, transparent);
}

.my-profile-page .my-profile-hero__btn--muted:hover {
    color: #35196E;
}

.my-profile-page .my-profile-tab-panel--kyc {
    padding-top: 0.25rem;
}

.my-profile-page .my-profile-stat-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #fff 0%, #fff 100%);
    box-shadow: var(--dash-shadow, 0 8px 24px rgba(17, 24, 39, 0.06));
    height: 100%;
    min-height: 92px;
    margin: 0;
}

.my-profile-page .my-profile-stat-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.my-profile-page .my-profile-stat-tile p {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--site-muted, #6b7280);
}

.my-profile-page .my-profile-stat-tile strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-brand, #35196E);
    line-height: 1.25;
    word-break: break-word;
}

.my-profile-page .my-profile-stat-tile--received strong {
    font-size: 1rem;
}

.my-profile-page .my-profile-stat-tile--total {
    border-color: color-mix(in srgb, #35196E 22%, transparent);
    background: linear-gradient(180deg, var(--dash-brand-soft, #f5f2ff) 0%, #fff 100%);
}

.my-profile-page .my-profile-stat-tile--total .my-profile-stat-tile__icon {
    background: var(--dash-brand-soft, #f5f2ff);
    color: #35196E;
}

.my-profile-page .my-profile-stat-tile--success {
    border-color: #86efac;
    background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.my-profile-page .my-profile-stat-tile--success .my-profile-stat-tile__icon {
    background: #dcfce7;
    color: #16a34a;
}

.my-profile-page .my-profile-stat-tile--pending {
    border-color: #facc15;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.my-profile-page .my-profile-stat-tile--pending .my-profile-stat-tile__icon {
    background: #fef9c3;
    color: #ca8a04;
}

.my-profile-page .my-profile-stat-tile--received {
    border-color: color-mix(in srgb, #35196E 22%, transparent);
    background: linear-gradient(180deg, var(--dash-brand-soft, #f5f2ff) 0%, #fff 100%);
}

.my-profile-page .my-profile-stat-tile--received .my-profile-stat-tile__icon {
    background: var(--dash-brand-soft, #f5f2ff);
    color: #35196E;
}

.my-profile-page .my-profile-stats-row {
    margin-top: 0;
    margin-bottom: 0;
}

.my-profile-page .my-profile-tabs {
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding-top: 0.25rem;
    flex-wrap: wrap;
}

.my-profile-page .my-profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #35196E;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.my-profile-page .my-profile-tabs .nav-link:hover {
    background: var(--dash-brand-soft, #f5f2ff);
    color: #35196E;
}

.my-profile-page .my-profile-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    border-color: #35196E;
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 28%, transparent);
}

.my-profile-page .my-profile-tab-panel {
    animation: myProfileFadeIn 0.35s ease;
    margin-top: 0;
    padding-top: 0;
}

.my-profile-page .my-profile-tab-panel--subscription {
    width: 100%;
}

.my-profile-page .my-profile-overview {
    margin-top: 0;
}

.my-profile-page .my-profile-tab-panel .dash-panel,
.my-profile-page .my-profile-tab-panel .dash-card {
    margin-bottom: 0;
}

@keyframes myProfileFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.my-profile-page .my-profile-payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 5%, #fff);
    border: 1px dashed color-mix(in srgb, #35196E 20%, transparent);
}

.my-profile-page .my-profile-payment-total span {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--site-muted, #6b7280);
}

.my-profile-page .my-profile-payment-total strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-brand, #35196E);
}

.my-profile-page .my-profile-detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.my-profile-page .my-profile-detail-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, #35196E 8%, transparent);
}

.my-profile-page .my-profile-detail-list__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.my-profile-page .my-profile-detail-list__item dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--site-muted, #6b7280);
    flex: 0 0 40%;
}

.my-profile-page .my-profile-detail-list__item dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.my-profile-page .dash-card--settings-compact {
    padding: 0.95rem 1rem 1rem;
}

.my-profile-page .dash-card--settings-compact .dash-card__header--compact {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
}

.my-profile-page .my-profile-setting-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-brand) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    height: 100%;
}

.my-profile-page .my-profile-setting-chip--wide {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.6rem 0.75rem;
}

.my-profile-page .my-profile-setting-chip span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--site-muted);
    text-transform: none;
    letter-spacing: 0;
}

.my-profile-page .my-profile-setting-chip strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    overflow-wrap: anywhere;
}

.my-profile-page .my-profile-setting-chip strong.is-yes {
    color: #16a34a;
}

.my-profile-page .my-profile-setting-chip strong.is-no {
    color: #b45309;
}

/* Customer profile — enhanced layout */
.my-profile-page--customer .my-profile-banner {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: 22px;
    background: linear-gradient(135deg, #4a2a8a 0%, #35196E 52%, #2a1258 100%);
    box-shadow: 0 18px 40px color-mix(in srgb, #35196E 32%, transparent);
}

.my-profile-page--customer .my-profile-banner__glow {
    position: absolute;
    top: -40%;
    right: -8%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%);
    pointer-events: none;
}

.my-profile-page--customer .my-profile-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.my-profile-page--customer .my-profile-banner__main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.my-profile-page--customer .my-profile-banner__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.my-profile-page--customer .my-profile-banner__avatar-wrap .my-profile-hero__avatar {
    width: 84px;
    height: 84px;
    font-size: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
}

.my-profile-page--customer .my-profile-banner__online {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #35196E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.my-profile-page--customer .my-profile-banner__eyebrow {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.my-profile-page--customer .my-profile-banner__title {
    margin: 0 0 0.45rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.my-profile-page--customer .my-profile-banner__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.1rem;
    margin-bottom: 0.65rem;
}

.my-profile-page--customer .my-profile-banner__contacts span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.my-profile-page--customer .my-profile-banner__contacts i {
    width: 1.35rem;
    text-align: center;
    opacity: 0.85;
}

.my-profile-page--customer .my-profile-banner .my-profile-hero__badges {
    margin-top: 0.35rem;
}

.my-profile-page--customer .my-profile-banner .dash-status-pill {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(4px);
}

.my-profile-page--customer .my-profile-banner__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.my-profile-page--customer .my-profile-banner__member {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}

.my-profile-page--customer .my-profile-banner__member i {
    font-size: 1.1rem;
    opacity: 0.9;
}

.my-profile-page--customer .my-profile-banner__member span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.8;
}

.my-profile-page--customer .my-profile-banner__member strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
}

.my-profile-page--customer .my-profile-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #35196E;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.my-profile-page--customer .my-profile-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    color: #35196E;
}

.my-profile-page--customer .my-profile-section--account {
    margin-bottom: 0;
}

.my-profile-page--customer .my-profile-detail-card {
    height: 100%;
    border-radius: 20px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    border-top: 3px solid var(--color-brand);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
    overflow: hidden;
}

.my-profile-page--customer .my-profile-detail-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem 0.95rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.my-profile-page--customer .my-profile-detail-card__title {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-brand);
}

.my-profile-page--customer .my-profile-detail-card__subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--site-muted);
}

.my-profile-page--customer .my-profile-detail-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 100%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.my-profile-page--customer .my-profile-detail-card__body {
    padding: 1rem 1.25rem 1.2rem;
}

.my-profile-page--customer .my-profile-detail-card--aadhaar .kyc-aadhaar-verified__photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(53, 25, 110, 0.14);
}

.my-profile-page--customer .my-profile-field {
    height: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-light) 65%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.my-profile-page--customer .my-profile-field__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--site-muted);
}

.my-profile-page--customer .my-profile-field__label i {
    font-size: 0.68rem;
    color: var(--color-brand-mid);
}

.my-profile-page--customer .my-profile-field__value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    word-break: break-word;
}

.my-profile-page--customer .my-profile-metric {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-light) 65%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.my-profile-page--customer .my-profile-metric__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #fff;
    background: linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 100%);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.my-profile-page--customer .my-profile-metric__label {
    margin: 0 0 0.15rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--site-muted);
}

.my-profile-page--customer .my-profile-metric__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-brand);
}

.my-profile-page--customer .my-profile-setting-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-light) 65%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.my-profile-page--customer .my-profile-setting-tile__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--site-muted);
}

.my-profile-page--customer .my-profile-setting-tile__label i {
    font-size: 0.68rem;
    color: var(--color-brand-mid);
}

.my-profile-page--customer .my-profile-setting-tile__url {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    word-break: break-all;
}

.my-profile-page--customer .my-profile-setting-tile .dash-status-pill {
    font-size: 0.72rem;
}

@media (max-width: 991.98px) {
    .my-profile-page--customer .my-profile-banner__aside {
        align-items: flex-start;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .my-profile-page--customer .my-profile-banner {
        padding: 1.1rem 1rem;
    }

    .my-profile-page--customer .my-profile-banner__main {
        flex-direction: column;
        align-items: flex-start;
    }
}

.admin-dash-page .dash-stat-vertical__footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, #35196E 10%, transparent);
    text-align: center;
}

.admin-dash-page .dash-stat-vertical__footer .dash-plan-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 767.98px) {
    .my-profile-page .my-profile-hero__actions {
        align-items: flex-start;
        width: 100%;
    }

    .my-profile-page .my-profile-detail-list__item dt,
    .my-profile-page .my-profile-detail-list__item dd {
        flex: 1 1 100%;
        text-align: left;
    }

    .my-profile-page .my-profile-section .row {
        --bs-gutter-y: 0.75rem;
    }
}

/* Sidebar redesign inspired by provided reference */
aside.sidebar.modern-sidebar {
    display: flex;
    flex-direction: column;
    padding: 14px 10px 14px;
    background: linear-gradient(180deg, #35196e 0%, #35196e 100%);
    border-radius: 0 22px 22px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 28px rgba(36, 15, 92, 0.35);
}

aside.sidebar.modern-sidebar .sidebar-menu {
    flex: 1;
}

aside.sidebar.modern-sidebar ul li {
    margin: 4px 8px;
}

aside.sidebar.modern-sidebar ul li a {
    border-radius: 999px;
    min-height: 46px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

aside.sidebar.modern-sidebar ul li a::after {
    display: none;
}

aside.sidebar.modern-sidebar ul li a .menuic-box {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    transition: all 0.25s ease;
}

aside.sidebar.modern-sidebar ul li a .menuic-box img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

aside.sidebar.modern-sidebar ul li a .menu-label,
aside.sidebar.modern-sidebar ul li a {
    white-space: nowrap;
}

aside.sidebar.modern-sidebar ul li.active a,
aside.sidebar.modern-sidebar ul li a:hover {
    background: #ffffff;
    color: #281270;
    box-shadow: 0 10px 20px rgba(9, 7, 24, 0.24);
    transform: translateX(0);
}

aside.sidebar.modern-sidebar ul li.active a .menuic-box,
aside.sidebar.modern-sidebar ul li a:hover .menuic-box {
    background: #3b1a95;
}

aside.sidebar.modern-sidebar ul li.active a .menuic-box img,
aside.sidebar.modern-sidebar ul li a:hover .menuic-box img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

aside.sidebar.modern-sidebar .sidebar-footer-note {
    padding: 12px 10px 4px;
}

aside.sidebar.modern-sidebar .sidebar-footer-note p {
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
}

/* Review table action buttons */
.action-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.action-btn-group .btn-approve,
.action-btn-group .btn-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: all 0.2s ease;
}

.action-btn-group .btn-approve {
    background: linear-gradient(180deg, #4a2a8a 0%, #35196e 55%, #2a1458 100%);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.2);
}

.action-btn-group .btn-approve:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.action-btn-group .btn-reject {
    background: #fff5f5;
    color: #b42318;
    border-color: #f5b2b2;
}

.action-btn-group .btn-reject:hover {
    background: #ffe7e7;
    color: #9b1c1c;
}

.subscription-rejected-reason {
    margin-top: 4px;
    max-width: 220px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #b42318;
    white-space: normal;
    word-break: break-word;
}

/* Table typography refresh (profile-style readability) */
.admin-pages-page .balance-row .table-responsive {
    background: #ffffff;
    border: 1px solid #e9eaf2;
    border-radius: 16px;
    padding: 10px 12px 12px;
}

.admin-pages-page .balance-row table {
    border-collapse: collapse;
    border-spacing: 0;
    white-space: nowrap;
}

.admin-pages-page .balance-row table thead th {
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #3b3258;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f7fc;
}

.admin-pages-page .balance-row table tbody td {
    padding: 0.82rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: #121827;
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid #eef0f5;
}

.admin-pages-page .balance-row table tbody td:first-child,
.admin-pages-page .balance-row table tbody td:last-child {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.admin-pages-page .balance-row table tbody tr:hover td {
    background: #faf8ff;
}

@media (max-width: 768px) {
    .admin-pages-page .balance-row table thead th {
        font-size: 0.78rem;
        padding: 0.68rem 0.7rem;
    }

    .admin-pages-page .balance-row table tbody td {
        font-size: 0.8rem;
        padding: 0.68rem 0.7rem;
    }
}

/* Match other table headers with Reviews page style */
.last-payment table thead th,
.profile-details-tab .profile-details-table thead th {
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #3b3258;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f7fc;
}

/* Global table consistency: Customers, Leads, Merchant Management, Reviews, etc. */
.main-part-body .balance-row .table-responsive {
    background: #ffffff;
    border: 1px solid #e9eaf2;
    border-radius: 16px;
    padding: 10px 12px 12px;
}

.main-part-body .balance-row table {
    border-collapse: collapse;
    border-spacing: 0;
    white-space: nowrap;
}

.main-part-body .balance-row table thead th {
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #3b3258;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f7fc;
}

.main-part-body .balance-row table tbody td {
    padding: 0.82rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: #121827;
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid #eef0f5;
}

.main-part-body .balance-row table tbody td:first-child,
.main-part-body .balance-row table tbody td:last-child {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.main-part-body .balance-row table tbody tr:hover td {
    background: #faf8ff;
}

@media (max-width: 768px) {
    .main-part-body .balance-row table thead th {
        font-size: 0.78rem;
        padding: 0.68rem 0.7rem;
    }

    .main-part-body .balance-row table tbody td {
        font-size: 0.8rem;
        padding: 0.68rem 0.7rem;
    }
}

/* --------------------------------------------------------------------------
   Admin forms — shared layout (plans, blogs, pages, reviews, customers, …)
   -------------------------------------------------------------------------- */
.admin-form-page .admin-form-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-form-page .setting-title h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.admin-form-page .admin-form-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
    max-width: 36rem;
}

.admin-form-page .admin-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #35196e;
    background: #f1f5f9;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.admin-form-page .admin-form-back:hover {
    background: #e2e8f0;
    color: #1e1b4b;
}

.admin-form-page .admin-form-card.api-page-box,
.admin-form-page .api-page-box.admin-form-card,
.admin-form-page .customer-form-card.api-page-box {
    padding: 1.75rem 1.5rem 2rem;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 4px 28px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(53, 25, 110, 0.06);
}

@media (min-width: 992px) {
    .admin-form-page .admin-form-card.api-page-box,
    .admin-form-page .api-page-box.admin-form-card,
    .admin-form-page .customer-form-card.api-page-box {
        padding: 2rem 2.25rem 2.5rem;
    }
}

.admin-form-page .admin-form-top-card {
    padding: 1.35rem 1.25rem;
    margin-bottom: 1.75rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 55%, #f0f9ff 100%);
    border: 1px solid rgba(53, 25, 110, 0.12);
    box-shadow: 0 2px 12px rgba(53, 25, 110, 0.06);
}

@media (min-width: 768px) {
    .admin-form-page .admin-form-top-card {
        padding: 1.5rem;
    }
}

.admin-form-page .admin-form-section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.admin-form-page .admin-form-section--last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.admin-form-page .admin-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.admin-form-page .admin-form-section-head h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
}

.admin-form-page .admin-form-section-head p {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.admin-form-page .admin-form-section-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    color: #35196e;
    font-size: 1rem;
    line-height: 1;
}

.admin-form-page .admin-form-section-icon i {
    font-size: 1rem;
    line-height: 1;
}

.admin-form-page .admin-form-section-icon--price {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    color: #047857;
}

.admin-form-page .admin-form-section-icon--limits {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
}

.admin-form-page .admin-form-section-icon--features {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #be185d;
}

.admin-form-page .form-group {
    margin-bottom: 1.35rem;
}

.admin-form-page .form-group.mb-0 {
    margin-bottom: 0;
}

.admin-form-page .form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
}

.admin-form-page .form-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.admin-form-page .form-control,
.admin-form-page select.form-control {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    color: #1e293b;
    background: #f8fafc;
    height: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-form-page .form-control:focus,
.admin-form-page select.form-control:focus {
    border-color: #35196e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(53, 25, 110, 0.12);
    outline: none;
}

.admin-form-page input[type="file"].form-control {
    padding: 0.5rem 0.75rem;
    background: #fff;
}

/* Currency: ₹ + input on one line */
.admin-form-page .admin-form-currency {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
}

.admin-form-page .admin-form-currency-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.9rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #35196e;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
}

.admin-form-page .admin-form-currency .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.65rem 1rem;
}

.admin-form-page .admin-form-currency .form-control:focus {
    box-shadow: none;
    background: #fff;
}

.admin-form-page .admin-form-currency:focus-within {
    border-color: #35196e;
    box-shadow: 0 0 0 3px rgba(53, 25, 110, 0.12);
    background: #fff;
}

.admin-form-page .admin-form-price-wrap.is-disabled .admin-form-currency {
    opacity: 0.65;
    pointer-events: none;
}

.admin-form-page .admin-form-fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
    background: #f8fafc;
}

.admin-form-page .admin-form-fieldset legend {
    font-size: 0.9rem;
    font-weight: 600;
    color: #35196e;
    padding: 0 0.5rem;
}

.admin-form-page .admin-form-toggle-card {
    height: 100%;
    padding: 1.1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-page .admin-form-toggle-card.is-on {
    border-color: rgba(53, 25, 110, 0.35);
    background: #faf5ff;
    box-shadow: 0 0 0 1px rgba(53, 25, 110, 0.08);
}

.admin-form-page .admin-form-toggle-card--status.is-on {
    border-color: rgba(5, 150, 105, 0.35);
    background: #ecfdf5;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.08);
}

.admin-form-page .admin-form-toggle-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.admin-form-page .admin-form-toggle-card-top strong {
    display: block;
    font-size: 0.9375rem;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

.admin-form-page .admin-form-toggle-card-top p {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.45;
}

.admin-form-page .admin-form-toggle-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

.admin-form-page .admin-form-toggle-card.is-on .admin-form-toggle-badge {
    background: #35196e;
    color: #fff;
}

.admin-form-page .admin-form-toggle-card--status.is-on .admin-form-toggle-badge {
    background: #059669;
    color: #fff;
}

.admin-form-page .admin-form-switch {
    padding-left: 0;
    margin: 0;
    min-height: auto;
}

.admin-form-page .admin-form-switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background-color: #cbd5e1;
    flex-shrink: 0;
}

.admin-form-page .admin-form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(53, 25, 110, 0.2);
    border-color: #35196e;
}

.admin-form-page .admin-form-switch .form-check-input:checked {
    background-color: #35196e;
    border-color: #35196e;
}

.admin-form-page .admin-form-toggle-card--status .admin-form-switch .form-check-input:checked {
    background-color: #059669;
    border-color: #059669;
}

.admin-form-page .plan-billing-card {
    height: 100%;
}

.admin-form-page .plan-billing-discount {
    margin: 0.85rem 0 0.75rem;
}

.admin-form-page .plan-billing-discount .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.admin-form-page .plan-billing-card.is-on .plan-billing-discount {
    display: block;
}

.admin-form-page .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.admin-form-page .admin-form-btn-cancel,
.admin-form-page .admin-form-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.5rem;
    min-height: 2.75rem;
    min-width: 130px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-form-page .admin-form-btn-cancel {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.admin-form-page .admin-form-btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.admin-form-page .admin-form-btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    border: 1px solid var(--color-brand-deep);
    box-shadow: 0 2px 10px rgba(53, 25, 110, 0.2);
}

.admin-form-page .admin-form-btn-primary:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.05);
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.28);
    transform: translateY(-1px);
}

.admin-form-page .admin-form-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.admin-form-page .admin-form-actions .btn-main {
    margin: 0;
    padding: 0.7rem 1.75rem;
    min-width: 140px;
}

@media (max-width: 575.98px) {
    .admin-form-page .admin-form-actions {
        flex-direction: column-reverse;
    }

    .admin-form-page .admin-form-btn-cancel,
    .admin-form-page .admin-form-btn-primary,
    .admin-form-page .admin-form-actions .btn-main {
        width: 100%;
        text-align: center;
    }
}

/* ----- Customer My Plan ----- */
.my-plan-page .my-plan-page__header {
    margin-bottom: 1.25rem;
}

.my-plan-page .my-plan-page__header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    margin-bottom: 0.35rem;
}

.my-plan-page .my-plan-page__header p {
    margin: 0;
    color: var(--site-muted);
    font-size: 0.9rem;
}

.my-plan-current {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft, color-mix(in srgb, #35196E 8%, #fff)) 0%, #fff 100%);
    box-shadow: var(--dash-shadow, 0 10px 28px color-mix(in srgb, #35196E 8%, transparent));
}

.my-plan-current--active {
    padding-top: 2.35rem;
    border: 1px solid color-mix(in srgb, #16a34a 35%, #35196E 12%);
    border-top: 4px solid #16a34a;
    background:
        linear-gradient(135deg, color-mix(in srgb, #16a34a 10%, #fff) 0%, transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, #35196E 10%, #fff) 0%, #fff 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #16a34a 12%, transparent),
        0 14px 36px color-mix(in srgb, #16a34a 14%, transparent),
        0 10px 28px color-mix(in srgb, #35196E 8%, transparent);
}

.my-plan-current__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
}

.my-plan-current__ribbon i {
    font-size: 0.68rem;
}

.my-plan-current__status-dot,
.my-plan-card__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 35%, transparent);
    flex-shrink: 0;
    animation: my-plan-status-pulse 1.8s ease-in-out infinite;
}

@keyframes my-plan-status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.75;
        transform: scale(0.92);
    }
}

.my-plan-current__subscription-meta {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: color-mix(in srgb, #166534 55%, var(--site-muted));
    line-height: 1.45;
}

.my-plan-current__subscription-meta-sep {
    margin: 0 0.2rem;
    opacity: 0.65;
}

.my-plan-current__top {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.my-plan-current__brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.my-plan-current__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 28%, transparent);
}

.my-plan-current--active .my-plan-current__icon {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #35196E 100%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, #4ade80 35%, transparent),
        0 6px 16px color-mix(in srgb, #16a34a 28%, transparent);
}

.my-plan-current__title-wrap {
    flex: 1;
    min-width: 0;
}

.my-plan-current__label {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.4rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #35196E;
    background: color-mix(in srgb, #35196E 8%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
}

.my-plan-current__active-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    margin-bottom: 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 10px color-mix(in srgb, #16a34a 35%, transparent);
}

.my-plan-current__active-pill i {
    font-size: 0.62rem;
}

.my-plan-current__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #35196E;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.my-plan-current__desc {
    margin: 0;
    color: var(--site-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 36rem;
}

.my-plan-current__amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #35196E;
    line-height: 1.1;
}

.my-plan-current__badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-plan-current__badge--free {
    background: #dcfce7;
    color: #166534;
}

.my-plan-current__badge--paid {
    background: color-mix(in srgb, var(--site-secondary) 16%, #fff);
    color: var(--color-brand-deep);
}

.my-plan-current__period {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--site-muted);
}

.my-plan-current__stats {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
}

.my-plan-current__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, #35196E 4%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 12%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, #35196E 6%, transparent);
    min-width: 0;
}

.my-plan-current--active .my-plan-current__stat {
    background: color-mix(in srgb, #16a34a 5%, #fff);
    border-color: color-mix(in srgb, #16a34a 18%, #35196E 8%);
}

.my-plan-current__stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
    box-shadow: 0 4px 12px color-mix(in srgb, #35196E 22%, transparent);
}

.my-plan-current__stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.my-plan-current__stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #35196E;
    line-height: 1.2;
}

.my-plan-current__stat-value span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a2a8a;
}

.my-plan-current__stat-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--site-muted);
    line-height: 1.35;
}

.my-plan-current__stat-hint--sub {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    opacity: 0.9;
}

.my-plan-empty-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 6%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    border-top: 3px solid #35196E;
    color: #35196E;
}

.my-plan-empty-banner i {
    font-size: 1.5rem;
    opacity: 0.85;
}

.my-plan-empty-banner p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.my-plan-processing-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 6%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    color: #35196E;
}

.my-plan-processing-banner i {
    font-size: 1.25rem;
    margin-top: 0.15rem;
}

.my-plan-processing-list {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.my-plan-processing-list li {
    list-style: disc;
}

.my-plan-no-plans {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--dash-brand-soft, color-mix(in srgb, #35196E 8%, #fff)) 0%, #fff 100%);
    border: 1px dashed color-mix(in srgb, #35196E 22%, transparent);
    color: var(--site-muted, #64748b);
}

.my-plan-no-plans i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.my-plan-grid {
    margin-top: 0.25rem;
}

.my-plan-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.25rem 1.2rem 1.15rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft, color-mix(in srgb, #35196E 8%, #fff)) 0%, #fff 100%);
    box-shadow: var(--dash-shadow, 0 10px 28px color-mix(in srgb, #35196E 8%, transparent));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.my-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in srgb, #35196E 14%, transparent);
    border-color: color-mix(in srgb, #35196E 30%, transparent);
}

.my-plan-card--featured {
    border: 1px solid color-mix(in srgb, #35196E 28%, transparent);
    border-top: 4px solid #4a2a8a;
    background: linear-gradient(180deg, color-mix(in srgb, #35196E 10%, #fff) 0%, #fff 100%);
    box-shadow: 0 12px 32px color-mix(in srgb, #35196E 12%, transparent);
}

.my-plan-card--current {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #16a34a 32%, #35196E 10%);
    border-top: 4px solid #16a34a;
    background:
        linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, #fff) 0%, transparent 45%),
        linear-gradient(180deg, color-mix(in srgb, #35196E 10%, #fff) 0%, #fff 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #16a34a 10%, transparent),
        0 12px 32px color-mix(in srgb, #16a34a 12%, transparent);
}

.my-plan-card--current:hover {
    transform: none;
    border-color: color-mix(in srgb, #16a34a 40%, #35196E 12%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #16a34a 14%, transparent),
        0 14px 36px color-mix(in srgb, #16a34a 16%, transparent);
}

.my-plan-card__active-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.15rem 0 0.75rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #166534;
    background: color-mix(in srgb, #16a34a 12%, #fff);
    border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
}

.my-plan-card__active-label i {
    color: #16a34a;
    font-size: 0.7rem;
}

.my-plan-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    min-height: 1.5rem;
}

.my-plan-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-plan-badge--free {
    background: #dcfce7;
    color: #166534;
}

.my-plan-badge--paid {
    background: color-mix(in srgb, #35196E 12%, #fff);
    color: #35196E;
}

.my-plan-badge--popular {
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    color: #fff;
}

.my-plan-badge--active {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, #16a34a 30%, transparent);
}

.my-plan-card--current .my-plan-card__price {
    color: #166534;
}

.my-plan-card--current .my-plan-check {
    background: color-mix(in srgb, #16a34a 14%, #fff);
    color: #15803d;
}

.my-plan-card__head {
    margin-bottom: 1rem;
}

.my-plan-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.3rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-brand) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.my-plan-period-tab {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: #5b6b85;
    font-family: var(--font-app);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.45rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.my-plan-period-tab:hover {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, #fff);
}

.my-plan-period-tab.is-active {
    color: #fff;
    background: linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.my-plan-card__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.35rem;
}

.my-plan-card__price {
    font-size: 2rem;
    font-weight: 700;
    color: #35196E;
    line-height: 1;
}

.my-plan-card--featured .my-plan-card__price {
    color: #4a2a8a;
}

.my-plan-card__gross {
    font-size: 0.95rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
    line-height: 1;
}

.my-plan-card__discount {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #047857;
    background: color-mix(in srgb, #10b981 16%, #fff);
    border: 1px solid color-mix(in srgb, #10b981 28%, transparent);
}

.my-plan-card__period {
    font-size: 0.85rem;
    color: var(--site-muted);
}

.my-plan-card__head h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #35196E;
    margin: 0 0 0.35rem;
}

.my-plan-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--site-muted);
    line-height: 1.45;
}

.my-plan-card__limits,
.my-plan-card__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-plan-card__limits li,
.my-plan-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: #475569;
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, #35196E 8%, transparent);
}

.my-plan-card__limits li:last-child {
    border-bottom: none;
}

.my-plan-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, #35196E 12%, #fff);
    color: #35196E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    margin-top: 0.1rem;
}

.my-plan-card--featured .my-plan-check {
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    color: #fff;
}

.my-plan-card__features-title {
    margin: 1rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.my-plan-card__features li {
    border-bottom: none;
    padding: 0.28rem 0;
}

.my-plan-card__footer {
    margin-top: auto;
    padding-top: 1.15rem;
}

.my-plan-buy-form {
    margin: 0;
}

.my-plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.7rem 1.25rem;
    border-radius: var(--btn-pill-radius);
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.my-plan-btn--primary {
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.25);
}

.my-plan-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(53, 25, 110, 0.32);
}

.my-plan-btn--outline {
    background: #fff;
    color: var(--color-brand) !important;
    border: 1px solid rgba(53, 25, 110, 0.35);
}

.my-plan-btn--outline:hover {
    background: #f8f7ff;
    border-color: var(--color-brand);
}

.my-plan-btn--disabled {
    width: 100%;
    background: #f1f5f9;
    color: #64748b !important;
    cursor: not-allowed;
    border: 1px solid #e2e8f0;
}

/* ----- My Plan purchase confirmation popup ----- */
.swal2-popup.swal2-modal {
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    border-radius: 20px;
    padding: 1.45rem 1.45rem 1.2rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
}

.swal2-icon.swal2-question {
    border-color: color-mix(in srgb, var(--color-brand) 36%, #cbd5e1);
    color: var(--color-brand);
}

.swal2-title {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.25;
}

.swal2-html-container {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #475569;
    max-width: 36ch;
    margin: 0.35rem auto 0;
}

.swal2-actions {
    gap: 0.6rem;
    width: 100%;
    margin-top: 1.2rem;
    padding: 0;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.62rem 1.15rem;
    min-width: 132px;
    box-shadow: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.swal2-styled.swal2-confirm {
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%) !important;
    color: #fff !important;
}

.swal2-styled.swal2-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(53, 25, 110, 0.3) !important;
}

.swal2-styled.swal2-cancel {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.swal2-styled.swal2-cancel:hover {
    background: #eef2f7 !important;
    transform: translateY(-1px);
}

.my-plan-purchase-modal .modal-dialog {
    max-width: 460px;
    margin: 0.75rem auto;
}

.my-plan-purchase-modal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.my-plan-purchase-modal .modal-header {
    align-items: flex-start;
    gap: 0.65rem;
    padding: 1.15rem 1.2rem 1.05rem;
    border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
    background: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand) 48%, var(--color-brand-deep) 100%);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, #000 8%, transparent);
}

.my-plan-purchase-modal .modal-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-transform: none;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 8px color-mix(in srgb, #000 18%, transparent);
}

.my-plan-purchase-modal .modal-header .btn-close {
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    opacity: 1;
    background: color-mix(in srgb, #fff 14%, transparent);
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    transition: background 0.2s ease, transform 0.2s ease;
}

.my-plan-purchase-modal .modal-header .btn-close:hover {
    background: color-mix(in srgb, #fff 22%, transparent);
    transform: scale(1.04);
}

.my-plan-purchase-modal .modal-header .btn-close i {
    color: #fff;
    font-size: 0.9rem;
}

.my-plan-purchase-modal__body.modal-body {
    padding: 0.55rem 0.7rem 0.45rem;
    background: #fff;
}

.my-plan-purchase-modal__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: color-mix(in srgb, #fff 82%, transparent);
    font-weight: 400;
}

.my-plan-purchase-modal__plan {
    margin: 0;
    padding: 0.5rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, #e2e8f0);
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--site-secondary) 5%, #fff) 0%, #fff 100%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 6%, transparent);
}

.my-plan-purchase-modal__plan-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.my-plan-purchase-modal__plan-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.my-plan-purchase-modal__plan-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-brand);
    font-size: 0.72rem;
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.my-plan-purchase-modal__plan-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-brand);
    line-height: 1.1;
}

.my-plan-purchase-modal__plan-name {
    margin: 0.05rem 0 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.15;
}

.my-plan-purchase-modal__plan-period {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.2;
}

.my-plan-purchase-modal__plan-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}

.my-plan-purchase-modal__plan-price strong {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-brand-deep);
}

.my-plan-purchase-modal__plan-badge {
    display: inline-block;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.my-plan-purchase-modal__plan-badge--paid {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--color-brand) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.my-plan-purchase-modal__plan-badge--free {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--site-secondary) 22%, transparent);
}

.my-plan-purchase-modal__plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.my-plan-purchase-modal__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
    padding: 0.38rem 0.42rem;
    border-radius: 9px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, #e2e8f0);
    min-width: 0;
}

.my-plan-purchase-modal__detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
}

.my-plan-purchase-modal__detail-label {
    display: block;
    margin-bottom: 0.05rem;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    line-height: 1.1;
}

.my-plan-purchase-modal__detail strong {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.1;
}

.my-plan-purchase-modal__gst {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-brand) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.my-plan-purchase-modal__gst-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #475569;
    padding: 0.35rem 0;
}

.my-plan-purchase-modal__gst-row strong {
    font-weight: 600;
    color: #1f2937;
}

.my-plan-purchase-modal__gst-row--total {
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-brand) 18%, transparent);
    font-weight: 700;
    color: var(--color-brand);
}

.my-plan-purchase-modal__gst-row--total strong {
    font-size: 1.05rem;
    color: var(--color-brand);
}

.my-plan-purchase-modal__footer {
    padding: 0.85rem 1rem 0.95rem;
    background: #fff;
    border-top: 1px solid color-mix(in srgb, var(--color-brand) 10%, #e2e8f0);
}

.my-plan-purchase-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.my-plan-purchase-modal .admin-form-btn-primary.my-plan-purchase-modal__btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.6rem 0.85rem;
    min-height: 2.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 9999px;
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    border: 1px solid var(--color-brand-deep);
    box-shadow: 0 2px 10px rgba(53, 25, 110, 0.2);
}

.my-plan-purchase-modal .admin-form-btn-primary.my-plan-purchase-modal__btn i {
    font-size: 0.68rem;
    margin-left: 0.15rem;
}

.my-plan-purchase-modal .admin-form-btn-primary.my-plan-purchase-modal__btn:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.05);
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.28);
    transform: translateY(-1px);
}

.my-plan-purchase-modal .admin-form-btn-primary.my-plan-purchase-modal__btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.my-plan-purchase-modal__error {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #dc3545;
    text-align: center;
}

@media (max-width: 575px) {
    .my-plan-purchase-modal .modal-header {
        padding: 1rem;
    }

    .my-plan-purchase-modal__body.modal-body {
        padding: 0.5rem 0.6rem 0.4rem;
    }

    .my-plan-purchase-modal__footer {
        padding: 0.75rem 0.85rem 0.85rem;
    }

    .my-plan-purchase-modal__plan-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-plan-purchase-modal__plan-price {
        align-items: flex-start;
    }

    .my-plan-purchase-modal__plan-grid {
        grid-template-columns: 1fr;
    }

    .my-plan-purchase-modal__actions {
        grid-template-columns: 1fr;
    }
}

.admin-subscriptions-page .subscription-status-tabs {
    border-bottom: 1px solid #e2e8f0;
}

.admin-subscriptions-page .subscription-status-tabs .nav-link {
    color: #475569;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
}

.admin-subscriptions-page .subscription-status-tabs .nav-link:hover {
    color: var(--color-brand);
    border-color: transparent;
}

.admin-subscriptions-page .subscription-status-tabs .nav-link.active {
    color: var(--color-brand);
    background: transparent;
    border-color: var(--color-brand);
}

.admin-subscriptions-page .subscription-gst-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-brand) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.admin-subscriptions-page .subscription-gst-cell--free {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.22);
}

.admin-subscriptions-page .subscription-gst-cell__top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-subscriptions-page .subscription-gst-cell__amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1.2;
}

.admin-subscriptions-page .subscription-gst-cell--free .subscription-gst-cell__amount {
    color: #047857;
}

.admin-subscriptions-page .subscription-gst-cell__rate {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand-mid), var(--color-brand));
}

.admin-subscriptions-page .subscription-gst-cell--free .subscription-gst-cell__rate {
    background: linear-gradient(135deg, #34d399, #059669);
}

.admin-subscriptions-page .subscription-gst-cell__total {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .admin-subscriptions-page .subscription-status-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* Subscription reject modal — brand theme */
.subscription-reject-modal {
    z-index: 1060;
}

.subscription-reject-modal .modal-dialog {
    max-width: 440px;
}

.subscription-reject-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(53, 25, 110, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
}

.subscription-reject-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-brand) 10%, #fff) 0%,
        color-mix(in srgb, var(--color-brand-mid) 5%, #fff) 100%
    );
}

.subscription-reject-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brand);
    letter-spacing: 0.01em;
}

.subscription-reject-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-brand) 30%, transparent);
    font-size: 0.95rem;
}

.subscription-reject-modal .modal-header .btn-close {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background-color: transparent;
    opacity: 1;
    box-shadow: none;
}

.subscription-reject-modal .modal-header .btn-close:hover {
    background-color: color-mix(in srgb, var(--color-brand) 10%, #fff);
}

.subscription-reject-modal .modal-header .btn-close:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.subscription-reject-modal .modal-body {
    padding: 18px 24px 24px;
}

.subscription-reject-modal__subtitle {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.45;
}

.subscription-reject-modal .form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-brand-deep);
}

.subscription-reject-modal .form-control {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, #e2e8f0);
    background: #fff;
    color: #1f1437;
    padding: 0.75rem 0.9rem;
    box-shadow: none;
    resize: vertical;
    min-height: 110px;
}

.subscription-reject-modal .form-control:hover {
    border-color: color-mix(in srgb, var(--color-brand) 28%, #cbd5e1);
}

.subscription-reject-modal .form-control:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline: none;
}

.subscription-reject-modal .form-control::placeholder {
    color: #94a3b8;
}

.subscription-reject-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 1.15rem;
}

.subscription-reject-modal__actions .btn-main {
    flex: 1;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.subscription-reject-modal__btn-cancel {
    background: color-mix(in srgb, var(--color-brand) 8%, #fff) !important;
    color: var(--color-brand) !important;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent) !important;
    box-shadow: none !important;
}

.subscription-reject-modal__btn-cancel:hover {
    background: color-mix(in srgb, var(--color-brand) 14%, #fff) !important;
    color: var(--color-brand-deep) !important;
    filter: none;
    transform: translateY(-1px);
}

.subscription-reject-modal__btn-submit {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%) !important;
}

@media (max-width: 575.98px) {
    .subscription-reject-modal .modal-dialog {
        margin: 0.75rem;
    }

    .subscription-reject-modal .modal-header,
    .subscription-reject-modal .modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .subscription-reject-modal__actions {
        flex-direction: column;
    }

    .subscription-reject-modal__actions .btn-main {
        width: 100%;
    }
}

/* ----- Customer Connect Merchant (My Plan aligned) ----- */
.connect-merchant-page .connect-merchant-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.connect-merchant-page .connect-merchant-page__header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    margin-bottom: 0.35rem;
}

.connect-merchant-page .connect-merchant-page__header p {
    margin: 0;
    color: var(--site-muted);
    font-size: 0.9rem;
}

.connect-merchant-page .connect-merchant-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
    color: var(--color-brand-deep);
}

.connect-merchant-page .connect-merchant-info-banner i {
    font-size: 1.25rem;
    color: var(--color-brand);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.connect-merchant-page .connect-merchant-info-banner p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-brand-deep);
}

.connect-merchant-page .connect-merchant-panel {
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--site-secondary) 10%, #fff) 0%,
        color-mix(in srgb, var(--site-light) 92%, #fff) 40%,
        #fff 100%
    );
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .connect-merchant-panel--compact {
    padding: 1rem 1.25rem;
}

.connect-merchant-page .connect-merchant-panel__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    margin: 0;
}

.connect-merchant-page .connect-merchant-panel__toolbar {
    margin-bottom: 0.5rem;
}

.connect-merchant-page .connect-merchant-stats .sort-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 6%, transparent);
}

.connect-merchant-page .connect-merchant-stats .sort-card .title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.connect-merchant-page .connect-merchant-stats .sort-card .text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.2;
}

.connect-merchant-page .table {
    margin-bottom: 0;
    border-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .table thead th {
    background: color-mix(in srgb, var(--site-light) 70%, #fff);
    color: var(--color-brand-deep);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
    vertical-align: middle;
}

.connect-merchant-page .table tbody td {
    font-size: 0.84rem;
    color: #475569;
    border-color: #f1f5f9;
    vertical-align: middle;
}

.connect-merchant-page .table tbody td a {
    color: var(--color-brand);
    font-weight: 500;
}

.connect-merchant-page .table tbody td a:hover {
    color: var(--color-brand-deep);
}

.connect-merchant-page .merchant-details-box {
    background: color-mix(in srgb, var(--site-light) 55%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.connect-merchant-page .connect-merchant-settlement-date {
    padding: 0.5rem 1rem;
    text-align: left;
    border-top: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
    background: color-mix(in srgb, var(--site-secondary) 8%, #fff);
}

.connect-merchant-page .connect-merchant-settlement-date strong {
    color: var(--color-brand-deep);
    font-size: 0.8rem;
    font-weight: 700;
}

.connect-merchant-page .connect-merchant-settlement-date__tag {
    color: var(--site-muted);
    font-size: 0.72rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.connect-merchant-page .connect-merchant-settlement-date__tag--today {
    color: #166534;
}

.connect-merchant-page .no-settlement-cell {
    background: color-mix(in srgb, var(--site-light) 80%, #fff);
    border-left: 4px solid color-mix(in srgb, var(--color-brand) 40%, transparent);
}

.connect-merchant-page .btn-create-settlement {
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.connect-merchant-page .btn-create-settlement:hover {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.connect-merchant-page .badge.bg-success {
    background: linear-gradient(90deg, #059669, #10b981) !important;
}

.connect-merchant-page .badge.bg-danger {
    background: linear-gradient(90deg, #dc2626, #ef4444) !important;
}

.connect-merchant-page .badge.bg-info {
    background: linear-gradient(90deg, var(--color-brand-mid), var(--color-brand)) !important;
}

.connect-merchant-page span.badge.text-white:not(.bg-info) {
    background: linear-gradient(90deg, #059669, #10b981) !important;
}

.connect-merchant-page .connect-merchant-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--btn-pill-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff !important;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 50%, var(--color-brand-deep) 100%);
    box-shadow: 0 4px 14px rgba(53, 25, 110, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.connect-merchant-page .connect-merchant-add-btn:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(53, 25, 110, 0.32);
}

.connect-merchant-page .connect-merchant-limit-hint {
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff) !important;
    border-radius: 8px;
    border-left: 3px solid var(--color-brand) !important;
    color: var(--color-brand-deep) !important;
}

/* Test Merchant Payment modal */
.check-merchant-payment-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 48px color-mix(in srgb, #35196E 18%, transparent);
}

.check-merchant-payment-modal .modal-header {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid color-mix(in srgb, #35196E 12%, transparent);
    background: linear-gradient(135deg, #35196E 0%, #4a2a8f 100%);
}

.check-merchant-payment-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.check-merchant-payment-modal .modal-title figure {
    margin: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, #fff 16%, transparent);
}

.check-merchant-payment-modal .modal-title figure img {
    width: 22px;
    height: 22px;
}

.check-merchant-payment-modal .modal-header .btn-close {
    margin: 0;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    opacity: 1;
    background: color-mix(in srgb, #fff 14%, transparent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: none;
}

.check-merchant-payment-modal .modal-header .btn-close:hover {
    background: color-mix(in srgb, #fff 24%, transparent);
}

.check-merchant-payment-modal .modal-body {
    padding: 1.25rem 1.35rem 1rem;
}

.check-merchant-payment-modal__intro {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--site-muted);
}

.check-merchant-payment-modal__summary {
    margin-bottom: 1.15rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    background: color-mix(in srgb, #35196E 5%, #fff);
}

.check-merchant-payment-modal__summary-top {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.check-merchant-payment-modal__summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #35196E;
    background: color-mix(in srgb, #35196E 10%, #fff);
}

.check-merchant-payment-modal__summary-top h6 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #35196E;
}

.check-merchant-payment-modal__summary-top p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--site-muted);
    word-break: break-word;
}

.check-merchant-payment-modal__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.check-merchant-payment-modal__amount-group {
    margin-bottom: 0.85rem;
}

.check-merchant-payment-modal__amount-group .form-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #35196E;
    margin-bottom: 0.45rem;
}

.check-merchant-payment-modal__amount-input {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
}

.check-merchant-payment-modal__amount-input span {
    font-size: 1.05rem;
    font-weight: 700;
    color: #35196E;
}

.check-merchant-payment-modal__amount-input .form-control {
    border: 0;
    padding: 0;
    min-height: auto;
    box-shadow: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: #35196E;
}

.check-merchant-payment-modal__amount-input .form-control:focus {
    box-shadow: none;
}

.check-merchant-payment-modal__quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.check-merchant-payment-modal__quick-btn {
    border: 1px solid color-mix(in srgb, #35196E 16%, transparent);
    background: #fff;
    color: #35196E;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.check-merchant-payment-modal__quick-btn:hover,
.check-merchant-payment-modal__quick-btn.is-active {
    background: #35196E;
    border-color: #35196E;
    color: #fff;
}

.check-merchant-payment-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    border-left: 3px solid var(--color-brand);
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--color-brand-deep);
}

.check-merchant-payment-modal__note i {
    margin-top: 0.1rem;
    color: var(--color-brand);
}

.check-merchant-payment-modal .modal-footer {
    padding: 0.9rem 1.35rem 1.2rem;
    border-top: 1px solid color-mix(in srgb, #35196E 10%, transparent);
    gap: 0.65rem;
}

.check-merchant-payment-modal__btn-cancel {
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    color: #35196E;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-weight: 600;
}

.check-merchant-payment-modal__btn-cancel:hover {
    background: color-mix(in srgb, #35196E 6%, #fff);
    color: #35196E;
}

.check-merchant-payment-modal__btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

@media (max-width: 575.98px) {
    .check-merchant-payment-modal .modal-footer {
        flex-direction: column;
    }

    .check-merchant-payment-modal__btn-cancel,
    .check-merchant-payment-modal__btn-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .connect-merchant-page .connect-merchant-panel {
        padding: 1rem;
    }
}

/* Dashboard page redesign */
.admin-dash-page {
    --dash-border: color-mix(in srgb, #35196E 14%, transparent);
    --dash-shadow: 0 10px 28px color-mix(in srgb, #35196E 8%, transparent);
    --dash-brand-soft: color-mix(in srgb, #35196E 8%, #fff);
}

/* Consistent space below app header (same as Settings page) */
section.main-part-body.admin-dash-page {
    padding-top: calc(var(--admin-header-height) + 14px);
}

.admin-dash-page .main-part-body-inner {
    padding-bottom: 1.25rem;
}

.admin-dash-page .dash-page-header {
    margin-top: 0.35rem;
    margin-bottom: 1rem;
}

.admin-dash-page .dash-welcome {
    margin-top: 0.35rem;
    margin-bottom: 1rem;
}

.admin-dash-page .dash-page-header .dash-welcome {
    margin-top: 0;
    margin-bottom: 0;
}

.admin-dash-page .dash-welcome__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.admin-dash-page .dash-welcome__title {
    margin: 0 0 0.4rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: #35196E;
    line-height: 1.25;
}

.admin-dash-page .dash-page-header .dash-welcome__title {
    margin: 0 0 0.45rem;
}

.admin-dash-page .dash-welcome__meta {
    margin: 0;
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--site-muted);
}

.admin-dash-page .dash-panel__heading .dash-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #35196E;
}

.admin-dash-page .dash-panel__heading .dash-card__subtitle {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--site-muted);
}

.admin-dash-page .dash-welcome__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.admin-dash-page .dash-welcome__badge--success {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.admin-dash-page .dash-welcome__badge--danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.admin-dash-page .dashboard-top-cards,
.admin-dash-page .dashboard-txn-cards,
.admin-dash-page .dashboard-hero,
.admin-dash-page .dash-txn-top-row {
    margin-top: 0.5rem;
}

.admin-dash-page .dash-txn-top-row > [class*='col-'] {
    display: flex;
}

.admin-dash-page .dash-left-column,
.admin-dash-page .dash-right-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-dash-page .dashboard-hero > [class*='col-'] {
    display: flex;
}

.admin-dash-page .admin-dash-revenue-row > [class*='col-'] {
    min-width: 0;
}

.admin-dash-page .admin-dash-revenue-row .dash-card {
    width: 100%;
}

.admin-dash-page .dashboard-hero .dash-card--plan .dash-metrics li h3,
.admin-dash-page .admin-dash-revenue-row .dash-metrics li h3 {
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
}

.admin-dash-page .dash-card--wide {
    margin-bottom: 0;
    height: auto;
}

.admin-dash-page .dash-mini-stats {
    margin-top: 0;
    width: 100%;
}

.admin-dash-page .dash-mini-stats > [class*='col-'] {
    display: flex;
}

.admin-dash-page .dash-mini-card {
    width: 100%;
    min-height: 96px;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    background: linear-gradient(180deg, #fff 0%, #fff 100%);
    /* box-shadow: var(--dash-shadow); */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    display: flex;
    align-items: center;
}

.admin-dash-page .dash-mini-card__body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
}

.admin-dash-page .dash-mini-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

.admin-dash-page .dash-mini-card--success {
    border: 1px solid #86efac;
    border-top: 4px solid #16a34a;
    background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.admin-dash-page .dash-mini-card--success .dash-mini-card__icon {
    background: #dcfce7;
    border-color: #bbf7d0;
}

.admin-dash-page .dash-mini-card--pending {
    border: 1px solid #facc15;
    border-top: 4px solid #eab308;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.admin-dash-page .dash-mini-card--pending .dash-mini-card__icon {
    background: #fef9c3;
    border-color: #fde047;
}

.admin-dash-page .dash-mini-card--failed {
    border: 1px solid #fca5a5;
    border-top: 4px solid #dc2626;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}

.admin-dash-page .dash-mini-card--failed .dash-mini-card__icon {
    background: #fee2e2;
    border-color: #fecaca;
}

.admin-dash-page .dash-mini-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--dash-brand-soft);
    border: 1px solid color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .dash-mini-card__icon img {
    width: 24px;
    height: 24px;
}

.admin-dash-page .dash-mini-card--failed .dash-mini-card__icon i {
    font-size: 1.35rem;
    color: #dc2626;
}

.admin-dash-page .dash-mini-card__value {
    display: block;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.1;
}

.admin-dash-page .dash-mini-card--success .dash-mini-card__value {
    color: #16a34a;
}

.admin-dash-page .dash-mini-card--pending .dash-mini-card__value {
    color: #ca8a04;
}

.admin-dash-page .dash-mini-card--failed .dash-mini-card__value {
    color: #dc2626;
}

.admin-dash-page .dash-mini-card__label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--site-muted);
    line-height: 1.35;
}

/* Product Statistic style — vertical plan card */
.admin-dash-page .dash-stat-vertical {
    height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.2rem 1.15rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .dash-stat-vertical__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .dash-stat-vertical__badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, #35196E 22%, transparent);
}

.admin-dash-page .dash-stat-vertical__hero {
    text-align: center;
    padding: 0.85rem 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 5%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 10%, transparent);
}

.admin-dash-page .dash-stat-vertical__hero-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--site-muted);
    margin-bottom: 0.35rem;
}

.admin-dash-page .dash-stat-vertical__hero-value {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.25;
}

.admin-dash-page .dash-stat-vertical__hero-meta {
    margin-top: 0.5rem;
}

.admin-dash-page .dash-stat-vertical__list {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-dash-page .dash-stat-vertical__list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, #35196E 8%, transparent);
}

.admin-dash-page .dash-stat-vertical__list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-dash-page .dash-stat-vertical__list-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #35196E;
    background: var(--dash-brand-soft);
    border: 1px solid color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .dash-stat-vertical__list-body {
    flex: 1;
    min-width: 0;
}

.admin-dash-page .dash-stat-vertical__list-body p {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    color: var(--site-muted);
}

.admin-dash-page .dash-stat-vertical__list-body strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.admin-dash-page .dash-stat-vertical__progress {
    display: block;
    height: 4px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, #35196E 8%, #fff);
    overflow: hidden;
}

.admin-dash-page .dash-stat-vertical__progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4a2a8a, #35196E);
}

.admin-dash-page .dash-stat-vertical__pill {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-dash-page .dash-stat-vertical__pill--danger {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.admin-dash-page .dash-stat-vertical__list-item--failed {
    margin-top: 0.35rem;
    padding-top: 0.85rem !important;
    border-top: 1px dashed color-mix(in srgb, #dc2626 25%, transparent) !important;
    border-bottom: 0 !important;
}

.admin-dash-page .dash-stat-vertical__list-item--failed .dash-stat-vertical__list-icon {
    color: #dc2626;
    background: #fef2f2;
}

.admin-dash-page .dash-stat-vertical__list-item--failed .dash-stat-vertical__list-body strong {
    font-size: 1.25rem;
    color: #dc2626;
}

.admin-dash-page .dash-stat-vertical__failed-only {
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    text-align: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.admin-dash-page .dash-stat-vertical__failed-only p {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #991b1b;
}

.admin-dash-page .dash-stat-vertical__failed-only strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #dc2626;
}

.admin-dash-page .dash-stat-vertical .dash-plan-empty {
    min-height: 120px;
    padding: 1rem 0;
}

/* My Profile — full-width plan card (overrides vertical flex layout) */
.admin-dash-page.my-profile-page .dash-stat-vertical--full-width {
    display: grid !important;
    flex: none;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "hero list"
        "footer footer";
    column-gap: 1.5rem;
    row-gap: 0;
    padding: 1.35rem 1.5rem 1.2rem;
    align-items: start;
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__header {
    grid-area: header;
    margin-bottom: 1.15rem;
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__hero {
    grid-area: hero;
    margin-bottom: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__list {
    grid-area: list;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    flex: none;
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__list li {
    padding: 0.85rem 0.9rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, #35196E 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #35196E 3%, #fff);
    border-bottom: 1px solid color-mix(in srgb, #35196E 10%, transparent);
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__list li:last-child {
    padding-bottom: 0.85rem;
}

.admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__footer,
.admin-dash-page.my-profile-page .dash-stat-vertical--full-width > .dash-plan-empty {
    grid-area: footer;
    grid-column: 1 / -1;
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .admin-dash-page.my-profile-page .dash-stat-vertical--full-width {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "hero"
            "list"
            "footer";
    }

    .admin-dash-page.my-profile-page .dash-stat-vertical--full-width .dash-stat-vertical__list {
        grid-template-columns: 1fr;
    }
}

.admin-dash-page .dash-failed-card {
    flex-shrink: 0;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}

.admin-dash-page .dash-card {
    height: auto;
    padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: linear-gradient(180deg, #fff 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .dash-card--payment {
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
}

.admin-dash-page .dash-card--plan {
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
}

.admin-dash-page .dash-card__header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.admin-dash-page .dash-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: #fff;
}

.admin-dash-page .dash-card__icon--payment,
.admin-dash-page .dash-card__icon--profile {
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 28%, transparent);
}

.admin-dash-page .dash-card__icon--plan {
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 28%, transparent);
}

.admin-dash-page .dash-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brand);
}

.admin-dash-page .dash-card__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--site-muted);
}

.admin-dash-page .dash-metrics {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-dash-page .dash-metrics--triple li {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0.5rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 5%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .dash-metrics li:not(:last-child) {
    position: relative;
}

.admin-dash-page .dash-metrics li p {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    color: var(--site-muted);
}

.admin-dash-page .dash-metrics li h3 {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 800;
    text-align: center;
    color: var(--color-brand);
    line-height: 1.25;
    word-break: break-word;
}

.admin-dash-page .dash-plan-summary__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-dash-page .dash-plan-summary__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.admin-dash-page .dash-plan-summary__name {
    margin: 0 0 0.45rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-brand);
}

.admin-dash-page .dash-plan-summary__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-dash-page .dash-plan-summary__tag--free {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.admin-dash-page .dash-plan-summary__tag--paid {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--site-secondary) 28%, transparent);
}

.admin-dash-page .dash-plan-summary__price strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.1;
}

.admin-dash-page .dash-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-dash-page .dash-plan-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.admin-dash-page .dash-plan-grid__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
}

.admin-dash-page .dash-plan-grid li p {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--site-muted);
}

.admin-dash-page .dash-plan-grid li h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1.3;
}

.admin-dash-page .dash-plan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 160px;
    text-align: center;
    color: var(--site-muted);
}

.admin-dash-page .dash-plan-empty--compact {
    min-height: 0;
    flex: 1;
    padding: 0.85rem 0.5rem;
}

.admin-dash-page .dash-plan-empty i {
    font-size: 1.75rem;
    color: color-mix(in srgb, var(--color-brand) 45%, #fff);
}

.admin-dash-page .dash-plan-empty p {
    margin: 0;
}

.admin-dash-page .dash-plan-empty__link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 100%);
}

.admin-dash-page .dash-txn-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    min-height: 110px;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    background: #fff;
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .dash-txn-card--success {
    border-left: 4px solid #16a34a;
    background: linear-gradient(90deg, #f0fdf4 0%, #fff 38%);
}

.admin-dash-page .dash-txn-card--pending {
    border-left: 4px solid #ea580c;
    background: linear-gradient(90deg, #fff7ed 0%, #fff 38%);
}

.admin-dash-page .dash-txn-card--failed {
    border-left: 4px solid #dc2626;
    background: linear-gradient(90deg, #fef2f2 0%, #fff 38%);
}

.admin-dash-page .dash-txn-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.admin-dash-page .dash-txn-card__icon img {
    width: 28px;
    height: 28px;
}

.admin-dash-page .dash-txn-card--failed .dash-txn-card__icon i {
    font-size: 1.65rem;
    color: #dc2626;
}

.admin-dash-page .dash-txn-card__body p {
    margin: 0 0 0.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.35;
}

.admin-dash-page .dash-txn-card__body strong {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1;
}

@media (max-width: 991.98px) {
    .admin-dash-page .dash-plan-grid {
        grid-template-columns: 1fr;
    }

    .admin-dash-page .dash-stat-vertical {
        margin-top: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .admin-dash-page .dash-welcome__title {
        font-size: 1.35rem;
    }

    .admin-dash-page .dash-plan-summary__top {
        flex-direction: column;
    }

    .admin-dash-page .dash-txn-card__body strong {
        font-size: 1.65rem;
    }

    .admin-dash-page .dash-metrics--triple {
        flex-direction: column;
    }

    .admin-dash-page .admin-dash-revenue-row .dash-metrics--triple li {
        width: 100%;
    }
}

/* Dashboard panels: tables & chart */
.admin-dash-page .dash-section-row {
    margin-top: 0.75rem;
}

.admin-dash-page .dash-panel {
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .dash-panel--violet {
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
}

.admin-dash-page .dash-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--site-secondary) 22%, transparent);
}

.admin-dash-page .dash-panel__header--stack {
    margin-bottom: 0.85rem;
}

.admin-dash-page .dash-panel__heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/*
 * Dashboard UI primitives (scoped under .admin-dash-page — same look everywhere)
 * Search: .dash-search / .searchbox | Buttons: .btn-main | Tables: .table / .adm-tbl
 * Panels: .dash-panel | Pagination: .pagination | Filters: .dash-filter-*
 */
/* Dashboard search — shared .dash-search / .searchbox (flex layout, no overlap) */
.admin-dash-page .dash-search,
.admin-dash-page .searchbox {
    margin: 0;
    position: relative;
}

.admin-dash-page .dash-search form,
.admin-dash-page .searchbox form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.admin-dash-page .dash-search .form-control,
.admin-dash-page .searchbox .form-control {
    flex: 1 1 auto;
    min-width: 140px;
    width: auto;
    position: relative;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    font-size: 0.9rem;
    background: #fff;
}

.admin-dash-page .dash-search .form-control:focus,
.admin-dash-page .searchbox .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 12%, transparent);
    outline: none;
}

.admin-dash-page .dash-search button,
.admin-dash-page .searchbox button {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    flex-shrink: 0;
    margin: 0;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
}

.admin-dash-page .dash-search button:hover,
.admin-dash-page .searchbox button:hover {
    background: #35196E;
}

.admin-dash-page .dash-panel__actions .dash-search,
.admin-dash-page .dash-panel__actions .searchbox {
    min-width: min(100%, 320px);
}

.admin-dash-page .dash-panel__actions .dash-search .form-control,
.admin-dash-page .dash-panel__actions .searchbox .form-control {
    min-width: 200px;
}

.admin-dash-page .dash-panel__tabs {
    border-bottom-color: color-mix(in srgb, var(--site-secondary) 18%, transparent);
    padding: 0 0.15rem;
}

.admin-dash-page .dash-panel__tabs .nav-link {
    color: var(--site-muted);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.admin-dash-page .dash-panel__tabs .nav-link.active {
    color: var(--color-brand);
    background: transparent;
    border-bottom-color: var(--site-secondary);
}

.admin-dash-page .dash-table-wrap {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--site-secondary) 12%, transparent);
    background: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

.admin-dash-page .dash-table {
    margin-bottom: 0;
}

.admin-dash-page .dash-table thead th {
    padding: 0.95rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
    text-align: center;
    background: color-mix(in srgb, var(--site-secondary) 8%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--site-secondary) 14%, transparent);
}

.admin-dash-page .dash-table tbody td {
    padding: 0.85rem 0.75rem;
    font-size: 0.9rem;
    color: #1f2937;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--site-secondary) 8%, transparent);
}

.admin-dash-page .dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-dash-page .dash-table tbody tr:hover td {
    background: color-mix(in srgb, var(--site-secondary) 5%, #fff);
}

.admin-dash-page .dash-table__total-row td {
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff) !important;
    font-weight: 700;
    color: var(--color-brand);
}

.admin-dash-page .dash-table__empty {
    padding: 2rem 1rem !important;
    color: var(--site-muted);
}

.admin-dash-page .dash-table__link {
    color: var(--color-brand);
    font-weight: 700;
    text-decoration: none;
}

.admin-dash-page .dash-table__link:hover {
    color: var(--site-secondary);
}

.admin-dash-page .dash-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
}

.admin-dash-page .dash-status-pill--success {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.admin-dash-page .dash-status-pill--warning {
    color: #c2410c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.admin-dash-page .dash-status-pill--info {
    color: #1e3f8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.admin-dash-page .dash-status-pill--danger {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.admin-dash-page .dash-status-pill--muted {
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.admin-dash-page .dash-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.admin-dash-page .dash-empty-state img {
    width: 120px;
    opacity: 0.85;
}

.admin-dash-page .dash-empty-state p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--site-muted);
}

.admin-dash-page .dash-panel__footer {
    margin-top: 1rem;
}

.admin-dash-page .dash-panel__footer--actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
}

.admin-dash-page .dash-btn-link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, var(--site-secondary) 0%, var(--site-violet-mid) 100%);
}

.admin-dash-page .dash-panel--chart {
    padding-bottom: 1rem;
}

.admin-dash-page .dash-chart-wrap {
    min-height: 320px;
    padding: 0.75rem 0.5rem 0.25rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--site-secondary) 12%, transparent);
    background: rgba(255, 255, 255, 0.88);
}

@media (max-width: 767.98px) {
    .admin-dash-page .dash-panel__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-dash-page .dash-panel__actions,
    .admin-dash-page .dash-panel__actions .searchbox,
    .admin-dash-page .dash-panel__actions .searchbox form {
        width: 100%;
    }

    .admin-dash-page .dash-panel__actions .dash-search,
    .admin-dash-page .dash-panel__actions .searchbox {
        min-width: 0;
        width: 100%;
    }

    .admin-dash-page .dash-panel__actions .dash-search form,
    .admin-dash-page .dash-panel__actions .searchbox form {
        flex-wrap: wrap;
    }

    .admin-dash-page .dash-panel__actions .dash-search .form-control,
    .admin-dash-page .dash-panel__actions .searchbox .form-control {
        min-width: 0;
        flex: 1 1 100%;
    }

    .admin-dash-page .dash-panel__actions .dash-search button,
    .admin-dash-page .dash-panel__actions .searchbox button {
        width: 100%;
    }
}

/* Dashboard customer profile card */
.admin-dash-page .dash-card--profile {
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
}

.admin-dash-page .dash-card--profile .dash-card__header {
    flex-wrap: wrap;
}

.admin-dash-page .dash-profile-card__link {
    margin-left: auto;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    white-space: nowrap;
}

.admin-dash-page .dash-profile-card__body {
    border-top: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
    padding-top: 1rem;
}

.admin-dash-page .dash-profile-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.admin-dash-page .dash-profile-card__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 220px;
}

.admin-dash-page .dash-profile-card__right {
    text-align: right;
    min-width: 0;
    flex: 1 1 200px;
}

.admin-dash-page .dash-profile-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
}

img.dash-profile-card__avatar.customer-avatar {
    display: block;
    object-fit: cover;
    object-position: center top;
    padding: 0;
    font-size: 0;
    color: transparent;
    background: #E8E2F4;
}

/* Customer avatar (Aadhaar photo or placeholder) */
.customer-avatar {
    display: block;
    object-fit: cover;
    object-position: center top;
    background: #E8E2F4;
    flex-shrink: 0;
}

.customer-avatar--sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.customer-avatar--md {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.customer-avatar--lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.customers-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.customers-name-cell:hover {
    color: #35196E;
}

.customers-name-cell .customer-avatar {
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .dash-profile-card__label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.admin-dash-page .dash-profile-card__name {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #35196E;
    line-height: 1.3;
}

.admin-dash-page .dash-profile-card__contact {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #35196E;
    line-height: 1.45;
    word-break: break-word;
}

.admin-dash-page .dash-profile-card__registered span {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--site-muted);
}

.admin-dash-page .dash-profile-card__registered strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #35196E;
}

.admin-dash-page .dash-profile-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

@media (max-width: 767.98px) {
    .admin-dash-page .dash-profile-card__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-dash-page .dash-profile-card__right {
        text-align: left;
        width: 100%;
    }

    .admin-dash-page .dash-card--profile .dash-card__header {
        gap: 0.75rem;
    }

    .admin-dash-page .dash-profile-card__link {
        margin-left: 0;
    }
}

/* ----- Unified dashboard page design (list / form / merchant pages) ----- */
.admin-dash-page .main-part-body-inner {
    padding-bottom: 1.5rem;
}

.admin-dash-page .top-line {
    margin: 0 0 1.25rem;
    opacity: 0.35;
}

/* dash-page-header spacing defined in dashboard redesign block above */

.admin-dash-page .dash-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.admin-dash-page .dash-search-panel {
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
}

.admin-dash-page .dash-search-panel .searchbox,
.admin-dash-page .dash-search-panel form {
    margin-bottom: 0;
}

.admin-dash-page .note-blue-box.connect-merchant-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.admin-dash-page .page-head-ts,
.admin-dash-page .connect-merchant-page__header,
.admin-dash-page .my-plan-page__header,
.admin-dash-page .setting-title {
    margin-bottom: 1.25rem;
}

.admin-dash-page .page-head-ts .headding-box h2,
.admin-dash-page .connect-merchant-page__header h2,
.admin-dash-page .my-plan-page__header h2,
.admin-dash-page .setting-title h2,
.admin-dash-page .headding-box h2 {
    font-size: 1.65rem;
    font-weight: 700;
    color: #35196E;
    margin: 0 0 0.35rem;
}

.admin-dash-page .page-head-ts .headding-box p,
.admin-dash-page .connect-merchant-page__header p,
.admin-dash-page .my-plan-page__header p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--site-muted);
    line-height: 1.45;
}

.admin-dash-page .page-head-ts {
    margin-bottom: 1rem;
}

.admin-dash-page .page-head-ts .row {
    --bs-gutter-y: 1rem;
}

.admin-dash-page .balance-row {
    margin-top: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .connect-merchant-panel,
.admin-dash-page .connect-merchant-page .api-page-box.connect-merchant-panel,
.admin-dash-page .api-page-box:not(.connect-merchant-panel) {
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .connect-merchant-info-banner {
    border-radius: 14px;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    background: color-mix(in srgb, #35196E 6%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
}

.admin-dash-page .connect-merchant-stats .sort-card,
.admin-dash-page .sort-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, #35196E 4%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 12%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, #35196E 6%, transparent);
}

.admin-dash-page .connect-merchant-stats .sort-card .title,
.admin-dash-page .sort-card .title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.admin-dash-page .connect-merchant-stats .sort-card .text,
.admin-dash-page .sort-card .text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #35196E;
    line-height: 1.25;
}

.admin-dash-page .table-responsive,
.admin-dash-page .adm-tbl-wrap,
.admin-dash-page .balance-row .table-responsive,
.admin-dash-page .dash-month-panel .table-responsive,
.admin-dash-page .dash-list-panel.balance-row .table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid color-mix(in srgb, #35196E 10%, transparent);
    background: #fff;
}

.admin-dash-page .table-responsive > .table,
.admin-dash-page .adm-tbl-wrap > table,
.admin-dash-page .adm-tbl,
.admin-dash-page .balance-row .table-responsive > table,
.admin-dash-page .balance-row table,
.admin-dash-page .dash-month-panel .table-responsive > .table,
.admin-dash-page .table {
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
}

.admin-dash-page .table thead th,
.admin-dash-page .table thead.table-dark th,
.admin-dash-page .adm-tbl thead th,
.admin-dash-page .balance-row table thead th {
    background: color-mix(in srgb, #35196E 8%, #fff) !important;
    color: #35196E !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid color-mix(in srgb, #35196E 12%, transparent) !important;
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    white-space: nowrap;
    word-break: keep-all;
}

.admin-dash-page .table tbody td,
.admin-dash-page .adm-tbl tbody td,
.admin-dash-page .adm-tbl-wrap table tbody td,
.admin-dash-page .balance-row table tbody td {
    padding: 0.75rem;
    font-size: 0.88rem;
    vertical-align: middle;
    border-color: color-mix(in srgb, #35196E 8%, transparent);
    color: #374151;
    white-space: nowrap;
    word-break: normal;
}

.admin-dash-page .table tbody tr:hover td,
.admin-dash-page .adm-tbl tbody tr:hover td,
.admin-dash-page .adm-tbl-wrap table tbody tr:hover td,
.admin-dash-page .balance-row table tbody tr:hover td {
    background: color-mix(in srgb, #35196E 4%, #fff);
}

.admin-dash-page .table-bordered {
    border-color: color-mix(in srgb, #35196E 10%, transparent);
}

.admin-dash-page .nav-tabs {
    gap: 0.45rem;
    border-bottom: 1px solid color-mix(in srgb, #35196E 12%, transparent);
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
    flex-wrap: wrap;
}

.admin-dash-page .nav-tabs .nav-link {
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #35196E;
    background: #fff;
    margin-bottom: 0.35rem;
}

.admin-dash-page .nav-tabs .nav-link:hover {
    background: var(--dash-brand-soft);
    border-color: color-mix(in srgb, #35196E 22%, transparent);
    color: #35196E;
}

.admin-dash-page .nav-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    border-color: #35196E;
    box-shadow: 0 4px 12px color-mix(in srgb, #35196E 22%, transparent);
}

.admin-dash-page .subscription-status-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
}

.admin-dash-page .alert {
    border-radius: 14px;
    border-width: 1px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.admin-dash-page .alert-info {
    background: color-mix(in srgb, #35196E 6%, #fff);
    border-color: color-mix(in srgb, #35196E 18%, transparent);
    color: #1f2937;
}

.admin-dash-page .alert-warning {
    background: #fffbeb;
    border-color: #fde047;
    color: #713f12;
}

.admin-dash-page .allsearchbox .form-control {
    border-radius: 12px;
    border-color: color-mix(in srgb, #35196E 22%, transparent);
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    min-height: 2.45rem;
}

.admin-dash-page .allsearchbox .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 12%, transparent);
}

.admin-dash-page .allsearchbox button {
    border-radius: 10px;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
    position: relative;
    transform: none;
}

.admin-dash-page .allsearchbox button:hover {
    background: #35196E;
}

/* Dashboard buttons — .btn-main */
.admin-dash-page .btn-main {
    border-radius: 12px;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    border: none;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
}

.admin-dash-page .btn-main:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 25%, transparent);
}

.admin-dash-page .timing-boxs,
.admin-dash-page .transaction-boxs,
.admin-dash-page .profile-box {
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.75rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    background-image: none;
    box-shadow: var(--dash-shadow);
    overflow: visible;
    height: 100%;
}

.admin-dash-page .timing-boxs.timing-boxs2,
.admin-dash-page .transaction-boxs.timing-boxs2 {
    margin-left: 0;
}

.admin-dash-page .timing-boxs h4 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    color: #35196E;
}

.admin-dash-page .timing-boxs ul li {
    border-right-color: color-mix(in srgb, #35196E 16%, transparent);
}

.admin-dash-page .timing-boxs ul li p {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
}

.admin-dash-page .timing-boxs ul li h3,
.admin-dash-page .timing-boxs ul li h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #35196E;
    text-align: center;
    margin: 0;
}

.admin-dash-page .kyc-page .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.admin-dash-page .my-plan-page .my-plan-grid {
    margin-top: 0.5rem;
}

.admin-dash-page .pagination {
    margin-top: 1.25rem;
    gap: 0.25rem;
}

.admin-dash-page .pagination .page-link {
    border-radius: 10px;
    border-color: color-mix(in srgb, #35196E 14%, transparent);
    color: #35196E;
    font-weight: 600;
}

.admin-dash-page .pagination .page-item.active .page-link {
    background: #35196E;
    border-color: #35196E;
}

@media (max-width: 991.98px) {
    .admin-dash-page .balance-row,
    .admin-dash-page .connect-merchant-panel {
        padding: 1rem 1rem 1.15rem;
    }

    .admin-dash-page .dash-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Connect Merchant — profile-aligned design */
.connect-merchant-page .connect-merchant-info-card {
    padding: 0;
    overflow: hidden;
}

.connect-merchant-page .connect-merchant-info-card .connect-merchant-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0;
    padding: 1rem 1.15rem;
    border: none;
    border-radius: 0;
    background: transparent;
}

.connect-merchant-page .connect-merchant-info-card .dash-card__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #fff;
}

.connect-merchant-page .connect-merchant-info-card .dash-card__icon i {
    color: #fff;
}

.connect-merchant-page .connect-merchant-stats {
    margin-bottom: 1.25rem;
}

.connect-merchant-page .connect-merchant-panel.dash-panel {
    padding: 1.25rem 1.35rem 1.35rem;
    margin-bottom: 1.25rem;
}

.connect-merchant-page .connect-merchant-panel .dash-panel__header {
    margin-bottom: 0;
    padding-bottom: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.connect-merchant-page .connect-merchant-panel--compact .dash-panel__header {
    flex-wrap: wrap;
    gap: 1rem;
}

.connect-merchant-page .connect-merchant-tabs {
    margin: 1rem 0 1.15rem;
}

.connect-merchant-page .connect-merchant-tabs .nav-link {
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    cursor: pointer;
}

.connect-merchant-page .connect-merchant-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    border-color: #35196E;
}

.connect-merchant-page .connect-merchant-tab-content {
    padding-top: 0.15rem;
}

.connect-merchant-page .connect-merchant-table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-brand) 45%, #fff) color-mix(in srgb, var(--site-light) 80%, #fff);
}

.connect-merchant-page .connect-merchant-table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.connect-merchant-page .connect-merchant-table-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--site-light) 70%, #fff);
    border-radius: 999px;
}

.connect-merchant-page .connect-merchant-table-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-brand) 40%, #fff);
    border-radius: 999px;
}

.connect-merchant-page .connect-merchant-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand);
}

.connect-merchant-page .connect-merchant-table-scroll--merchants {
    max-height: min(68vh, 580px);
    overflow: auto;
}

.connect-merchant-page .connect-merchant-table-scroll--tall {
    max-height: min(70vh, 520px);
    overflow: auto;
}

.connect-merchant-page .connect-merchant-panel .dash-panel__header .connect-merchant-add-btn {
    flex-shrink: 0;
    margin-left: auto;
}

.connect-merchant-page .connect-merchant-panel__footer {
    display: none;
}

.connect-merchant-page .connect-merchant-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #4a2a8a 0%, #35196E 100%);
    border: none;
    box-shadow: 0 6px 16px color-mix(in srgb, #35196E 28%, transparent);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.connect-merchant-page .connect-merchant-add-btn:hover {
    color: #fff;
    filter: brightness(1.05);
    box-shadow: 0 8px 20px color-mix(in srgb, #35196E 32%, transparent);
}

.connect-merchant-page .connect-merchant-table tbody tr.highlight td {
    background: #fffbeb !important;
}

.connect-merchant-page .connect-merchant-table .badge {
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.connect-merchant-page .connect-merchant-table .btn-main {
    border-radius: 10px;
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
}

.connect-merchant-page .connect-merchant-settlement-panel .dash-panel__footer,
.connect-merchant-page .connect-merchant-settlement-panel .row:has(.pagination) {
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.connect-merchant-page .connect-merchant-limit-hint {
    border-radius: 10px;
    background: color-mix(in srgb, #35196E 5%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 10%, transparent);
}

.connect-merchant-page .merchant-details-box {
    border-radius: 12px;
    background: color-mix(in srgb, #35196E 4%, #fff);
    border: 1px solid color-mix(in srgb, #35196E 10%, transparent);
}

/* Connect Merchant — premium merchants panel */
.connect-merchant-page .cm-merchants-panel {
    overflow: hidden;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .cm-merchants-panel__header {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-brand) 6%, #fff) 0%,
        #fff 55%,
        color-mix(in srgb, var(--site-secondary) 8%, #fff) 100%
    );
    margin: -1.25rem -1.35rem 0;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .cm-merchants-panel__icon {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.connect-merchant-page .cm-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .connect-merchant-add-btn--glow {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.connect-merchant-page .connect-merchant-add-btn--glow:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-brand) 42%, transparent);
    transform: translateY(-1px);
}

/* Merchant table — compact + premium */
.connect-merchant-page .connect-merchant-table .cm-cell {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    vertical-align: middle;
    font-size: 0.8rem;
    line-height: 1.4;
}

.connect-merchant-page .connect-merchant-table .cm-cell--details {
    min-width: 190px;
    text-align: left;
    vertical-align: middle;
}

.connect-merchant-page .connect-merchant-table .cm-cell--credentials {
    min-width: 165px;
}

.connect-merchant-page .connect-merchant-table .cm-cell--stats {
    min-width: 155px;
}

.connect-merchant-page .cm-compact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.connect-merchant-page .cm-compact__title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.connect-merchant-page .cm-compact__logo {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex-shrink: 0;
}

.connect-merchant-page .cm-compact__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
    word-break: break-word;
    line-height: 1.3;
}

.connect-merchant-page .cm-compact__name:hover {
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-compact__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-compact__line i {
    font-size: 0.68rem;
    color: var(--color-brand);
}

.connect-merchant-page .cm-compact__line--badges {
    gap: 0.35rem;
}

.connect-merchant-page .cm-compact__tag {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
}

.connect-merchant-page .cm-compact__sep {
    color: #cbd5e1;
    font-size: 0.7rem;
}

.connect-merchant-page .cm-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border: none;
    border-radius: 4px;
    font-size: 0.64rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}

.connect-merchant-page .cm-mini-badge--info {
    color: #fff;
    background: var(--color-brand);
}

.connect-merchant-page .cm-mini-badge--active {
    color: #166534;
    background: color-mix(in srgb, #16a34a 12%, #fff);
}

.connect-merchant-page .cm-compact__kv {
    display: flex;
    gap: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.35;
}

.connect-merchant-page .cm-compact__k {
    flex-shrink: 0;
    min-width: 2.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--site-muted);
}

.connect-merchant-page .cm-compact__v {
    color: var(--color-brand-deep);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.connect-merchant-page .cm-compact__v--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
}

.connect-merchant-page .cm-compact__stats-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--site-muted);
    white-space: nowrap;
}

.connect-merchant-page .cm-compact__stats-top strong {
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-compact__amount {
    font-weight: 600;
    color: #166534;
}

.connect-merchant-page .cm-compact__usage {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.connect-merchant-page .cm-usage__bar--compact {
    flex: 1;
    min-width: 50px;
    height: 0.3rem;
    margin: 0;
}

.connect-merchant-page .cm-compact__usage-pct {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    min-width: 2rem;
    text-align: right;
}

.connect-merchant-page .cm-compact__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
}

.connect-merchant-page .cm-compact__link-btn:hover {
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-compact__limit-extra {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.68rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-compact__limit-extra strong {
    color: var(--color-brand-deep);
}

/* Merchant block — details column */
.connect-merchant-page .cm-merchant-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    text-align: left;
}

.connect-merchant-page .cm-merchant-block__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--site-light) 70%, #fff));
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--color-brand) 8%, transparent);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
}

.connect-merchant-page .cm-merchant-block__logo img {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
    display: block;
}

.connect-merchant-page .cm-merchant-block__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.22rem;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.connect-merchant-page .cm-merchant-block__name {
    display: block;
    width: 100%;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    text-decoration: none;
    line-height: 1.3;
    text-align: left;
    word-break: break-word;
}

.connect-merchant-page .cm-merchant-block__name:hover {
    color: var(--color-brand);
}

.connect-merchant-page .cm-merchant-block__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    color: var(--site-muted);
    line-height: 1.2;
    text-align: left;
}

.connect-merchant-page .cm-merchant-block__phone i {
    width: 0.75rem;
    font-size: 0.68rem;
    color: var(--color-brand);
    text-align: center;
    flex-shrink: 0;
}

.connect-merchant-page .cm-merchant-block__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.connect-merchant-page .cm-gateway-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.connect-merchant-page .cm-gateway-pill--phonepemerchant {
    color: #5f259f;
    background: color-mix(in srgb, #5f259f 12%, #fff);
    border: 1px solid color-mix(in srgb, #5f259f 22%, transparent);
}

.connect-merchant-page .cm-gateway-pill--paytmbusiness {
    color: #0078ad;
    background: color-mix(in srgb, #00baf2 14%, #fff);
    border: 1px solid color-mix(in srgb, #00baf2 25%, transparent);
}

.connect-merchant-page .cm-gateway-pill--bharatpaybusiness {
    color: #1d4ed8;
    background: color-mix(in srgb, #3b82f6 12%, #fff);
    border: 1px solid color-mix(in srgb, #3b82f6 22%, transparent);
}

.connect-merchant-page .cm-gateway-pill--sbiyonomerchant {
    color: #0369a1;
    background: color-mix(in srgb, #0ea5e9 12%, #fff);
    border: 1px solid color-mix(in srgb, #0ea5e9 22%, transparent);
}

.connect-merchant-page .cm-gateway-pill--freecharge {
    color: #c2410c;
    background: color-mix(in srgb, #f97316 12%, #fff);
    border: 1px solid color-mix(in srgb, #f97316 22%, transparent);
}

.connect-merchant-page .cm-gateway-pill--googlepaybusiness {
    color: #166534;
    background: color-mix(in srgb, #22c55e 12%, #fff);
    border: 1px solid color-mix(in srgb, #22c55e 22%, transparent);
}

/* Credentials strip */
.connect-merchant-page .cm-cred-strip {
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--site-light) 50%, #fff);
    border-left: 3px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.connect-merchant-page .cm-compact__kv--upi .cm-compact__v {
    font-weight: 600;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-compact__v--warn {
    color: #b45309;
    font-weight: 600;
}

/* Stats inline pills */
.connect-merchant-page .cm-stats-inline {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.connect-merchant-page .cm-stats-inline__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.connect-merchant-page .cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.connect-merchant-page .cm-pill--txns {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .cm-pill--txns i {
    font-size: 0.62rem;
    color: var(--color-brand);
}

.connect-merchant-page .cm-pill--txns strong {
    font-weight: 700;
}

.connect-merchant-page .cm-pill--amt {
    font-weight: 700;
    color: #166534;
    background: color-mix(in srgb, #16a34a 10%, #fff);
    border: 1px solid color-mix(in srgb, #16a34a 18%, transparent);
}

/* Row gateway accent */
.connect-merchant-page .connect-merchant-table tbody tr {
    position: relative;
    border-left: 3px solid transparent;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--phonepemerchant {
    border-left-color: #5f259f;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--paytmbusiness {
    border-left-color: #00baf2;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--bharatpaybusiness {
    border-left-color: #3b82f6;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--sbiyonomerchant {
    border-left-color: #0ea5e9;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--freecharge {
    border-left-color: #f97316;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--googlepaybusiness {
    border-left-color: #22c55e;
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--off {
    border-left-color: #cbd5e1 !important;
    opacity: 0.72;
}

.connect-merchant-page .cm-detail-card__top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.connect-merchant-page .cm-detail-card__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    flex-shrink: 0;
}

.connect-merchant-page .cm-detail-card__logo {
    display: block;
    max-width: 1.75rem;
    max-height: 1.75rem;
    object-fit: contain;
}

.connect-merchant-page .cm-detail-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.connect-merchant-page .cm-detail-card__name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    text-decoration: none;
    line-height: 1.3;
    word-break: break-word;
}

.connect-merchant-page .cm-detail-card__name:hover {
    color: var(--color-brand);
}

.connect-merchant-page .cm-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.connect-merchant-page .cm-detail-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.connect-merchant-page .cm-detail-card__meta li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-detail-card__meta i {
    width: 1rem;
    color: var(--color-brand);
    font-size: 0.72rem;
    text-align: center;
}

.connect-merchant-page .cm-detail-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.connect-merchant-page .cm-assign-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.connect-merchant-page .cm-assign-badge--info {
    color: #fff;
    background: linear-gradient(90deg, var(--color-brand-mid), var(--color-brand));
}

.connect-merchant-page .cm-assign-badge--active {
    color: #166534;
    background: color-mix(in srgb, #16a34a 12%, #fff);
    border: 1px solid color-mix(in srgb, #16a34a 25%, transparent);
}

.connect-merchant-page .cm-cred-item {
    display: grid;
    grid-template-columns: minmax(72px, 88px) 1fr;
    gap: 0.45rem 0.65rem;
    align-items: start;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--site-light) 45%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.connect-merchant-page .cm-cred-item--primary {
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    border-color: color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.connect-merchant-page .cm-cred-item__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
    line-height: 1.4;
}

.connect-merchant-page .cm-cred-item__value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    word-break: break-all;
    line-height: 1.35;
}

.connect-merchant-page .cm-cred-item__value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 500;
}

.connect-merchant-page .cm-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.connect-merchant-page .cm-stat-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .cm-stat-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 10px;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.connect-merchant-page .cm-stat-chip--txns .cm-stat-chip__icon {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 14%, #fff);
}

.connect-merchant-page .cm-stat-chip--amount .cm-stat-chip__icon {
    color: #166534;
    background: color-mix(in srgb, #16a34a 12%, #fff);
}

.connect-merchant-page .cm-stat-chip__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
    line-height: 1.2;
}

.connect-merchant-page .cm-stat-chip strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.25;
}

.connect-merchant-page .cm-usage {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.connect-merchant-page .cm-usage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-usage__head strong {
    font-size: 0.8rem;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-usage__bar {
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-light) 70%, #fff);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.connect-merchant-page .cm-usage__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}

.connect-merchant-page .cm-usage__fill.is-success {
    background: linear-gradient(90deg, #059669, #10b981);
}

.connect-merchant-page .cm-usage__fill.is-warning {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.connect-merchant-page .cm-usage__fill.is-danger {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.connect-merchant-page .cm-usage__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
}

.connect-merchant-page .cm-usage__toggle:hover {
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-limit-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--site-secondary) 8%, #fff);
    border: 1px dashed color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.connect-merchant-page .cm-limit-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.74rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-limit-detail__row strong {
    font-size: 0.78rem;
    color: var(--color-brand-deep);
    white-space: nowrap;
}

.connect-merchant-page .connect-merchant-table .cm-table-total-row td {
    background: color-mix(in srgb, var(--site-light) 65%, #fff) !important;
    border-top: 2px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    vertical-align: middle;
}

.connect-merchant-page .cm-stats-row--total .cm-stat-chip {
    background: #fff;
}

/* Connect Merchant — page overview */
.connect-merchant-page .cm-page-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--site-secondary) 14%, #fff) 0%,
        #fff 40%,
        color-mix(in srgb, var(--color-brand) 4%, #fff) 100%
    );
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-brand) 10%, transparent);
    position: relative;
    overflow: hidden;
}

.connect-merchant-page .cm-page-overview::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-brand) 12%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.connect-merchant-page .cm-page-overview__info {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--site-secondary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .cm-page-overview__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    color: var(--color-brand);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    flex-shrink: 0;
}

.connect-merchant-page .cm-page-overview__info strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-page-overview__info p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--site-muted);
}

.connect-merchant-page .cm-page-overview__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.connect-merchant-page .cm-overview-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-brand) 7%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.connect-merchant-page .cm-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .cm-overview-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.connect-merchant-page .cm-overview-stat--limit .cm-overview-stat__icon {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 14%, #fff);
}

.connect-merchant-page .cm-overview-stat--received .cm-overview-stat__icon {
    color: #166534;
    background: color-mix(in srgb, #16a34a 12%, #fff);
}

.connect-merchant-page .cm-overview-stat__body {
    min-width: 0;
    flex: 1;
}

.connect-merchant-page .cm-overview-stat__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.connect-merchant-page .cm-overview-stat__value {
    display: block;
    margin: 0.15rem 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    line-height: 1.2;
}

.connect-merchant-page .cm-overview-stat__hint {
    font-size: 0.72rem;
    color: var(--site-muted);
}

.connect-merchant-page .cm-overview-stat__usage {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.connect-merchant-page .cm-overview-stat__usage-bar {
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-light) 70%, #fff);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #16a34a 12%, transparent);
}

.connect-merchant-page .cm-overview-stat__usage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #059669, #10b981);
    transition: width 0.3s ease;
}

.connect-merchant-page .cm-overview-stat__usage-text {
    font-size: 0.7rem;
    color: #166534;
    font-weight: 600;
}

/* Table shell & rows */
.connect-merchant-page .cm-table-shell {
    margin-top: 0;
    border-radius: 0 0 14px 14px;
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
    overflow: visible;
    background: #fff;
}

.connect-merchant-page .cm-table-shell .connect-merchant-table-scroll--merchants {
    border-radius: 0 0 14px 14px;
}

.connect-merchant-page .connect-merchant-table-scroll--merchants > .connect-merchant-table,
.connect-merchant-page .connect-merchant-table-scroll--tall > .connect-merchant-table {
    width: max-content;
    min-width: 100%;
    white-space: normal;
    margin-bottom: 0;
}

.connect-merchant-page .connect-merchant-table-scroll--merchants > .connect-merchant-table {
    min-width: 100%;
}

.connect-merchant-page .connect-merchant-table-scroll--merchants .connect-merchant-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand-deep) 25%, transparent);
}

.connect-merchant-page .connect-merchant-table thead th {
    padding: 0.65rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #4a2a8a 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    border: none;
    white-space: nowrap;
}

.connect-merchant-page .connect-merchant-table thead th:first-child {
    border-radius: 0;
}

.connect-merchant-page .connect-merchant-table tbody td {
    padding: 0.55rem 0.65rem;
    border-color: color-mix(in srgb, var(--color-brand) 6%, #f1f5f9);
}

.connect-merchant-page .connect-merchant-table tbody tr:nth-child(even):not(.cm-table-total-row):not(.cm-settlement-totals-row) td {
    background: color-mix(in srgb, var(--site-light) 35%, #fff);
}

.connect-merchant-page .connect-merchant-table tbody tr {
    transition: background-color 0.15s ease;
}

.connect-merchant-page .connect-merchant-table tbody tr:hover td {
    background: color-mix(in srgb, var(--site-secondary) 4%, #fff);
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--off td {
    background: color-mix(in srgb, var(--site-light) 55%, #fff);
}

.connect-merchant-page .connect-merchant-table tbody tr.cm-row--off:hover td {
    background: color-mix(in srgb, var(--site-light) 70%, #fff);
}

.connect-merchant-page .cm-cell--serial,
.connect-merchant-page .cm-cell--status,
.connect-merchant-page .cm-cell--toggle,
.connect-merchant-page .cm-cell--actions {
    min-width: auto;
    vertical-align: middle;
    padding: 0.45rem 0.4rem;
}

.connect-merchant-page .cm-cell--status,
.connect-merchant-page .cm-cell--toggle,
.connect-merchant-page .cm-cell--actions {
    min-width: 72px;
    white-space: nowrap;
}

.connect-merchant-page .cm-cell--actions {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.connect-merchant-page .cm-cell--actions:has(.dropdown.show) {
    z-index: 5;
}

/* Action buttons */
.connect-merchant-page .cm-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.connect-merchant-page .cm-action-btn:hover {
    transform: translateY(-1px);
}

.connect-merchant-page .cm-action-btn--payment {
    color: var(--color-brand-deep);
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .cm-action-btn--payment:hover {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.connect-merchant-page .cm-action-btn--verify {
    color: #fff;
    background: linear-gradient(180deg, #374151, #1f2937);
}

.connect-merchant-page .cm-action-btn--settlement {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 100%);
    padding: 0.45rem 0.85rem;
}

.connect-merchant-page .cm-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.connect-merchant-page .cm-action-dropdown {
    display: inline-block;
}

.connect-merchant-page .cm-action-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    border-radius: 6px;
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--color-brand) 6%, #fff);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.connect-merchant-page .cm-action-dropdown__toggle:hover,
.connect-merchant-page .cm-action-dropdown__toggle:focus,
.connect-merchant-page .cm-action-dropdown__toggle.show {
    color: #fff;
    background: linear-gradient(180deg, #4a2a8a 0%, var(--color-brand) 100%);
    border-color: transparent;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.connect-merchant-page .cm-action-dropdown__menu {
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
    border-radius: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand) 12%, transparent);
    z-index: 1080;
}

/* Let the actions menu escape the scrollable merchants table */
.connect-merchant-page .cm-merchants-panel:has(.cm-action-dropdown .dropdown-menu.show),
.connect-merchant-page .connect-merchant-table-scroll--merchants:has(.cm-action-dropdown .dropdown-menu.show) {
    overflow: visible;
}

.connect-merchant-page .cm-merchants-panel:has(.cm-action-dropdown .dropdown-menu.show) .cm-table-shell {
    overflow: visible;
}

.connect-merchant-page .cm-action-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #1f2937;
}

.connect-merchant-page .cm-action-dropdown__item:hover,
.connect-merchant-page .cm-action-dropdown__item:focus {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--color-brand) 8%, #fff);
}

.connect-merchant-page .cm-action-dropdown__item--danger {
    color: #dc2626;
}

.connect-merchant-page .cm-action-dropdown__item--danger:hover,
.connect-merchant-page .cm-action-dropdown__item--danger:focus {
    color: #fff;
    background: #dc2626;
}

.connect-merchant-page .cm-action-dropdown__icon {
    width: 0.9rem;
    text-align: center;
    font-size: 0.72rem;
}

.connect-merchant-page .cm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.75rem;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.connect-merchant-page .cm-icon-btn--edit {
    color: #166534;
    border-color: color-mix(in srgb, #16a34a 20%, transparent);
    background: color-mix(in srgb, #16a34a 8%, #fff);
}

.connect-merchant-page .cm-icon-btn--transfer {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
}

.connect-merchant-page .cm-icon-btn--delete {
    color: #dc2626;
    border-color: color-mix(in srgb, #dc2626 18%, transparent);
    background: color-mix(in srgb, #dc2626 6%, #fff);
}

.connect-merchant-page .cm-icon-btn--add {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
}

.connect-merchant-page .cm-icon-btn--payment {
    color: var(--color-brand-deep);
    border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
    background: color-mix(in srgb, var(--color-brand) 6%, #fff);
}

.connect-merchant-page .cm-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.connect-merchant-page .cm-toggle-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.connect-merchant-page .cm-toggle-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--site-muted);
    line-height: 1;
}

.connect-merchant-page .cm-cell--status .dash-status-pill {
    display: inline-flex;
    font-size: 0.68rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.connect-merchant-page .cm-serial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 14%, #fff);
}

/* Empty state */
.connect-merchant-page .cm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.connect-merchant-page .cm-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.35rem;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.connect-merchant-page .cm-empty-state h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-empty-state p {
    margin: 0;
    max-width: 28rem;
    font-size: 0.86rem;
    color: var(--site-muted);
    line-height: 1.5;
}

/* Settlement section */
.connect-merchant-page .cm-settlement-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.connect-merchant-page .cm-settlement-summary__chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-secondary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
    min-width: 140px;
}

.connect-merchant-page .cm-settlement-summary__chip--month {
    background: color-mix(in srgb, #16a34a 6%, #fff);
    border-color: color-mix(in srgb, #16a34a 18%, transparent);
}

.connect-merchant-page .cm-settlement-summary__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.connect-merchant-page .cm-settlement-summary__chip strong {
    font-size: 1rem;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-settlement-summary__chip--month strong {
    color: #166534;
}

.connect-merchant-page .cm-money {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.connect-merchant-page .cm-money--total {
    color: #166534;
    background: color-mix(in srgb, #16a34a 10%, #fff);
}

.connect-merchant-page .cm-money--payable {
    color: var(--color-brand-deep);
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
}

.connect-merchant-page .cm-paid-split {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.connect-merchant-page .cm-money--paid {
    color: #166534;
    background: color-mix(in srgb, #16a34a 8%, #fff);
}

.connect-merchant-page .cm-money--remaining {
    color: #dc2626;
    background: color-mix(in srgb, #dc2626 6%, #fff);
}

.connect-merchant-page .cm-settlement-totals-row td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.connect-merchant-page .cm-settlement-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem;
    margin: 0.25rem 0 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-light) 55%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.connect-merchant-page .cm-settlement-totals__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.connect-merchant-page .cm-settlement-totals__item span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--site-muted);
}

.connect-merchant-page .cm-settlement-totals__item strong {
    font-size: 0.88rem;
    color: var(--color-brand-deep);
}

.connect-merchant-page .cm-settlement-totals__item--paid strong {
    color: #166534;
}

.connect-merchant-page .cm-settlement-totals__item--remaining strong {
    color: #dc2626;
}

.connect-merchant-page .no-settlement-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 1rem;
    padding: 1rem;
    text-align: center;
}

.connect-merchant-page .no-settlement-icon {
    font-size: 1.25rem;
    color: var(--site-muted);
}

.connect-merchant-page .no-settlement-icon--pending {
    color: #d97706;
}

.connect-merchant-page .no-settlement-text {
    font-size: 0.84rem;
    color: var(--site-muted);
}

.connect-merchant-page .no-settlement-text--pending {
    color: #92400e;
    font-weight: 600;
}

.connect-merchant-page .connect-merchant-settlement-date {
    border-radius: 10px 10px 0 0;
}

/* Connect Merchant — full-width page layout */
.connect-merchant-page > .container-fluid.cm-page-container {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    zoom: 1;
}

.connect-merchant-page .cm-page-inner {
    max-width: 100%;
}

.connect-merchant-page .connect-merchant-panel.dash-panel {
    padding: 0.85rem 0.95rem 1rem;
}

.connect-merchant-page .cm-page-overview {
    padding: 0.9rem 1rem;
}

.connect-merchant-page .cm-merchants-panel__header {
    margin: -0.85rem -0.95rem 0;
    padding: 0.85rem 0.95rem;
}

.connect-merchant-page .dash-page-header {
    margin-bottom: 0.75rem;
}

@media (min-width: 1200px) {
    section.main-part-body.connect-merchant-page {
        padding-right: 10px;
    }
}

@media (max-width: 991.98px) {
    .connect-merchant-page .cm-page-overview {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    .connect-merchant-page .cm-settlement-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connect-merchant-page .connect-merchant-table-scroll--merchants > .connect-merchant-table {
        min-width: 960px;
    }
}

@media (max-width: 767.98px) {
    section.main-part-body.connect-merchant-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .connect-merchant-page > .container-fluid.cm-page-container {
        padding-left: 0;
        padding-right: 0;
    }

    .connect-merchant-page .dash-page-header {
        margin-bottom: 0.65rem;
    }

    .connect-merchant-page .dash-welcome__title {
        font-size: 1.35rem;
    }

    .connect-merchant-page .connect-merchant-panel .dash-panel__header,
    .connect-merchant-page .cm-merchants-panel__header {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0.75rem 0.85rem;
    }

    .connect-merchant-page .cm-page-overview {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        gap: 0.65rem;
    }

    .connect-merchant-page .cm-page-overview__stats {
        grid-template-columns: 1fr;
    }

    .connect-merchant-page .cm-settlement-summary {
        flex-direction: column;
        margin-top: 0.85rem;
        margin-bottom: 0.85rem;
        padding-top: 0.75rem;
    }

    .connect-merchant-page .cm-settlement-totals {
        grid-template-columns: 1fr;
    }

    .connect-merchant-page .connect-merchant-panel .dash-panel__header .connect-merchant-add-btn,
    .connect-merchant-page .connect-merchant-add-btn--glow {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .connect-merchant-page .connect-merchant-panel.dash-panel {
        padding: 0.65rem;
        margin-bottom: 0.75rem;
    }

    /* Merchants table — keep standard table layout; scroll horizontally on small screens */
    .connect-merchant-page .connect-merchant-table-scroll--merchants {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .connect-merchant-page .connect-merchant-table-scroll--merchants > .connect-merchant-table {
        min-width: 960px;
    }

    .connect-merchant-page .connect-merchant-table-scroll--tall {
        max-height: none;
        overflow-x: auto;
    }

    .connect-merchant-page .connect-merchant-tabs .nav-link {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
    }

    .connect-merchant-page .cm-stats-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .admin-dash-page .main-part-body-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .admin-dash-page .page-head-ts .headding-box h2,
    .admin-dash-page .connect-merchant-page__header h2,
    .admin-dash-page .my-plan-page__header h2,
    .admin-dash-page .setting-title h2 {
        font-size: 1.35rem;
    }

    .admin-dash-page .table-responsive {
        border-radius: 12px;
    }

    .admin-dash-page .table thead th,
    .admin-dash-page .table tbody td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }

    .admin-dash-page .nav-tabs .nav-link {
        padding: 0.4rem 0.75rem;
        font-size: 0.78rem;
    }

    .admin-dash-page .dash-search .form-control,
    .admin-dash-page .searchbox .form-control {
        min-width: 0;
    }
}

/* ----- Compact spacing, filters, API docs, settings ----- */
.admin-dash-page .top-line {
    padding-top: 0;
    margin: 0 0 0.75rem;
}

.admin-dash-page .main-part-body-inner {
    padding-bottom: 1rem;
}

.admin-dash-page .dash-filter-form {
    margin: 0;
}

.admin-dash-page .dash-filter-label {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.admin-dash-page .dash-filter-label--hidden {
    visibility: hidden;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.admin-dash-page .dash-filter-input,
.admin-dash-page .dash-filter-select {
    width: 100%;
    max-width: 100%;
    min-height: 2.45rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    line-height: 1.35;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 22%, transparent);
    background: #fff;
    box-shadow: none;
}

.admin-dash-page .dash-filter-select {
    padding-right: 2rem;
    appearance: auto;
    text-overflow: clip;
    overflow: visible;
}

.admin-dash-page .dash-filter-upi-col {
    min-width: 0;
}

.admin-dash-page .dash-filter-input:focus,
.admin-dash-page .dash-filter-select:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 10%, transparent);
    outline: none;
}

.admin-dash-page .dash-filter-submit {
    min-height: 2.45rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.88rem;
}

.admin-dash-page .dash-cell-upi {
    min-width: 10rem;
    max-width: 14rem;
    white-space: normal;
    word-break: break-word;
}

.admin-dash-page .dash-cell-upi__name {
    display: block;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.admin-dash-page .dash-cell-upi__id {
    display: block;
    font-size: 0.8rem;
    color: var(--site-muted);
    line-height: 1.3;
}

.admin-dash-page .dash-list-panel.balance-row {
    margin-bottom: 0.75rem;
}

.admin-dash-page .allsearchbox .dash-filter-select,
.admin-dash-page .allsearchbox select.form-control {
    min-height: 2.45rem;
    height: auto;
    padding: 0.5rem 0.75rem;
    line-height: 1.35;
    font-size: 0.88rem;
}

.admin-api-documentation-page .api-docs-actions {
    margin-bottom: 0.75rem;
}

.admin-api-documentation-page .api-docs-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.admin-api-documentation-page .api-docs-toolbar .btn-main {
    margin: 0;
}

.admin-api-documentation-page .api-docs-toolbar__postman.btn-main {
    background: #fff !important;
    color: #35196E !important;
    border: 1px solid color-mix(in srgb, #35196E 32%, transparent) !important;
    box-shadow: 0 1px 4px color-mix(in srgb, #35196E 10%, transparent) !important;
}

.admin-api-documentation-page .api-docs-toolbar__postman.btn-main:hover {
    background: color-mix(in srgb, #35196E 8%, #fff) !important;
    color: #35196E !important;
    filter: none;
    transform: none;
}

.admin-api-documentation-page .api-docs-tab-intro {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.admin-api-documentation-page .api-docs-tab-intro .dash-panel__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
}

.admin-api-documentation-page .api-docs-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-api-documentation-page .api-docs-accordion-item {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    background: #fff;
    overflow: hidden;
}

.admin-api-documentation-page .api-docs-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: none;
    background: color-mix(in srgb, #35196E 4%, #fff);
    color: #35196E;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.admin-api-documentation-page .api-docs-accordion-btn.is-open {
    background: linear-gradient(90deg, color-mix(in srgb, #35196E 10%, #fff), #fff);
    border-left: 4px solid #35196E;
}

.admin-api-documentation-page .api-docs-accordion-btn__label {
    flex: 1;
}

.admin-api-documentation-page .api-docs-accordion-btn__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, #35196E 10%, #fff);
    transition: transform 0.25s ease;
}

.admin-api-documentation-page .api-docs-accordion-btn.is-open .api-docs-accordion-btn__toggle {
    transform: rotate(180deg);
}

.admin-api-documentation-page .api-docs-accordion-body {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px dashed color-mix(in srgb, #35196E 14%, transparent);
}

.admin-api-documentation-page .api-docs-main-tabs--outside {
    margin-bottom: 0.75rem;
    padding: 0 0.15rem;
    border-bottom-color: color-mix(in srgb, #35196E 18%, transparent);
    background: transparent;
}

.admin-api-documentation-page .api-docs-main-tabs {
    margin-bottom: 0;
    border-bottom-color: color-mix(in srgb, #35196E 18%, transparent);
}

.admin-api-documentation-page .api-docs-config-card {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    background: color-mix(in srgb, #35196E 4%, #fff);
}

.admin-api-documentation-page .api-docs-config-card .dash-panel__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.admin-api-documentation-page .api-docs-panel.api-page-box,
.admin-api-documentation-page .api-docs-panel.dash-panel {
    margin: 0 0 0.75rem;
    padding: 0;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    border-radius: 16px;
    box-shadow: var(--dash-shadow);
}

.admin-api-documentation-page .api-docs-panel__body,
.admin-api-documentation-page .api-docs-panel .app-log-key {
    padding: 0.75rem 1rem 1rem;
}

.admin-api-documentation-page .api-page-box .form-group {
    margin-bottom: 0.85rem;
}

.admin-api-documentation-page .api-page-box .form-group label {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.admin-api-documentation-page .api-page-box .form-group .form-control,
.admin-api-documentation-page .api-page-box .form-group textarea.form-control {
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
}

.admin-api-documentation-page .api-page-box .form-group .keybox .form-control {
    padding-right: 2.75rem;
}

.admin-api-documentation-page .api-page-box .form-group .keybox button {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    right: 0.65rem;
}

.admin-api-documentation-page .url-box h2 {
    font-size: 1.05rem;
    margin-bottom: 0.65rem;
}

/* API docs — authorization header block (x-api-docs-authorization) */
.admin-api-documentation-page .api-docs-auth {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #35196E 16%, transparent);
    background: color-mix(in srgb, #35196E 5%, #fff);
}

.admin-api-documentation-page .api-docs-auth__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #35196E;
    margin: 0 0 0.65rem;
}

.admin-api-documentation-page .api-docs-auth .app-log-key,
.admin-api-documentation-page .api-docs-auth__field {
    padding: 0;
    margin-bottom: 0;
}

.admin-api-documentation-page .api-docs-auth__label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: #374151;
    margin-bottom: 0.4rem;
}

.admin-api-documentation-page .api-docs-auth__header-row {
    margin-bottom: 0.65rem;
}

.admin-api-documentation-page .api-docs-auth__header-row:last-of-type {
    margin-bottom: 0;
}

.admin-api-documentation-page .api-docs-auth__header-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: #4b5563;
    margin-bottom: 0.3rem;
}

.admin-api-documentation-page .api-docs-auth__keybox {
    position: relative;
    width: 100%;
}

.admin-api-documentation-page .api-page-box .api-docs-auth .api-docs-auth__keybox .form-control {
    padding: 0.55rem 2.75rem 0.55rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    color: #111827;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    border-radius: 10px;
    box-shadow: none;
    height: auto;
}

.admin-api-documentation-page .api-page-box .api-docs-auth .api-docs-auth__keybox .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 12%, transparent);
    outline: none;
}

.admin-api-documentation-page .api-page-box .api-docs-auth .api-docs-auth__keybox button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #35196E;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.admin-api-documentation-page .api-page-box .api-docs-auth .api-docs-auth__keybox button:hover {
    background: color-mix(in srgb, #35196E 10%, #fff);
    color: #35196E;
}

.admin-api-documentation-page .api-docs-auth .text-muted {
    font-size: 0.8rem;
    line-height: 1.45;
    color: #6b7280 !important;
    margin-top: 0.5rem !important;
}

.admin-api-documentation-page .api-inner-title h2 {
    font-size: 1.15rem;
    margin: 0.75rem 0 0.5rem;
}

.admin-api-documentation-page .url-box-btn-group {
    margin: 0.75rem 0;
}

.admin-api-documentation-page .api-docs-panel__body .table {
    margin-bottom: 0;
}

/* Settings page — panel layout */
.admin-setting-page .settings-panel.dash-panel {
    margin-bottom: 0.75rem;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-setting-page .settings-panel .settings-panel__header {
    padding: 0.85rem 1rem;
    margin: 0;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.admin-setting-page .settings-panel .settings-panel__header.dash-panel__header {
    margin-bottom: 0;
    padding-bottom: 0.85rem;
}

.admin-setting-page .settings-panel .settings-panel__body,
.admin-setting-page .settings-panel .change-password-block,
.admin-setting-page .settings-panel .admin-settings-block {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem;
    margin: 0;
}

.admin-setting-page .settings-panel .form-group {
    margin-bottom: 1rem;
}

.admin-setting-page .settings-panel .settings-panel__body .form-group:last-child {
    margin-bottom: 0;
}

.admin-setting-page .settings-panel .btn-main {
    padding: 0.55rem 1.25rem;
    margin: 0;
    display: inline-flex;
}

.admin-setting-page .settings-password-form__label {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.admin-setting-page .settings-password-form .form-control {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    min-height: 2.45rem;
}

.admin-setting-page .settings-password-form .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 10%, transparent);
    outline: none;
}

.admin-setting-page .settings-password-form__actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, #35196E 12%, transparent);
}

.admin-setting-page .admin-settings-form .form-control {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
    min-height: 2.45rem;
}

.admin-setting-page .admin-settings-form .form-control:focus {
    border-color: #35196E;
    box-shadow: 0 0 0 3px color-mix(in srgb, #35196E 10%, transparent);
    outline: none;
}

.admin-setting-page .admin-settings-form input[type="file"].form-control {
    padding: 0.45rem 0.85rem;
}

.admin-setting-page .admin-settings-form__actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, #35196E 12%, transparent);
    display: flex;
    justify-content: flex-end;
}

.admin-setting-page .settings-password-form .keybox {
    position: relative;
    width: 100%;
}

.admin-setting-page .main-part-body-inner {
    max-width: 100%;
}

.admin-setting-page .settings-panel .dash-panel__heading {
    min-width: 0;
}

.admin-setting-page .settings-panel .dash-card__title,
.admin-setting-page .settings-panel .dash-card__subtitle {
    word-break: break-word;
}

@media (max-width: 991.98px) {
    section.main-part-body.admin-dash-page {
        padding: calc(var(--admin-mobile-header-height) + 12px) 12px 15px 12px;
    }
}

@media (max-width: 767.98px) {
    .admin-setting-page .settings-panel .settings-panel__body {
        padding: 0.85rem;
    }
}

@media (min-width: 992px) {
    .admin-dash-page .dash-filter-upi-col {
        flex: 1 1 28%;
        max-width: 36%;
    }
}

@media (max-width: 767.98px) {
    .admin-dash-page .dash-filter-submit-col {
        margin-top: 0.15rem;
    }

    .admin-dash-page .dash-cell-upi {
        max-width: none;
    }
}

/* Stat summary + month table panels (Staff Commission & similar) */
.admin-dash-page .dash-stat-summary {
    padding: 1rem 1.1rem;
    margin-bottom: 0;
}

.admin-dash-page .dash-stat-summary__title {
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    color: #35196E;
    border-bottom: 1px dashed color-mix(in srgb, #35196E 18%, transparent);
}

.admin-dash-page .dash-stat-summary__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-dash-page .dash-stat-summary__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.4rem;
    text-align: center;
    border-right: 1px dashed color-mix(in srgb, #35196E 16%, transparent);
}

.admin-dash-page .dash-stat-summary__item:last-child {
    border-right: none;
}

.admin-dash-page .dash-stat-summary__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--site-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-dash-page .dash-stat-summary__value {
    font-size: 1rem;
    font-weight: 700;
    color: #35196E;
    line-height: 1.2;
}

.admin-dash-page .dash-month-panel {
    padding: 0;
    overflow: hidden;
}

.admin-dash-page .dash-month-panel .dash-panel__header {
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
}

.admin-dash-page .dash-month-panel__table {
    padding: 0.85rem 1rem 1rem;
    margin-top: 0;
}

.admin-dash-page .dash-month-panel .table-responsive {
    margin: 0;
    border-radius: 12px;
}

.admin-dash-page .dash-month-panel .table {
    margin-bottom: 0;
}

.admin-dash-page .dash-month-panel .table-bordered {
    border-color: color-mix(in srgb, #35196E 10%, transparent);
}

.admin-dash-page .dash-month-panel .table thead th {
    background: color-mix(in srgb, #35196E 8%, #fff) !important;
    color: #35196E !important;
    border-color: color-mix(in srgb, #35196E 10%, transparent) !important;
}

.admin-dash-page .dash-month-panel .table tbody td,
.admin-dash-page .dash-month-panel .table tfoot td {
    border-color: color-mix(in srgb, #35196E 8%, transparent);
    vertical-align: middle;
}

.admin-dash-page .dash-month-panel .table tbody tr:hover td {
    background: color-mix(in srgb, #35196E 4%, #fff);
}

.admin-dash-page .dash-table-foot td {
    background: color-mix(in srgb, #35196E 6%, #fff) !important;
    font-weight: 700;
    color: #35196E;
}

.admin-dash-page .dash-list-panel.balance-row .table-responsive {
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .admin-dash-page .dash-stat-summary__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-dash-page .dash-stat-summary__item:nth-child(2) {
        border-right: none;
    }

    .admin-dash-page .dash-stat-summary__item {
        border-bottom: 1px dashed color-mix(in srgb, #35196E 12%, transparent);
    }

    .admin-dash-page .dash-stat-summary__item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 575.98px) {
    .admin-dash-page .dash-stat-summary__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .admin-dash-page .dash-stat-summary__item {
        padding: 0.55rem 0.3rem;
        border-right: 1px dashed color-mix(in srgb, #35196E 16%, transparent);
        border-bottom: 1px dashed color-mix(in srgb, #35196E 12%, transparent);
    }

    .admin-dash-page .dash-stat-summary__item:nth-child(2n) {
        border-right: none;
    }

    .admin-dash-page .dash-stat-summary__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .admin-dash-page .dash-stat-summary__label {
        font-size: 0.68rem;
    }

    .admin-dash-page .dash-stat-summary__value {
        font-size: 0.9rem;
    }
}

/* ----- Admin list / form pages — match customer dashboard ----- */
.admin-dash-page.my-profile-page .page-head-ts,
.admin-dash-page .page-head-ts {
    margin-bottom: 0.85rem;
}

.admin-dash-page .dash-list-toolbar {
    margin-bottom: 0.75rem;
}

.admin-dash-page .dash-list-toolbar .customers-add-btn,
.admin-dash-page .customers-add-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
}

.admin-dash-page .dash-list-toolbar .customers-add-btn .btn-main,
.admin-dash-page .customers-add-btn .btn-main {
    margin-right: 0;
    flex-shrink: 0;
}

.admin-dash-page .dash-list-toolbar .searchbox,
.admin-dash-page .customers-add-btn .searchbox {
    flex: 1 1 220px;
    min-width: min(100%, 200px);
    max-width: 420px;
    margin: 0;
}

.admin-dash-page .adm-card,
.admin-dash-page .balance-row.dash-list-panel,
.admin-dash-page .dash-list-panel.balance-row {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* adm-card / adm-tbl had no styles — align with balance-row + table */
.admin-dash-page .adm-card {
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

/* Table cells / hover — see .admin-dash-page .table tbody td block above */

.admin-dash-page .admin-form-header.setting-title,
.admin-dash-page .setting-title.admin-form-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.admin-dash-page .admin-form-header.setting-title h2,
.admin-dash-page .setting-title.admin-form-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.admin-dash-page .admin-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #35196E;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    background: #fff;
}

.admin-dash-page .admin-form-back:hover {
    background: var(--dash-brand-soft);
    color: #35196E;
}

.admin-dash-page.admin-form-page .api-page-box.admin-form-card,
.admin-dash-page .customer-form-card.api-page-box {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page.admin-form-page .api-page-box .form-group {
    margin-bottom: 0.85rem;
}

.admin-dash-page.admin-form-page .api-page-box .form-group label {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.admin-dash-page.admin-form-page .api-page-box .form-group .form-control,
.admin-dash-page.admin-form-page .api-page-box select.form-control {
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid color-mix(in srgb, #35196E 18%, transparent);
    height: auto;
    min-height: 2.45rem;
}

.admin-dash-page .btn-edit,
.admin-dash-page .btn-share,
.admin-dash-page .btn-wallet {
    border-radius: 8px;
}

.admin-dash-page .upi-id-block.api-page-box,
.admin-dash-page.connect-merchant-page .api-page-box:not(.connect-merchant-panel) {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #35196E 14%, transparent);
    border-top: 4px solid #35196E;
    background: linear-gradient(180deg, var(--dash-brand-soft) 0%, #fff 100%);
    box-shadow: var(--dash-shadow);
}

.admin-dash-page .dash-page-header__actions .admin-form-back {
    margin: 0;
}

@media (max-width: 767.98px) {
    .admin-dash-page .dash-list-toolbar.dash-search-panel {
        padding: 0.65rem 0.75rem;
        height: auto;
        min-height: 0;
    }

    .admin-dash-page .dash-list-toolbar .customers-add-btn,
    .admin-dash-page .customers-add-btn {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        height: auto;
        min-height: 0;
    }

    .admin-dash-page .dash-list-toolbar .customers-add-btn .btn-main,
    .admin-dash-page .customers-add-btn .btn-main {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .admin-dash-page .dash-list-toolbar .searchbox,
    .admin-dash-page .customers-add-btn .searchbox {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .admin-dash-page .dash-list-toolbar .searchbox form,
    .admin-dash-page .customers-add-btn .searchbox form {
        flex-wrap: nowrap;
        width: 100%;
    }

    .admin-dash-page .dash-list-toolbar .searchbox .form-control,
    .admin-dash-page .customers-add-btn .searchbox .form-control {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        padding: 0.5rem 0.75rem;
    }

    .admin-dash-page .dash-list-toolbar .searchbox button,
    .admin-dash-page .customers-add-btn .searchbox button {
        width: auto;
        flex-shrink: 0;
        padding: 0.5rem 0.85rem;
    }

    .admin-dash-page .adm-tbl thead th,
    .admin-dash-page .adm-tbl tbody td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }
}
/* Support Tickets — uses app brand theme */
.tiket-page {
    --dash-border: color-mix(in srgb, var(--color-brand) 14%, transparent);
    --dash-shadow: 0 10px 28px color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.tiket-page .dash-txn-top-row {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding-top: 0.35rem;
}

.tiket-page .dash-page-header__actions,
.tiket-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.tiket-page .btn-main.btn-main--sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    min-height: auto;
}

.tiket-page .btn-reject.tiket-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0.45rem 1rem;
    border-radius: var(--btn-pill-radius);
    border: 1px solid #f5b2b2;
    background: #fff5f5;
    color: #b42318;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tiket-page .btn-reject.tiket-close-btn:hover {
    background: #fee4e2;
    border-color: #f04438;
}

.tiket-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tiket-stat-card {
    padding: 1rem 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    background: linear-gradient(180deg, #fff 0%, var(--site-light) 100%);
    box-shadow: var(--dash-shadow);
}

.tiket-stat-card__label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
    margin-bottom: 0.25rem;
}

.tiket-stat-card strong {
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-brand);
}

.tiket-stat-card--open {
    border-top: 4px solid #16a34a;
}

.tiket-stat-card--open strong {
    color: #047857;
}

.tiket-stat-card--closed {
    border-top: 4px solid #dc2626;
}

.tiket-stat-card--closed strong {
    color: #b91c1c;
}

.tiket-stat-card--total {
    border-top: 4px solid var(--color-brand);
}

.tiket-table-panel {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow);
}

.tiket-table thead {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    color: #fff;
}

.tiket-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 0.75rem;
    border: none;
    white-space: nowrap;
}

.tiket-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    border-color: color-mix(in srgb, var(--color-brand) 8%, #f3f4f6);
}

.tiket-table tbody tr:hover {
    background: var(--site-light);
}

.tiket-id {
    color: var(--color-brand);
}

.tiket-subject {
    font-weight: 600;
    color: var(--color-brand-deep);
}

.tiket-reply-hint {
    color: #047857;
    font-size: 0.75rem;
}

.tiket-pending-hint {
    color: #b45309;
    font-size: 0.75rem;
}

.tiket-customer-name {
    font-weight: 600;
    color: var(--color-brand-deep);
}

.tiket-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tiket-status-badge--open {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.tiket-status-badge--closed {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.tiket-status-badge--open .fa-spin {
    animation-duration: 2s;
}

.tiket-attach-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--dash-border);
    background: var(--site-light);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tiket-attach-thumb:hover {
    border-color: color-mix(in srgb, var(--color-brand) 35%, transparent);
    transform: scale(1.05);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.tiket-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tiket-attach-thumb__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-brand-deep) 55%, transparent);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tiket-attach-thumb:hover .tiket-attach-thumb__zoom {
    opacity: 1;
}

.tiket-attach-thumb__pdf,
.tiket-attach-thumb__file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    color: #b42318;
    font-size: 1.1rem;
}

.tiket-attach-thumb__pdf small {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--site-muted);
}

.tiket-attach-thumb--empty {
    color: #d1d5db;
    border-style: dashed;
    cursor: default;
}

.tiket-attach-thumb--empty:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--dash-border);
}

.tiket-attach-thumb--detail {
    width: 140px;
    height: 110px;
    border-radius: 12px;
}

.tiket-customer-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: linear-gradient(165deg, #ede9fe 0%, var(--site-light) 48%, #fff 100%);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow);
}

.tiket-customer-strip__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(53, 25, 110, 0.22);
}

.tiket-customer-strip__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tiket-customer-strip__info strong {
    color: var(--color-brand-deep);
}

.tiket-customer-strip__info span {
    font-size: 0.85rem;
    color: var(--site-muted);
}

.tiket-detail-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow);
}

.tiket-detail-hero__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.tiket-detail-hero__date,
.tiket-detail-hero__closed {
    font-size: 0.85rem;
    color: var(--site-muted);
}

.tiket-detail-card,
.tiket-form-card,
.tiket-reply-card {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow);
}

.tiket-conversation {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tiket-bubble {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.tiket-bubble__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(53, 25, 110, 0.18);
}

.tiket-bubble__avatar--customer {
    background:
        linear-gradient(180deg, var(--color-brand-mid) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
}

.tiket-bubble__avatar--admin {
    background: linear-gradient(180deg, #1a4a8a 0%, var(--color-admin-accent) 100%);
}

.tiket-bubble__content {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.15rem;
    border-radius: 0 14px 14px 14px;
    border: 1px solid var(--dash-border);
}

.tiket-bubble--customer .tiket-bubble__content {
    background: linear-gradient(180deg, var(--site-light) 0%, #fff 100%);
}

.tiket-bubble--admin .tiket-bubble__content {
    background: linear-gradient(180deg, #f0f4fa 0%, #fff 100%);
    border-color: color-mix(in srgb, var(--color-admin-accent) 18%, transparent);
}

.tiket-bubble__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.tiket-bubble__name {
    color: var(--color-brand-deep);
    margin-right: 0.4rem;
}

.tiket-bubble__tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-brand) 10%, #fff);
    color: var(--site-violet-mid);
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.tiket-bubble__tag--admin {
    background: color-mix(in srgb, var(--color-admin-accent) 10%, #fff);
    color: var(--color-admin-accent);
    border-color: color-mix(in srgb, var(--color-admin-accent) 20%, transparent);
}

.tiket-bubble__time {
    font-size: 0.75rem;
    color: var(--site-muted);
}

.tiket-bubble__text {
    white-space: pre-wrap;
    line-height: 1.6;
    color: #374151;
}

.tiket-bubble__attach {
    margin-top: 0.85rem;
}

.tiket-awaiting-reply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
    border: 1px dashed #facc15;
    color: #b45309;
    font-size: 0.875rem;
}

.tiket-reply-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-brand-deep);
}

.tiket-reply-card__head i {
    color: var(--color-brand);
}

.tiket-reply-card__head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.tiket-reply-form textarea {
    border-radius: 10px;
    border-color: var(--dash-border);
    resize: vertical;
}

.tiket-reply-form textarea:focus {
    border-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.tiket-form .form-group label {
    font-weight: 600;
    color: var(--color-brand-deep);
    margin-bottom: 0.4rem;
}

.tiket-form .form-group label i {
    color: var(--color-brand);
    margin-right: 0.35rem;
}

.tiket-file-upload {
    padding: 1rem;
    border-radius: 10px;
    border: 2px dashed color-mix(in srgb, var(--color-brand) 22%, transparent);
    background: var(--site-light);
}

.tiket-actions-bar {
    margin-top: 0.5rem;
}

.tiket-closed-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: #f3f4f6;
    color: var(--site-muted);
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
}

.tiket-closed-note--block {
    display: flex;
    padding: 1rem 1.25rem;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .tiket-stats-row {
        grid-template-columns: 1fr;
    }

    .tiket-customer-strip {
        flex-wrap: wrap;
    }

    .tiket-header-actions {
        width: 100%;
    }

    .tiket-header-actions .btn-main {
        flex: 1;
    }
}

/* ----- Merchant wizard (create / edit page) ----- */
.merchant-wizard-page .merchant-wizard-card {
    padding: 1.5rem;
}

.merchant-wizard-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    padding: 0 0.25rem;
}

.merchant-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.5rem 0.75rem;
    border-radius: 16px;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
    transition: all 0.25s ease;
}

.merchant-wizard-step.is-active {
    border-color: color-mix(in srgb, var(--color-brand) 22%, transparent);
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.merchant-wizard-step.is-complete {
    border-color: color-mix(in srgb, #16a34a 18%, transparent);
    background: color-mix(in srgb, #16a34a 5%, #fff);
}

.merchant-wizard-step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    background: #fff;
    border: 2px solid color-mix(in srgb, var(--color-brand) 18%, #e2e8f0);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.merchant-wizard-step.is-active .merchant-wizard-step__badge {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.merchant-wizard-step.is-complete .merchant-wizard-step__badge {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.merchant-wizard-step__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.merchant-wizard-step__text strong {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    line-height: 1.3;
}

.merchant-wizard-step__text span {
    font-size: 0.72rem;
    color: var(--site-muted);
    line-height: 1.3;
}

.merchant-wizard-step.is-active .merchant-wizard-step__text strong {
    color: var(--color-brand);
}

.merchant-wizard-panel {
    padding-top: 0.25rem;
}

.merchant-wizard-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 10%, #e2e8f0);
}

.merchant-wizard-section-head--sub {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

.merchant-wizard-section-head > div {
    min-width: 0;
    flex: 1;
}

.merchant-wizard-section-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-deep) 100%);
    font-size: 0.95rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.merchant-wizard-section-head h3,
.merchant-wizard-section-head h4 {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-brand-deep);
}

.merchant-wizard-section-head p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--site-muted);
    line-height: 1.45;
}

.merchant-wizard-gateway-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.65rem;
    padding: 0.35rem 0.85rem 0.35rem 0.5rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, #e2e8f0);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-brand-deep);
}

.merchant-wizard-gateway-chip img {
    display: block;
    height: 22px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
}

.merchant-wizard-blocks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.merchant-wizard-block {
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, #e2e8f0);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--site-light) 55%, #fff) 100%);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--color-brand) 5%, transparent);
}

.merchant-wizard-block--credentials {
    margin-bottom: 1rem;
}

.merchant-wizard-block--commission {
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
}

.merchant-wizard-block .merchant-wizard-section-head--sub {
    border-bottom-style: dashed;
}

.merchant-wizard-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.merchant-wizard-input-wrap__icon {
    position: absolute;
    left: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    color: color-mix(in srgb, var(--color-brand) 55%, #94a3b8);
    font-size: 0.82rem;
    pointer-events: none;
}

.merchant-wizard-input-wrap .form-control {
    padding-left: 2.65rem !important;
}

.merchant-wizard-input-wrap--plain .form-control {
    padding-left: 1rem !important;
}

.merchant-wizard-page.admin-form-page .api-page-box .form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    margin-bottom: 0.4rem;
}

.merchant-wizard-page.admin-form-page .api-page-box .form-group .form-control,
.merchant-wizard-page.admin-form-page .api-page-box select.form-control {
    border-radius: 9999px;
    padding: 0.7rem 1.15rem;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, #e2e8f0);
    min-height: 2.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.merchant-wizard-page.admin-form-page .api-page-box .form-group .form-control:focus,
.merchant-wizard-page.admin-form-page .api-page-box select.form-control:focus {
    border-color: var(--color-brand);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
    outline: none;
}

.merchant-wizard-page.admin-form-page .api-page-box .form-group .form-control::placeholder {
    color: #94a3b8;
}

.merchant-wizard-actions {
    flex-wrap: wrap;
}

.merchant-wizard-actions__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

.merchant-wizard-actions .admin-form-btn-cancel,
.merchant-wizard-actions .admin-form-btn-primary {
    margin: 0;
}

.merchant-wizard-commission-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0 !important;
}

.merchant-wizard-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.merchant-wizard-commission-row label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    cursor: pointer;
    user-select: none;
}

.merchant-wizard-commission-field {
    margin-top: 0.85rem;
}

.merchant-wizard-review {
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, #e2e8f0);
    background: linear-gradient(180deg, color-mix(in srgb, var(--site-secondary) 6%, #fff) 0%, #fff 100%);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--color-brand) 6%, transparent);
}

.merchant-wizard-review .merchant-wizard-section-head {
    margin-bottom: 1rem;
}

.merchant-wizard-review__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.merchant-wizard-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-brand) 10%, #e2e8f0);
    min-width: 0;
}

.merchant-wizard-detail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-brand);
    background: color-mix(in srgb, var(--site-secondary) 12%, #fff);
}

.merchant-wizard-detail > div {
    min-width: 0;
    flex: 1;
}

.merchant-wizard-detail__label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--site-muted);
}

.merchant-wizard-detail__value {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    line-height: 1.35;
    word-break: break-word;
}

.merchant-wizard-detail__value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
}

.merchant-wizard-review-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--site-secondary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    color: var(--color-brand-deep);
    font-size: 0.85rem;
}

.merchant-wizard-page .merchant-type-selector {
    align-items: center;
    margin-bottom: 0;
    gap: 14px !important;
}

.merchant-wizard-page .merchant-type-option {
    position: relative;
    flex: 0 0 calc(16.66% - 12px);
    min-width: 150px;
}

.merchant-wizard-page .merchant-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.merchant-wizard-page .merchant-type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 96px;
    width: 100%;
    margin-bottom: 0;
    padding: 12px;
    cursor: pointer;
    border: 2px solid #E6ECF5;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    box-shadow: 0 10px 25px rgba(12, 53, 119, 0.08);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Gateway selection buttons (PhonePe/Paytm/Google Pay) inside merchant wizard */
.merchant-wizard-page .merchat_buttons button {
    border: 1px solid #E6ECF5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

    padding: 7px 14px;
    margin: 2px;
    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    text-align: center;
    color: var(--color-brand-deep);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.2;
}

.merchant-wizard-page .merchat_buttons_text {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-brand-deep);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.merchant-wizard-page .merchat_buttons button img {
    display: block;
    max-height: 30px;
    width: auto;
    max-width: 42px;
    object-fit: contain;
}

.merchant-wizard-page .merchat_buttons button:hover {
    border-color: #9AB0D5;
    background: #F7FAFF;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(12, 53, 119, 0.08);
}

.merchant-wizard-page .merchat_buttons button:active {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
}

.merchant-wizard-page .merchat_buttons button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, #2D5FC4 22%, transparent);
}

.merchant-wizard-page .merchant-type-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #B8C6DB;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 4px #FFFFFF;
    transition: all 0.25s ease;
}

.merchant-wizard-page .merchant-type-label:hover {
    border-color: #9AB0D5;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(12, 53, 119, 0.14);
}

.merchant-wizard-page .merchant-type-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}

.merchant-wizard-page .merchant-type-label img {
    display: block;
    height: auto;
    max-height: 34px;
    width: auto;
    max-width: 100px;
}

.merchant-wizard-page .merchant-type-option input[type="radio"]:checked + .merchant-type-label {
    border-color: #2D5FC4;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%);
    box-shadow: 0 16px 34px rgba(45, 95, 196, 0.22);
}

.merchant-wizard-page .merchant-type-option input[type="radio"]:checked + .merchant-type-label::before {
    border-color: #2D5FC4;
    background: #2D5FC4;
    box-shadow: inset 0 0 0 4px #FFFFFF;
}

.merchant-wizard-page .merchant-type-video-wrap {
    margin-top: 0.5rem;
}

.merchant-wizard-page .merchant-type-video-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--color-brand-deep);
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--site-secondary) 8%, #fff) 100%);
    transition: all 0.2s ease;
}

.merchant-wizard-page .merchant-type-video-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.merchant-wizard-page .merchant-type-video-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.merchant-wizard-page .merchant-type-video-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.merchant-wizard-page .merchant-type-video-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--site-muted);
}

.merchant-wizard-page .merchant-type-video-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.merchant-wizard-page .merchant-type-video-subtitle {
    font-size: 0.78rem;
    color: var(--site-muted);
}

.merchant-wizard-page .merchant-type-video-arrow {
    color: var(--color-brand);
    flex-shrink: 0;
}

.merchant-wizard-page .merchant-setup-steps {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--site-secondary) 6%, #fff) 100%);
}

.merchant-wizard-page .merchant-setup-steps__title {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--site-muted);
}

.merchant-wizard-page .merchant-setup-steps .row > [class*="col-"] {
    display: flex;
}

.merchant-wizard-page .merchant-setup-step {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0.55rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--color-brand) 16%, #d9e2f2) !important;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.merchant-wizard-page .merchant-setup-step:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-brand) 42%, #d9e2f2) !important;
    box-shadow: 0 14px 28px rgba(45, 95, 196, 0.14);
}

.merchant-wizard-page .merchant-setup-step__badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-brand);
    box-shadow: 0 4px 12px rgba(45, 95, 196, 0.28);
}

.merchant-wizard-page .merchant-setup-step__media {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f7fc;
}

.merchant-wizard-page .merchant-setup-step__img {
    display: block;
    width: 100%;
    height: auto;
}

.merchant-wizard-page .merchant-setup-step__caption {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 0.65rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--color-brand) 24%, #d1d5db);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--site-secondary) 10%, #fff) 0%,
        color-mix(in srgb, var(--site-secondary) 4%, #fff) 100%
    );
}

.merchant-wizard-page .merchant-setup-step__caption p {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    font-weight: 500;
    color: #4b5563;
}

.merchant-wizard-page .merchant-setup-step__caption a {
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.merchant-wizard-page .merchant-setup-step__caption a:hover {
    color: color-mix(in srgb, var(--color-brand) 75%, #000);
    border-bottom-color: var(--color-brand);
}

.merchant-wizard-page .merchant-setup-step:hover .merchant-setup-step__caption {
    border-color: color-mix(in srgb, var(--color-brand) 38%, #d1d5db);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--site-secondary) 14%, #fff) 0%,
        color-mix(in srgb, var(--site-secondary) 6%, #fff) 100%
    );
}

@media (max-width: 991px) {
    .merchant-wizard-steps {
        grid-template-columns: 1fr;
    }

    .merchant-wizard-page .merchant-type-option {
        flex: 0 0 calc(33.33% - 10px);
        min-width: 120px;
    }

    .merchant-wizard-review__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .merchant-wizard-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .merchant-wizard-actions__nav {
        margin-left: 0;
        width: 100%;
    }

    .merchant-wizard-actions .admin-form-btn-cancel,
    .merchant-wizard-actions .admin-form-btn-primary,
    .merchant-wizard-actions__nav .btn,
    .merchant-wizard-actions__nav .btn-main {
        flex: 1;
        width: 100%;
    }

    .merchant-wizard-page .merchant-type-option {
        flex: 0 0 calc(50% - 8px);
    }

    .merchant-wizard-review__grid {
        grid-template-columns: 1fr;
    }

    .merchant-wizard-section-head {
        gap: 0.65rem;
    }
}

/* Leads: wrap long requirement text — no wide horizontal scroll */
.leads-page .table-responsive > .table {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    table-layout: fixed;
    white-space: normal;
}

.leads-page .table thead th,
.leads-page .table tbody td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.leads-page .table tbody td.lead-requirement {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 280px;
    min-width: 0;
    vertical-align: top;
}