/* Footer-nav info pages: spacing under fixed header */

/* Ensure [hidden] works consistently across browsers (incl. table rows). */
[hidden] {
    display: none !important;
}


.profile-page {
    padding-top: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
    padding-left: clamp(1rem, 4vw, 3.5rem);
    padding-right: clamp(1rem, 4vw, 3.5rem);
    width: min(1360px, 100%);
    margin: 0 auto;
}

.profile-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

.profile-hero h1 {
    font-size: clamp(1.6rem, 2vw, 2rem);
    margin: 0.75rem 0;
}

.profile-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.75rem;
    border: 1px solid rgba(7, 24, 85, 0.06);
    box-shadow: 0 30px 60px rgba(7, 11, 52, 0.08);
    min-width: 0;
}

.profile-card.small {
    max-width: 360px;
    justify-self: end;
}

body[data-page="profile"] .profile-hero .profile-summary {
    max-width: none;
    justify-self: stretch;
    grid-column: 1 / -1;
}

.ak-accordion {
    border: 0;
    background: transparent;
}

.ak-accordion > summary {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
}

.ak-accordion > summary::-webkit-details-marker {
    display: none;
}

.ak-accordion > summary::marker {
    content: "";
}

.ak-accordion__summary-main {
    min-width: 0;
}

.ak-accordion__summary-main p {
    margin: 0;
    color: rgba(5, 12, 45, 0.7);
}

.ak-accordion__summary-main .label {
    margin: 0;
    color: rgba(2, 10, 58, 0.75);
}

.ak-accordion__summary-main h3 {
    margin: 0.25rem 0 0.35rem;
}

.ak-accordion__cta {
    flex: 0 0 auto;
    align-self: flex-start;
    pointer-events: none;
}

.ak-accordion__body {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(7, 24, 85, 0.08);
}

.profile-card ul {
    list-style: none;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-bottom: 2.75rem;
}

@media (min-width: 980px) {
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-grid > .profile-card#wallet-kyc {
        grid-column: 1 / -1;
    }
}

.profile-card header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.profile-card .label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.7rem;
    background: rgba(2, 10, 58, 0.06);
    color: rgba(2, 10, 58, 0.75);
}

.profile-card h3 {
    margin: 0.25rem 0 0.35rem;
    font-size: 1.35rem;
}

.profile-card header p {
    margin: 0;
    color: rgba(5, 12, 45, 0.7);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(5, 12, 45, 0.85);
}

.profile-form input,
.profile-form select,
.profile-form textarea {
    border: 1px solid rgba(5, 12, 55, 0.15);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    background: #f7f9ff;
    font-size: 1rem;
    font-weight: 500;
    color: var(--navy);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kyc-form.kyc-compact input,
.kyc-form.kyc-compact select,
.kyc-form.kyc-compact textarea {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
}

.kyc-form.kyc-compact textarea {
    min-height: 88px;
}

.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(0, 179, 255, 0.15);
}

.profile-form textarea {
    resize: vertical;
    min-height: 120px;
}

.profile-form button {
    align-self: flex-start;
}

@media (max-width: 768px) {
    body[data-page="profile"] {
        overflow-x: hidden;
    }

    body[data-page="profile"] main.profile-page {
        transform: none;
        transform-origin: initial;
        width: 100%;
        margin-left: 0;
    }
}

.two-col,
.three-col {
    display: grid;
    gap: 1rem;
}

.two-col {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.three-col {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mobile-card {
    background: linear-gradient(135deg, rgba(14, 26, 78, 0.04), rgba(14, 26, 78, 0.08));
    border: 1px solid rgba(14, 26, 78, 0.12);
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-card__status {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px dashed rgba(11, 19, 70, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mobile-card__status strong {
    font-size: 1.05rem;
    color: var(--navy);
}

.mobile-card__status span {
    font-size: 0.9rem;
    color: rgba(10, 18, 60, 0.7);
}

.mobile-card__status .badge {
    width: fit-content;
    background: rgba(255, 194, 9, 0.2);
    color: #8a5700;
}

.mobile-card__otp {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mobile-card__otp label {
    margin: 0;
}

.mobile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mobile-card [disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.kyc-status-block {
    padding: 1.1rem 1.3rem;
    border-radius: 1rem;
    background: rgba(5, 12, 55, 0.04);
    border: 1px solid rgba(5, 12, 55, 0.08);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.kyc-status-block p {
    margin: 0;
    color: rgba(5, 12, 45, 0.75);
}

.badge.kyc-approved {
    background: rgba(34, 197, 94, 0.18);
    color: #0a7a33;
}

.badge.kyc-pending,
.badge.kyc-in_review {
    background: rgba(250, 204, 21, 0.22);
    color: #854d0e;
}

.badge.kyc-rejected {
    background: rgba(248, 113, 113, 0.18);
    color: #b42318;
}

.badge.kyc-not_started {
    background: rgba(37, 99, 235, 0.14);
    color: #1e3a8a;
}

.kyc-form .form-note.error {
    color: #b42318;
}

@media (max-width: 720px) {
    .profile-card header {
        flex-direction: column;
    }

    .profile-form button {
        width: 100%;
    }
}

/* Support console */
    body[data-page="support-chat"],
    .admin-support-body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    body[data-page="support-chat"] > main.support-console {
        flex: 1 1 auto;
        min-height: 0;
    }

    .support-console {
        padding: 3.25rem 5vw 4.5rem;
        background: linear-gradient(180deg, #edf2ff 0%, #f7f9ff 45%, #ffffff 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .admin-support-main .support-console,
    body[data-page="support-chat"] > main.support-console {
        flex: 1 1 auto;
        min-height: 0;
    }

    .support-board-heading {
        width: min(1360px, 100%);
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 1.8rem;
        padding: 1.5rem 2rem;
        border: 1px solid rgba(5, 15, 55, 0.08);
        box-shadow: 0 20px 50px rgba(4, 10, 44, 0.08);
    }

    .support-board-heading .badge {
        display: inline-flex;
        padding: 0.35rem 1rem;
        border-radius: 999px;
        background: rgba(4, 12, 70, 0.08);
        font-weight: 600;
        color: #04103b;
        margin-bottom: 1rem;
    }

    .support-board-heading h1 {
        margin: 0 0 1rem;
        font-size: clamp(2rem, 3vw, 2.75rem);
        color: #050c2f;
    }

    .support-console .btn.primary {
        background: var(--navy);
        border: none;
        box-shadow: 0 12px 24px rgba(2, 10, 58, 0.2);
    }

    .support-meta {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem 1.25rem;
        color: rgba(6, 12, 44, 0.7);
        font-weight: 600;
    }

    .dot {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.35rem;
    }

    .dot.online {
        background: #28d17c;
        box-shadow: 0 0 12px rgba(40, 209, 124, 0.7);
    }

    .support-console-board {
        display: grid;
        grid-template-columns: 440px minmax(0, 1fr);
        gap: 2.8rem;
        width: min(1360px, 100%);
        margin: 0 auto;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: calc(100vh - 260px);
    }

    @media (min-width: 981px) {
        .support-console-board > * {
            padding: 0;
        }
    }
            width: 100%;
            max-width: none;
            border-radius: 0;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 1.8rem;
        border: 1px solid rgba(5, 15, 55, 0.08);
        box-shadow: 0 25px 60px rgba(4, 10, 44, 0.08);
        padding: 2.2rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ticket-workspace {
        min-width: clamp(520px, 58vw, 820px);
    }

    .pane-back-btn {
        display: none;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.95rem;
        border-radius: 999px;
        border: 1px solid rgba(4, 12, 70, 0.15);
        background: rgba(255, 255, 255, 0.95);
        color: #04103b;
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1;
        box-shadow: 0 15px 25px rgba(4, 12, 70, 0.08);
        cursor: pointer;
        margin: 0 0 1rem;
        align-self: flex-start;
    }

    .pane-back-btn span {
        font-size: 1.2rem;
        line-height: 1;
    }

    @media (min-width: 980px) {
        .support-console-board {
            min-height: calc(100vh - 260px);
        }

        .support-console-board > * {
            height: 100%;
        }

        .ticket-sidebar,
        .ticket-workspace {
            height: 100%;
        }

        .admin-ticket-sidebar {
            align-self: stretch;
            top: 0;
        }
    }

    @media (max-width: 1200px) {
        .support-board-heading {
            width: min(1000px, 100%);
        }

        .support-console-board {
            grid-template-columns: 360px minmax(0, 1fr);
            gap: 2rem;
            width: min(1000px, 100%);
        }

        .ticket-workspace {
            min-width: clamp(420px, 60vw, 720px);
        }
    }

    @media (min-width: 981px) {
        [data-support-board] {
            grid-template-columns: 440px minmax(0, 1fr);
        }
    }

    @media (max-width: 980px) {
        .support-console-board,
        [data-support-board] {
            grid-template-columns: 1fr;
            min-height: auto;
        }

        .ticket-sidebar,
        .ticket-workspace {
            min-width: auto;
        }

        [data-chat-pane] {
            display: none;
        }

        [data-support-board].is-chat-open [data-ticket-pane] {
            display: none;
        }

        [data-support-board].is-chat-open [data-chat-pane] {
            display: block;
        }

        [data-support-board].is-chat-open .pane-back-btn {
            display: inline-flex;
        }
    }

    .admin-support-body {
        background: linear-gradient(180deg, #eef1ff 0%, #f7f9ff 50%, #ffffff 100%);
        min-height: 100vh;
        margin: 0;
    }

    .admin-support-main {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.5rem 3vw 4rem;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .admin-support-hero {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(5, 15, 55, 0.08);
        border-radius: 1.8rem;
        padding: 1.75rem 2rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        box-shadow: 0 25px 55px rgba(5, 12, 50, 0.1);
    }

    .admin-support-hero h1 {
        margin: 0.35rem 0 0.75rem;
    }

    .admin-support-hero__actions {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    .support-console--admin {
        box-shadow: none;
        background: transparent;
        padding: 0;
    }

        .support-console--admin .support-console-board {
            max-width: min(1320px, 100%);
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

    .admin-support-board {
        align-items: flex-start;
        gap: 1.5rem;
    }

    .admin-ticket-sidebar {
        position: relative;
        top: 0;
        align-self: stretch;
        background: #ffffff;
        border-radius: 1.6rem;
        border: 1px solid rgba(5, 15, 55, 0.08);
        box-shadow: 0 25px 70px rgba(5, 15, 65, 0.08);
        padding: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 1.35rem;
        height: 100%;
    }

    .ticket-refresh-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 999px;
        padding: 0.4rem 0.95rem;
        font-weight: 600;
    }

    .ticket-refresh-btn .refresh-icon {
        width: 1rem;
        height: 1rem;
        display: inline-block;
        background: linear-gradient(135deg, #5b7cff, #7a4bff);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7c2.76 0 5 2.24 5 5a5 5 0 11-8.9-3.09l-1.45-1.45A6.98 6.98 0 0012 19a7 7 0 005.65-11.65z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .ticket-sidebar__filters {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .ticket-sidebar__filters select {
        border-radius: 999px;
        border: 1px solid rgba(5, 15, 55, 0.15);
        padding: 0.45rem 1rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.95);
        min-width: 9rem;
    }

    .ticket-count-pill {
        border-radius: 999px;
        padding: 0.35rem 0.95rem;
        font-weight: 600;
        background: rgba(91, 124, 255, 0.12);
        color: #1b2d7a;
        width: fit-content;
        text-transform: uppercase;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }


    .admin-conversation {
        border: 1px solid rgba(5, 15, 55, 0.08);
        border-radius: 1.5rem;
        padding: 1.75rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .admin-composer {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .admin-composer textarea {
        width: 100%;
        min-height: 120px;
        resize: vertical;
    }

    .admin-composer textarea {
        border-radius: 1.2rem;
        border: 1px solid rgba(3, 14, 52, 0.12);
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 25px rgba(4, 10, 60, 0.08);
    }

    .admin-composer-actions {
        display: flex;
        gap: 0.85rem;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .admin-composer-actions .btn {
        border-radius: 999px;
        min-width: 9rem;
    }

    .admin-composer-actions .btn.ghost {
        border: 1px solid rgba(26, 181, 115, 0.4);
        color: #11754a;
        background: rgba(26, 181, 115, 0.08);
    }

    .admin-composer-actions .btn.primary {
        background: var(--navy);
        box-shadow: 0 20px 40px rgba(2, 10, 58, 0.25);
    }
    .admin-ticket-workspace {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .ticket-workspace {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        background: #fff;
        border-radius: 1.8rem;
        border: 1px solid rgba(5, 15, 55, 0.08);
        padding: 1.75rem;
        box-shadow: 0 35px 80px rgba(6, 12, 50, 0.12);
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .ticket-sidebar__header {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
    }

    .ticket-sidebar__hint {
        margin: 0.4rem 0 0;
        font-size: 0.9rem;
        color: rgba(5, 15, 55, 0.6);
    }

    .ticket-sidebar__fields {
        display: flex;
        flex-direction: column;
        gap: 0.95rem;
    }

    .ticket-sidebar__footer {
        margin-top: auto;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(5, 15, 55, 0.08);
        display: flex;
        justify-content: flex-end;
    }

    .ticket-settings-btn {
        min-width: 2.6rem;
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        line-height: 1;
    }

    .workspace-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    body[data-page="admin-whatsapp"] .admin-composer-actions {
        justify-content: space-between;
        gap: 0.75rem;
    }

    body[data-page="admin-whatsapp"] .admin-composer-actions input[type="file"] {
        max-width: 260px;
        flex: 1 1 auto;
    }

    .ticket-sidebar__field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(5, 15, 55, 0.55);
    }

    .ticket-sidebar__field input,
    .ticket-sidebar__field select {
        border-radius: 1rem;
        border: 1px solid rgba(7, 20, 70, 0.15);
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        background: rgba(6, 15, 55, 0.02);
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .ticket-sidebar__field input:focus,
    .ticket-sidebar__field select:focus {
        outline: none;
        border-color: rgba(84, 99, 255, 0.8);
        background: #fff;
        box-shadow: 0 16px 35px rgba(84, 99, 255, 0.18);
    }

    .eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.75rem;
        color: rgba(5, 12, 52, 0.7);
        margin: 0 0 0.4rem;
    }

    .ticket-sidebar__header h2 {
        margin: 0;
        font-size: 1.4rem;
        color: #030b2c;
    }

    .ticket-sidebar__actions .btn {
        font-size: 0.9rem;
    }

    .ticket-search label {
        width: 100%;
    }

    .ticket-search input {
        border-radius: 999px;
        border: 1px solid rgba(7, 20, 70, 0.15);
        padding: 0.75rem 1.1rem;
        font-size: 0.95rem;
        width: 100%;
        background: rgba(6, 15, 55, 0.02);
    }

    .ticket-list {
        position: relative;
    }

    .ticket-list::after {
        content: "";
        position: absolute;
        top: 0.4rem;
        right: 0.35rem;
        width: 4px;
        bottom: 0.4rem;
        border-radius: 999px;
        background: linear-gradient(180deg, #6c5bff, #5bd8ff);
        opacity: 0.6;
        pointer-events: none;
    }

    .ticket-list {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        --ticket-stack-gap: 0.9rem;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 0.35rem;
        scrollbar-width: thin;
    }

    .support-console-board .ticket-list {
        --ticket-stack-item-height: 7.25rem;
        --ticket-stack-visible-count: 4;
        max-height: min(
            70vh,
            calc(var(--ticket-stack-item-height) * var(--ticket-stack-visible-count) + 2.7rem)
        );
        overflow-y: auto;
    }

    body[data-page="admin-whatsapp"] .support-console-board .ticket-list {
        max-height: none;
        margin-top: 0.75rem;
    }

    body[data-page="admin-whatsapp"] .ticket-card {
        padding: 0.85rem 0.95rem;
    }

    body[data-page="admin-whatsapp"] .ticket-card header {
        margin-bottom: 0.35rem;
    }

    body[data-page="admin-whatsapp"] .ticket-card__preview {
        margin: 0 0 0.55rem;
        font-size: 0.9rem;
        line-height: 1.35;
        color: rgba(4, 10, 44, 0.7);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body[data-page="admin-whatsapp"] .ticket-time {
        font-size: 0.78rem;
        font-weight: 700;
        color: rgba(4, 19, 68, 0.55);
        white-space: nowrap;
    }

    body[data-page="admin-whatsapp"] .ticket-card footer {
        justify-content: flex-start;
    }

    .ticket-pill {
        position: relative;
        display: block;
        border: 1px solid rgba(5, 15, 55, 0.08);
        border-radius: 1.25rem;
        padding: 1rem 1.15rem 0.9rem;
        background: rgba(255, 255, 255, 0.95);
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .support-console-board .ticket-pill {
        min-height: var(--ticket-stack-item-height);
    }

    .ticket-pill:hover,
    .ticket-pill.is-active {
        transform: translateY(-2px);
        border-color: rgba(76, 102, 255, 0.4);
        background: #ffffff;
        box-shadow: 0 32px 60px rgba(4, 18, 80, 0.2);
    }

    .ticket-pill.is-active::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1.2rem;
        border: 2px solid rgba(91, 124, 255, 0.4);
        pointer-events: none;
    }

    .ticket-pill__head {
        display: flex;
        justify-content: flex-start;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .ticket-pill__title {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .ticket-pill__customer {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: rgba(5, 12, 47, 0.8);
    }

    .ticket-pill__subject {
        margin: 0;
        font-weight: 700;
        color: #050b2a;
        font-size: 1rem;
    }

    .ticket-pill__meta-line {
        display: flex;
        justify-content: space-between;
        gap: 0.6rem;
        font-size: 0.8rem;
        color: rgba(5, 14, 48, 0.55);
        margin: 0.45rem 0 0.35rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .ticket-pill__meta-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
        min-width: 0;
    }

    .ticket-pill__id {
        font-weight: 700;
    }

    .ticket-pill__category {
        font-weight: 600;
        color: rgba(5, 14, 48, 0.65);
    }

    .ticket-pill__preview {
        margin: 0.5rem 0 0.65rem;
        color: rgba(4, 10, 44, 0.7);
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .ticket-chip {
        border-radius: 999px;
        padding: 0.25rem 0.85rem;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ticket-chip.status-open {
        background: rgba(63, 140, 255, 0.18);
        color: #1452cc;
    }

    .ticket-chip.status-resolved,
    .ticket-chip.status-closed {
        background: rgba(87, 191, 137, 0.18);
        color: #0f6f43;
    }

    .ticket-chip.status-pending {
        background: rgba(255, 198, 110, 0.25);
        color: #9b4b00;
    }

    .ticket-empty {
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(5, 12, 52, 0.04);
        font-weight: 600;
        color: rgba(5, 12, 52, 0.65);
    }

    .workspace-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(5, 15, 55, 0.08);
    }

    .workspace-heading {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .workspace-ticket-meta {
        border-radius: 1rem;
        border: 1px solid rgba(5, 15, 55, 0.08);
        background: rgba(247, 248, 255, 0.9);
        padding: 0.85rem 1rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        font-weight: 600;
        margin-top: 0.35rem;
    }

    .workspace-title-row {
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
        width: 100%;
    }

    .workspace-header h2 {
        margin: 0;
        font-size: clamp(0.95rem, 1.4vw, 1.15rem);
        color: #050b2a;
        flex: 1 1 auto;
        min-width: 0;
    }

    .admin-ticket-workspace .workspace-heading h2 {
        font-size: clamp(1.1rem, 1.8vw, 1.35rem);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .workspace-ticket-code {
        margin: 0.2rem 0 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(5, 15, 55, 0.45);
    }

    .workspace-ticket-code span {
        display: block;
        font-size: 0.98rem;
        letter-spacing: normal;
        color: #050b2a;
        margin-top: 0.15rem;
    }

    .workspace-subtext {
        margin: 0.75rem 0 0;
        color: rgba(5, 18, 72, 0.65);
        font-weight: 600;
    }

    .workspace-actions {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        margin-left: auto;
        justify-content: flex-end;
        align-self: flex-start;
        flex: 0 0 auto;
        max-width: 100%;
    }

    .workspace-actions .status-select,
    .workspace-actions .btn {
        flex: 0 0 auto;
    }

    @media (max-width: 768px) {
        .workspace-actions {
            width: auto;
            justify-content: flex-end;
            flex-wrap: nowrap;
            gap: 0.35rem;
            margin-left: auto;
        }

        .workspace-actions .status-select {
            min-width: 110px;
        }

        .workspace-actions .btn {
            padding-left: 0.65rem;
            padding-right: 0.65rem;
        }

        body[data-page="support-chat"],
        .support-chat-page {
            font-size: 0.92rem;
        }

        body[data-page="support-chat"] .support-console-board,
        .support-chat-page .support-chat-layout {
            gap: 1.2rem;
        }

        body[data-page="support-chat"] .ticket-sidebar,
        body[data-page="support-chat"] .ticket-workspace,
        .support-chat-page .chat-panel,
        .support-chat-page .ticket-panel,
        .support-chat-page .resource-panel {
            padding: 1.35rem;
            border-radius: 1.3rem;
        }
    }

    .status-select {
        border-radius: 999px;
        border: 1px solid rgba(5, 15, 55, 0.12);
        padding: 0.5rem 0.75rem;
        font-weight: 600;
        min-width: 130px;
        max-width: 160px;
    }

    .status-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.9rem;
        border-radius: 999px;
        background: rgba(30, 72, 197, 0.12);
        color: #1b2d7a;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .status-chip.is-open {
        background: rgba(63, 140, 255, 0.18);
        color: #1452cc;
    }

    .status-chip.is-pending {
        background: rgba(255, 198, 110, 0.3);
        color: #9b4b00;
    }

    .status-chip.is-resolved,
    .status-chip.is-closed {
        background: rgba(60, 207, 155, 0.2);
        color: #067b4f;
    }

    .status-chip.is-idle {
        background: rgba(30, 72, 197, 0.12);
        color: #1b2d7a;
    }

    .status-chip--inline {
        padding: 0.15rem 0.75rem;
    }

    .status-chip--stacked {
        margin-top: 0.35rem;
    }

    .conversation-panel {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .chat-ticket-id {
        margin: 0;
        font-size: 0.95rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(5, 15, 55, 0.7);
    }

    .chat-ticket-id span {
        margin-left: 0.45rem;
        color: #050b2a;
        letter-spacing: normal;
        font-weight: 700;
    }

    .chat-ticket-user {
        margin: 0;
        font-size: 0.88rem;
        color: rgba(5, 15, 55, 0.65);
    }


    .conversation-scroll {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        border-radius: 1.1rem;
        background: rgba(246, 248, 255, 0.65);
        padding: 1.1rem;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        scrollbar-gutter: stable;
    }

    .conversation-empty {
        text-align: center;
        padding: 2rem 1.5rem;
        border-radius: 1.3rem;
        background: rgba(244, 247, 255, 0.7);
        font-weight: 600;
        color: rgba(4, 12, 60, 0.7);
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        align-items: center;
    }

    .conversation-empty h3 {
        margin: 0;
        font-size: 1.2rem;
        color: #050b2a;
    }

    .conversation-empty__icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background: linear-gradient(135deg, #4f6bff, #6f51ff);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 18px 40px rgba(84, 103, 255, 0.35);
    }

    .conversation-empty__icon::before {
        content: "";
        width: 28px;
        height: 28px;
        background: #fff;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 10a6 6 0 1112 0v2a3 3 0 013 3v2h-4v-2H7v2H3v-2a3 3 0 013-3v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .conversation-empty__icon--bubble::before {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a1 1 0 011 1v10a1 1 0 01-1 1h-6l-4 3v-3H4a1 1 0 01-1-1V5a1 1 0 011-1z'/%3E%3C/svg%3E");
    }

    .conversation-composer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        align-items: center;
    }

    .conversation-composer textarea {
        border-radius: 1rem;
        border: 1px solid rgba(3, 14, 52, 0.12);
        background: rgba(7, 14, 60, 0.03);
        padding: 0.95rem 1.15rem;
        font-size: 1rem;
        resize: vertical;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 25px rgba(4, 10, 60, 0.08);
        min-height: 3.2rem;
    }

    .conversation-composer .btn.primary {
        border-radius: 999px;
        min-width: 7rem;
        height: 3rem;
        padding: 0 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .conversation-composer.admin-composer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .conversation-composer.admin-composer textarea {
        width: 100%;
        min-height: 130px;
        background: #fff;
    }

    .conversation-composer.admin-composer .admin-composer-actions {
        justify-content: flex-start;
    }

    .ticket-form-card {
        border: 1px solid rgba(5, 15, 55, 0.08);
        border-radius: 1.6rem;
        padding: 1.65rem;
        background: linear-gradient(180deg, #ffffff 0%, #f9faff 100%);
        box-shadow: 0 24px 55px rgba(4, 12, 44, 0.12);
    }

    .conversation-ticket-card {
        border-top: 1px dashed rgba(5, 15, 55, 0.12);
        padding-top: 1.5rem;
        margin-top: 0.5rem;
    }

    .ticket-form-card header h3 {
        margin: 0;
    }

    .ticket-form {
        margin-top: 1.25rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem 1.35rem;
    }

    .ticket-form label {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(5, 18, 72, 0.6);
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    .composer-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(5, 15, 55, 0.65);
    }

    .ticket-form label textarea,
    .ticket-form label input,
    .ticket-form label select {
        border-radius: 1rem;
        border: 1px solid rgba(7, 18, 68, 0.14);
        padding: 0.9rem 1rem;
        font-size: 0.98rem;
        font-weight: 500;
        background: linear-gradient(180deg, #fdfdff 0%, #f5f7ff 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 15px 35px rgba(5, 12, 55, 0.08);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .ticket-form__transactions .transaction-picker {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .ticket-form__transactions select {
        padding-right: 2.5rem;
    }

    .ticket-form__transactions select:focus {
        outline: none;
    }

    .ticket-form__transactions input {
        background: #fff;
    }

    .ticket-form__helper {
        font-size: 0.78rem;
        font-weight: 500;
        color: rgba(5, 18, 72, 0.65);
        text-transform: none;
        letter-spacing: normal;
        margin-top: -0.35rem;
        display: block;
    }

    .ticket-form label textarea {
        min-height: 140px;
        resize: vertical;
    }

    .ticket-form label textarea:focus,
    .ticket-form label input:focus,
    .ticket-form label select:focus {
        outline: none;
        border-color: rgba(15, 110, 255, 0.45);
        box-shadow: 0 20px 40px rgba(9, 25, 85, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        background: #fff;
    }

    .ticket-form label.full-row,
    .ticket-form button {
        grid-column: 1 / -1;
    }

    .ticket-form button {
        justify-self: stretch;
        padding: 1rem 1.75rem;
        border-radius: 999px;
        font-size: 1rem;
        font-weight: 700;
        border: none;
        background: var(--navy);
        box-shadow: 0 25px 45px rgba(2, 10, 58, 0.25);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
    }

    .ticket-form button::before {
        content: "";
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M5 5h14a1 1 0 011 1v9a1 1 0 01-1 1h-7l-4 3v-3H5a1 1 0 01-1-1V6a1 1 0 011-1z'/%3E%3C/svg%3E");
        mask-size: 16px;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    .ticket-form button:hover {
        box-shadow: 0 28px 55px rgba(12, 65, 200, 0.4);
    }

    .support-console .btn.ghost {
        border: 1px solid rgba(4, 12, 70, 0.15);
        background: #fff;
        color: #04103b;
        border-radius: 999px;
        padding: 0.55rem 1.1rem;
        font-weight: 600;
    }

    .chat-bubble {
        max-width: 78%;
        padding: 0.95rem 1.1rem;
        border-radius: 1rem;
        background: #f2f5ff;
        color: #030b2c;
        align-self: flex-start;
        box-shadow: 0 15px 30px rgba(5, 7, 34, 0.12);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .chat-bubble:hover {
        transform: translateY(-2px);
        box-shadow: 0 25px 45px rgba(5, 12, 60, 0.18);
    }

    .chat-bubble-user {
        background: linear-gradient(135deg, #5d5bff, #4f84ff);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 0.25rem;
    }

    .chat-bubble-admin {
        background: #ffffff;
        border: 1px solid rgba(3, 14, 52, 0.08);
    }

    .chat-bubble-system {
        background: rgba(4, 18, 70, 0.12);
        font-size: 0.82rem;
        text-align: center;
    }

    .admin-conversation .chat-bubble {
        max-width: 80%;
    }

    .admin-conversation .chat-bubble-user {
        align-self: flex-start;
        background: #f5f7ff;
        color: #08163c;
        border: 1px solid rgba(8, 22, 68, 0.08);
        border-bottom-left-radius: 0.35rem;
        border-bottom-right-radius: 1rem;
    }

    .admin-conversation .chat-bubble-admin {
        align-self: flex-end;
        background: linear-gradient(135deg, #5c6cff, #4f92ff);
        color: #fff;
        border: none;
        border-bottom-right-radius: 0.35rem;
        border-bottom-left-radius: 1rem;
        box-shadow: 0 20px 45px rgba(53, 79, 255, 0.35);
    }

    .admin-conversation .chat-bubble-system {
        align-self: center;
        background: rgba(5, 15, 55, 0.08);
        color: rgba(5, 15, 55, 0.7);
    }

        .conversation-panel [hidden] {
            display: none !important;
        }
    .chat-bubble-body {
        margin: 0 0 0.4rem;
        line-height: 1.5;
    }

    .chat-bubble-meta {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        opacity: 0.75;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .conversation-panel .chat-inline-status {
        margin-top: 0;
    }

    .chat-inline-status {
        min-height: 1.5rem;
        font-size: 0.9rem;
        color: rgba(4, 19, 72, 0.75);
        margin: 0.2rem 0 0;
    }

    .chat-inline-status.is-error {
        color: #c2172b;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    @media (max-width: 1024px) {
        .support-console {
            padding: 2rem 3.5vw 2.8rem;
        }

        .support-board-heading {
            padding: 1rem 1.35rem;
            border-radius: 1.4rem;
        }

        .support-board-heading .badge {
            padding: 0.25rem 0.85rem;
            font-size: 0.78rem;
            margin-bottom: 0.6rem;
        }

        .support-board-heading h1 {
            font-size: clamp(1.45rem, 3.5vw, 1.95rem);
            margin-bottom: 0.5rem;
        }

        .support-board-heading p {
            font-size: 0.88rem;
            line-height: 1.4;
        }

        .support-meta {
            gap: 0.5rem 0.85rem;
            font-size: 0.8rem;
        }

        .support-console-board {
            grid-template-columns: 1fr;
        }

        .support-console-board .ticket-list {
            --ticket-stack-item-height: 6.85rem;
        }

        .ticket-sidebar,
        .ticket-workspace {
            padding: 1.5rem;
        }

        .workspace-header {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem;
        }

        .workspace-title-row h2 {
            font-size: 1.15rem;
        }

        .workspace-heading {
            flex: 1 1 auto;
        }

        .workspace-actions {
            width: auto;
            margin-left: auto;
            justify-content: flex-end;
            flex-wrap: nowrap;
        }

        .conversation-panel {
            min-height: 520px;
        }

        .conversation-scroll {
            min-height: 320px;
        }
    }

    @media (max-width: 640px) {
        .support-console {
            padding: 2.25rem 1.25rem 3.25rem;
        }

        .ticket-list {
            max-height: none;
        }

        .support-console-board .ticket-list {
            --ticket-stack-item-height: 6.25rem;
        }

        .ticket-overview {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .ticket-overview__item--wide {
            grid-column: span 1;
        }

        .conversation-panel {
            min-height: 560px;
        }

        .conversation-scroll {
            min-height: 400px;
        }

        .conversation-composer {
            grid-template-columns: 1fr;
        }

        .chat-bubble {
            max-width: 100%;
        }

        .workspace-header {
            gap: 0.6rem;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            text-align: left;
            position: relative;
            padding-top: 0.25rem;
        }

        .workspace-title-row {
            flex-direction: row;
            align-items: center;
            width: 100%;
            flex-wrap: nowrap;
            gap: 0;
        }

        .workspace-title-row h2 {
            font-size: 0.95rem;
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
        }

        .workspace-title-row .status-chip {
            flex: 0 0 auto;
            margin-left: 0.2rem;
        }

        .workspace-heading {
            width: 100%;
            text-align: left;
            padding-right: 7rem;
        }

        .workspace-actions {
            width: auto;
            justify-content: flex-end;
            position: absolute;
            top: 0;
            right: 0;
        }

        .workspace-actions .btn {
            width: 100%;
            text-align: center;
            min-width: 7rem;
        }

        body[data-page="support-chat"],
        .support-chat-page {
            font-size: 0.88rem;
        }

        body[data-page="support-chat"] .support-console,
        .support-chat-page {
            padding: 1.75rem 0.9rem 2.5rem;
        }

        body[data-page="support-chat"] .ticket-sidebar,
        body[data-page="support-chat"] .ticket-workspace,
        .support-chat-page .chat-panel,
        .support-chat-page .ticket-panel,
        .support-chat-page .resource-panel {
            padding: 1.05rem;
            border-radius: 1.1rem;
        }
    }

    .wallet-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem 1.25rem;
        align-content: flex-start;
        grid-area: form;
    }

    .wallet-form label {
        color: rgba(5, 15, 55, 0.8);
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

.wallet-form label.full-row {
    grid-column: 1 / -1;
}

/* Support chat */
.support-chat-page {
    padding: 3.5rem 5vw 4rem;
    background: linear-gradient(180deg, #eef2ff 0%, #ffffff 35%);
    min-height: 100vh;
}

.support-chat-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

.support-chat-hero .badge {
    display: inline-flex;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: rgba(5, 15, 55, 0.08);
    font-weight: 600;
    color: #03134a;
    margin-bottom: 1rem;
}

.support-chat-hero h1 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin: 0 0 1rem;
}

.support-meta {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    color: rgba(6, 12, 44, 0.75);
    font-weight: 600;
}

.dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.4rem;
}

.dot.online {
    background: #28d17c;
    box-shadow: 0 0 12px rgba(40, 209, 124, 0.7);
}

.support-hero-card {
    background: radial-gradient(circle at top, #041542, #07102d);
    border-radius: 1.6rem;
    color: #fff;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(4, 10, 38, 0.35);
}

.support-hero-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}

.support-hero-card strong {
    font-size: 2.2rem;
    display: block;
    margin: 0.25rem 0 0.75rem;
}

.support-chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr);
    gap: 1.8rem;
}

.chat-panel,
.ticket-panel,
.resource-panel {
    background: #fff;
    border-radius: 1.6rem;
    border: 1px solid rgba(3, 14, 52, 0.08);
    box-shadow: 0 24px 50px rgba(4, 9, 30, 0.08);
}

.chat-panel {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    height: 100%;
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.chat-panel-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.chat-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(40, 209, 124, 0.12);
    color: #059d54;
    font-weight: 600;
}

.chat-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem;
    background: rgba(246, 248, 255, 0.65);
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.chat-bubble {
    max-width: 78%;
    padding: 0.95rem 1.1rem;
    border-radius: 1rem;
    background: #f2f5ff;
    color: #030b2c;
    align-self: flex-start;
    box-shadow: 0 15px 30px rgba(5, 7, 34, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chat-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 45px rgba(5, 12, 60, 0.18);
}

.chat-bubble-user {
    background: linear-gradient(135deg, #5d5bff, #4f84ff);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 0.25rem;
}

.chat-bubble-admin {
    background: #ffffff;
    border: 1px solid rgba(3, 14, 52, 0.08);
}

.chat-bubble-system {
    background: rgba(4, 18, 70, 0.12);
    font-size: 0.82rem;
    text-align: center;
}

.chat-bubble-body {
    margin: 0 0 0.45rem;
    line-height: 1.5;
}

.chat-bubble-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-empty {
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    border-radius: 1.1rem;
    background: rgba(4, 16, 60, 0.04);
    font-weight: 600;
}

.chat-inline-status {
    min-height: 1.5rem;
    font-size: 0.9rem;
    color: rgba(4, 19, 72, 0.75);
    margin: 0.8rem 0 0;
}

.chat-inline-status.is-error {
    color: #c2172b;
}

.chat-input-bar {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.chat-input-bar textarea {
    border-radius: 1rem;
    border: 1px solid rgba(3, 14, 52, 0.12);
    padding: 0.85rem 1rem;
    font-size: 1rem;
    resize: vertical;
}

.support-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ticket-panel,
.resource-panel {
    padding: 1.5rem;
}

.ticket-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.ticket-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(3, 14, 52, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea {
    border-radius: 0.9rem;
    border: 1px solid rgba(3, 14, 52, 0.15);
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
}

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ticket-card {
    border: 1px solid rgba(4, 16, 60, 0.08);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(5, 10, 32, 0.02);
}

.ticket-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.ticket-card h4 {
    margin: 0;
    font-size: 1rem;
}

.ticket-id {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(4, 19, 68, 0.8);
}

.ticket-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-chip.priority-low {
    background: rgba(80, 186, 255, 0.18);
    color: #0b69c7;
}

.ticket-chip.priority-medium {
    background: rgba(255, 197, 110, 0.25);
    color: #a35600;
}

.ticket-chip.priority-high {
    background: rgba(255, 124, 140, 0.25);
    color: #c2172b;
}

.ticket-card footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(5, 16, 60, 0.7);
}

.ticket-empty {
    font-weight: 600;
    color: rgba(4, 13, 55, 0.6);
}

.resource-panel ul {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0.5rem 0 0;
    color: rgba(4, 15, 60, 0.8);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .support-chat-layout {
        grid-template-columns: 1fr;
    }

    .chat-panel {
        order: 2;
    }

    .support-sidebar {
        order: 1;
    }
}

@media (max-width: 640px) {
    .chat-panel,
    .ticket-panel,
    .resource-panel {
        padding: 1.1rem;
    }

    .chat-bubble {
        max-width: 100%;
    }

    .chat-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-input-bar {
        grid-template-columns: 1fr;
    }
}

.wallet-form input,
.wallet-form textarea,
.wallet-form select {
    border-radius: 1rem;
    border: 1px solid rgba(6, 20, 70, 0.12);
    padding: 0.85rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wallet-form textarea {
    min-height: 100px;
    resize: vertical;
}

.wallet-form input:focus,
.wallet-form textarea:focus,
.wallet-form select:focus {
    outline: none;
    border-color: rgba(0, 179, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 179, 255, 0.1);
}

.wallet-form button {
    grid-column: 1 / -1;
    justify-self: flex-start;
}

.wallet-page {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 3rem clamp(1.5rem, 6vw, 4rem) 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.wallet-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -0.75rem;
}

.wallet-back-top {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(7, 20, 55, 0.12);
    background: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(2, 13, 55, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wallet-back-icon {
    width: 20px;
    height: 20px;
}

.wallet-back-top:focus-visible,
.wallet-back-top:hover {
    outline: none;
    border-color: rgba(13, 71, 255, 0.25);
    box-shadow: 0 18px 40px rgba(2, 13, 55, 0.08);
    transform: translateY(-1px);
}

.wallet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.wallet-primary-card {
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    border-radius: 1.8rem;
    border: 1px solid rgba(5, 15, 55, 0.08);
    box-shadow: 0 35px 80px rgba(6, 12, 50, 0.12);
    padding: 2.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.wallet-back-top.wallet-back-top--in-card {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 30;
}

.wallet-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.wallet-heading {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.wallet-avatar {
    width: 72px;
    height: 72px;
    border-radius: 1.6rem;
    background: rgba(5, 12, 60, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #041033;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wallet-avatar svg {
    width: 70%;
    height: 70%;
}

.wallet-heading-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wallet-heading-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wallet-heading-top .badge {
    margin: 0;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: rgba(5, 15, 55, 0.08);
    font-weight: 600;
    color: #041033;
    font-size: 0.82rem;
}

.wallet-user-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(5, 15, 55, 0.7);
}

.wallet-primary-card h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 2.8rem);
    color: #050b2a;
    line-height: 1.1;
}

.wallet-updated {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(5, 15, 55, 0.6);
}

.wallet-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(34, 197, 94, 0.16);
    color: #0f7a52;
}

.wallet-status-chip .status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.wallet-status-chip-active {
    background: rgba(34, 197, 94, 0.18);
    color: #0f7a52;
}

.wallet-status-chip-pending {
    background: rgba(15, 110, 255, 0.18);
    color: #0f47c9;
}

.wallet-status-chip-inactive {
    background: rgba(255, 196, 110, 0.25);
    color: #8a4d00;
}

.wallet-status-chip-blocked {
    background: rgba(250, 114, 120, 0.25);
    color: #b02028;
}

.wallet-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wallet-load-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wallet-action-note {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(5, 15, 55, 0.65);
    background: rgba(5, 15, 55, 0.06);
    border: 1px solid rgba(5, 15, 55, 0.08);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.wallet-actions .btn {
    border-radius: 999px;
    min-height: 48px;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.wallet-actions .wallet-add-btn span:first-child {
    font-size: 1.4rem;
    line-height: 1;
}

.wallet-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.wallet-stats article {
    background: #fff;
    border-radius: 1.4rem;
    border: 1px solid rgba(6, 18, 70, 0.08);
    box-shadow: 0 18px 40px rgba(7, 14, 60, 0.08);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wallet-stats .label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(5, 15, 55, 0.6);
}

.wallet-stats strong {
    font-size: 1.45rem;
    color: #050b2a;
}

.wallet-stats span {
    font-size: 0.9rem;
    color: rgba(5, 15, 55, 0.65);
}

.wallet-history-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 24px 50px rgba(2, 13, 55, 0.07);
    border: 1px solid rgba(7, 20, 55, 0.08);
}

.wallet-history-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wallet-history-card h2 {
    margin: 0;
}

.wallet-history-card .history-scroll {
    margin-top: 1.5rem;
}

@media (max-width: 1024px) {
    .wallet-page {
        padding: 2.5rem clamp(1.5rem, 6vw, 3rem) 3rem;
    }

    .wallet-primary-card {
        padding: 1.8rem;
    }

    .wallet-actions {
        position: static;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .wallet-primary-card h1 {
        font-size: clamp(1.55rem, 6.2vw, 2.05rem);
    }

    .wallet-heading-top .badge {
        font-size: 0.75rem;
    }

    .wallet-actions .btn {
        min-height: 42px;
        padding-left: 1.05rem;
        padding-right: 1.05rem;
        font-size: 0.95rem;
    }

    .wallet-actions .wallet-add-btn span:first-child {
        font-size: 1.2rem;
    }

    .wallet-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .support-console {
        padding: 1.4rem 1rem 2.1rem;
    }

    .support-board-heading {
        padding: 0.75rem 0.9rem;
        border-radius: 1rem;
    }

    .support-board-heading .badge {
        margin-bottom: 0.4rem;
        font-size: 0.7rem;
    }

    .support-board-heading h1 {
        font-size: 1.3rem;
    }

    .support-board-heading p {
        font-size: 0.82rem;
    }

    .support-meta {
        flex-direction: column;
        gap: 0.35rem;
        font-size: 0.75rem;
    }

    .ticket-list {
        max-height: none;
    }

    .support-console-board .ticket-list {
        --ticket-stack-item-height: 6.25rem;
    }

    .ticket-sidebar,
    .ticket-workspace {
        padding: 1.25rem;
        border-radius: 1.25rem;
    }

    .ticket-overview {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .ticket-overview__item--wide {
        grid-column: span 1;
    }

    .conversation-panel {
        min-height: 460px;
    }

    .conversation-scroll {
        min-height: 300px;
    }

    .conversation-composer {
        grid-template-columns: 1fr;
    }

    .chat-bubble {
        max-width: 100%;
    }

    .workspace-header {
        gap: 0.6rem;
        flex-direction: column;
    }

    .workspace-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .workspace-title-row h2 {
        font-size: 1rem;
    }

    .workspace-actions {
        width: auto;
        justify-content: flex-end;
    }

    .workspace-actions .btn {
        width: 100%;
        text-align: center;
    }
}


.wallet-load-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4rem 2.5rem;
    z-index: 1200;
}

.wallet-load-modal.is-visible {
    display: flex;
}

.wallet-load-modal[hidden] {
    display: none !important;
}

.wallet-load-modal__scrim {
    position: fixed;
    inset: 0;
    background: rgba(1, 6, 36, 0.65);
    backdrop-filter: blur(2px);
    z-index: 1199;
}

.wallet-load-modal__dialog {
    position: relative;
    width: min(560px, calc(100% - 2rem));
    z-index: 1201;
    max-height: min(90vh, 860px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 35px 120px rgba(3, 7, 32, 0.35);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wallet-load-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
    grid-area: head;
    padding-right: 3rem;
}

.wallet-load-modal__header .label {
    margin-bottom: 0.2rem;
    font-weight: 600;
    color: rgba(4, 12, 60, 0.7);
}

.wallet-load-modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(9, 20, 70, 0.08);
    border: none;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    table-layout: fixed;
    cursor: pointer;
    color: rgba(4, 15, 60, 0.7);
}

.wallet-load-modal__close:hover,
.wallet-load-modal__close:focus-visible {
    background: rgba(9, 20, 70, 0.16);
    word-break: break-word;
    white-space: normal;
    outline: none;
}

.wallet-load-methods {
    border: 1px solid rgba(6, 14, 60, 0.08);
    border-radius: 18px;
    padding: 1.25rem;
    background: #f8f9ff;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-area: methods;
    align-self: stretch;
}

.wallet-load-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wallet-load-tab {
    border: 1px solid rgba(2, 10, 58, 0.2);
    background: #fff;
    color: #020a3a;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wallet-load-tab.is-active {
    background: #020a3a;
    color: #fff;
    border-color: #020a3a;
}

.wallet-load-panels {
    border: 1px solid rgba(2, 10, 58, 0.12);
    border-radius: 16px;
    background: #fff;
    padding: 1.25rem;
}

.wallet-load-panel {
    display: none;
    gap: 0.75rem;
    flex-direction: column;
}

.wallet-load-panel.is-active {
    display: flex;
}

.wallet-load-panel h3 {
    margin: 0;
    font-size: 1.1rem;
}

.wallet-load-panel dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.wallet-load-panel dt {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(5, 12, 54, 0.6);
}

.wallet-load-panel dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
    font-size: 1rem;
}

.wallet-qr-preview {
    display: inline-flex;
    padding: 0.75rem;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed rgba(2, 10, 58, 0.25);
    width: 200px;
    height: 200px;
    align-items: center;
    justify-content: center;
}

.wallet-qr-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wallet-qr-upi {
    font-weight: 600;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wallet-qr-upi span {
    min-width: 0;
}

@media (max-width: 900px) {
    .wallet-load-modal {
        padding: 0;
        align-items: stretch;
    }
    .wallet-load-modal__dialog {
        width: 100vw;
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .wallet-load-modal {
        padding: 0;
        align-items: stretch;
    }
    .wallet-load-modal__dialog {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        overflow-y: auto;
        border-radius: 0;
    }
    .wallet-load-modal__header {
        flex-direction: column;
    }
    .wallet-load-modal__close {
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .wallet-load-modal {
        padding: 0;
    }
    .wallet-load-modal__dialog {
        width: 100vw;
        max-width: none;
        border-radius: 0;
        padding: 1rem;
        gap: 0.9rem;
    }
    .wallet-load-methods,
    .wallet-load-panels {
        padding: 0.85rem;
    }
    .wallet-load-modal .floating-field {
        padding-top: 0.7rem;
    }
    .wallet-load-modal .floating-field input,
    .wallet-load-modal .floating-field textarea {
        padding: 0.9rem 0.85rem 0.55rem;
    }
    .wallet-load-modal .floating-field textarea {
    }
    .wallet-load-panel dl {
        grid-template-columns: 1fr;
    }
    .wallet-qr-preview {
        width: 150px;
        height: 150px;
    }
    .wallet-form label {
        font-size: 0.95rem;
    }
}

@media (max-width: 1024px) {
    .wallet-load-modal {
        padding: 3rem 1.5rem;
    }

    .wallet-load-modal__dialog {
        width: calc(100% - 1.5rem);
    }
}

@media (max-width: 960px) {
    .wallet-load-modal__dialog {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "methods"
            "form";
        max-height: calc(100vh - 2rem);
    }

    .wallet-load-modal__header {
        margin-bottom: 0.5rem;
    }

    .wallet-load-methods {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 900px) {
    .wallet-hero {
        grid-template-columns: 1fr;
    }

    .wallet-actions {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }
}

@media (max-width: 720px) {
    .wallet-page {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .wallet-form {
        grid-template-columns: 1fr;
    }
    .wallet-form button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .wallet-primary-card {
        padding: 1.5rem;
    }

    .wallet-primary-card h1 {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
    }

    .wallet-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wallet-actions .btn {
        width: 100%;
    }

    .wallet-stats {
        grid-template-columns: 1fr;
    }

    .wallet-history-card {
        padding: 1.35rem;
    }
}
:root {
    --navy: #020a3a;
    --navy-dark: #010624;
    --sky: #00b3ff;
    --mint: #7ce9d9;
    --gray: #f4f6fb;
    --text: #0b1437;
}

html {
    font-size: 80%;
}

/* =========================
   User notification bell
   ========================= */

.ak-user-bell {
    position: fixed;
    left: auto;
    right: 1rem;
    bottom: 0.9rem;
    width: auto;
    max-width: min(90vw, 360px);
    z-index: 9999;
    pointer-events: none;
}

.ak-user-bell__btn {
    pointer-events: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid rgba(7, 24, 85, 0.12);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 999px;
    padding: 0.6rem;
    box-shadow: 0 20px 40px rgba(7, 11, 52, 0.14);
    position: relative;
}

.ak-user-bell__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(2, 10, 58, 0.08);
}

.ak-user-bell__label {
    display: none;
}

.ak-user-bell__wallet {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-user-bell__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.ak-user-bell__panel {
    pointer-events: auto;
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.65rem);
    width: min(90vw, 360px);
    background: #fff;
    border: 1px solid rgba(7, 24, 85, 0.12);
    border-radius: 1.25rem;
    box-shadow: 0 25px 55px rgba(7, 11, 52, 0.16);
    overflow: hidden;
}

.ak-user-bell__panel-head {
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(7, 24, 85, 0.08);
}

.ak-user-bell__panel-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.ak-user-bell__list {
    max-height: min(52vh, 340px);
    overflow: auto;
    padding: 0.75rem 1rem;
}

.ak-user-bell__item {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(7, 24, 85, 0.1);
    border-radius: 0.9rem;
    margin-bottom: 0.6rem;
    background: rgba(244, 246, 251, 0.7);
}

.ak-user-bell__item strong {
    display: block;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.ak-user-bell__item small {
    display: block;
    color: rgba(2, 10, 58, 0.72);
}

.ak-user-bell__hint {
    padding: 0 1rem 1rem;
    color: rgba(2, 10, 58, 0.65);
}

.ak-user-bell__toast {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.6rem);
    background: var(--navy);
    color: #fff;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 22px 44px rgba(1, 6, 36, 0.28);
}

@media (max-width: 520px) {
    .ak-user-bell {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

/* Ensure hero heading/description remain appropriately large on desktop
   even if page-level zoom is applied elsewhere. Use clamp() for fluid sizing. */
@media (min-width: 1025px) {
    .service-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.08;
    }
    .service-hero .service-desc {
        font-size: clamp(1rem, 1.2vw, 1.2rem);
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: #f7f9ff;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

/* Sticky footer: keep footer at viewport bottom when content is short.
   - Most pages use <main>; make it flex-grow.
   - Home page uses sections without <main>; allow footer to auto-push down.
*/
body > main {
    flex: 1 0 auto;
}

body > footer.site-footer {
    margin-top: auto;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

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

body.plan-modal-open {
    overflow: hidden;
}

main,
section:not(.ak-footer) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transition: color 0.35s ease, transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    padding-left: 5vw;
    padding-right: 5vw;
    overflow-x: hidden;
}
.status.down {
    background: rgba(255, 143, 143, 0.2);
    color: #a92020;
}

@media (max-width: 768px) {
    main,
    section:not(.ak-footer) {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .header-primary {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: linear-gradient(120deg, #031b4e, #0c2c6a);
    color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Hide category nav only on utility credits page */
body[data-page="utility-credits"] .site-header .category-nav {
    display: none !important;
}

/* Hide category nav on user dashboard/wallet/profile pages */
body[data-page="dashboard"] .site-header .category-nav,
body[data-page="wallet"] .site-header .category-nav,
body[data-page="profile"] .site-header .category-nav {
    display: none !important;
}

/* When category nav is hidden, also hide the secondary header row to avoid
   showing an empty padded area under the fixed header. */
body[data-page="dashboard"] .site-header .header-secondary,
body[data-page="wallet"] .site-header .header-secondary,
body[data-page="profile"] .site-header .header-secondary,
body[data-page="utility-credits"] .site-header .header-secondary {
    display: none;
}

/* Hide category nav across admin pages */
body.admin-dashboard-body .site-header .category-nav,
body.admin-support-body .site-header .category-nav,
body.admin-console-body .site-header .category-nav,
body.admin .site-header .category-nav {
    display: none !important;
}

body:not(.no-fixed-header) {
    padding-top: 96px;
}

/* Dashboard/wallet/profile/utility-credits pages render a compact header (no category nav). */
body:not(.no-fixed-header)[data-page="dashboard"],
body:not(.no-fixed-header)[data-page="wallet"],
body:not(.no-fixed-header)[data-page="profile"],
body:not(.no-fixed-header)[data-page="utility-credits"] {
    padding-top: 76px;
}

/* Service pages (except utility credits): give more top room under the fixed header */
body:not(.no-fixed-header)[data-page="home"],
body:not(.no-fixed-header)[data-page="mobile"],
body:not(.no-fixed-header)[data-page="dth"],
body:not(.no-fixed-header)[data-page="electricity"],
body:not(.no-fixed-header)[data-page="broadband"],
body:not(.no-fixed-header)[data-page="cylinder"],
body:not(.no-fixed-header)[data-page="fasttag"],
body:not(.no-fixed-header)[data-page="giftcard"],
body:not(.no-fixed-header)[data-page="water"] {
    padding-top: 140px;
}

/* Footer nav pages (contact/policy/faq/etc.) */
body:not(.no-fixed-header)[data-page="contact-us"],
body:not(.no-fixed-header)[data-page="consumer-complaint"],
body:not(.no-fixed-header)[data-page="support-chat"],
body:not(.no-fixed-header)[data-page="refund-policy"],
body:not(.no-fixed-header)[data-page="faq"],
body:not(.no-fixed-header)[data-page="terms"],
body:not(.no-fixed-header)[data-page="privacy"],
body:not(.no-fixed-header)[data-page="site-map"] {
    padding-top: 120px;
}

@media (max-width: 640px) {
    body:not(.no-fixed-header) {
        padding-top: 92px;
    }

    body:not(.no-fixed-header)[data-page="dashboard"],
    body:not(.no-fixed-header)[data-page="wallet"],
    body:not(.no-fixed-header)[data-page="profile"],
    body:not(.no-fixed-header)[data-page="utility-credits"] {
        padding-top: 60px;
    }

    body:not(.no-fixed-header)[data-page="home"],
    body:not(.no-fixed-header)[data-page="mobile"],
    body:not(.no-fixed-header)[data-page="dth"],
    body:not(.no-fixed-header)[data-page="electricity"],
    body:not(.no-fixed-header)[data-page="broadband"],
    body:not(.no-fixed-header)[data-page="cylinder"],
    body:not(.no-fixed-header)[data-page="fasttag"],
    body:not(.no-fixed-header)[data-page="giftcard"],
    body:not(.no-fixed-header)[data-page="water"] {
        padding-top: 120px;
    }

    body:not(.no-fixed-header)[data-page="contact-us"],
    body:not(.no-fixed-header)[data-page="consumer-complaint"],
    body:not(.no-fixed-header)[data-page="support-chat"],
    body:not(.no-fixed-header)[data-page="refund-policy"],
    body:not(.no-fixed-header)[data-page="faq"],
    body:not(.no-fixed-header)[data-page="terms"],
    body:not(.no-fixed-header)[data-page="privacy"],
    body:not(.no-fixed-header)[data-page="site-map"] {
        padding-top: 110px;
    }
}

/* Admin pages: tighter top offset and full-height fill */
body.admin-dashboard-body {
    padding-top: 76px;
}
body.admin-dashboard-body .admin-main,
body.admin-dashboard-body .admin-console {
    min-height: calc(100vh - 76px);
    margin-top: 0;
}

/* Admin pages using the support layout should be full-width so sidebar can sit flush. */
body.admin-dashboard-body .admin-support-main {
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Global layout rule adds padding to all sections; explicitly remove it for the admin console wrapper. */
body.admin-dashboard-body section.admin-console {
    padding-left: 0;
    padding-right: 0;
}

/* Admin console pages: don't center the support board; keep it flush like dashboard. */
body.admin-dashboard-body .support-console--admin .support-console-board,
body.admin-dashboard-body .support-console-board {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Admin layout: ensure main fills viewport and scrolls internally */
body.admin-dashboard-body .admin-console {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    align-items: stretch;
}
body.admin-dashboard-body .admin-console > * {
    min-height: 100%;
}
body.admin-dashboard-body .admin-main,
body.admin-dashboard-body main {
    min-height: calc(100vh - 76px);
}

@media (max-width: 600px) {
    body.admin-dashboard-body .admin-console {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* Admin request: hide sidebar on mobile only. */
    body.admin-dashboard-body .admin-sidebar {
        display: none !important;
    }
}

/* Refund/gifts simple admin wrappers */
.admin-wrapper {
    min-height: calc(100vh - 140px);
}

/* Admin and other pages that should not render public header/footer */
body.no-fixed-header {
    padding-top: 0 !important;
}
body.no-fixed-header .site-header,
body.no-fixed-header .ak-footer {
    display: none !important;
}

.header-primary {
    padding: 0.4rem 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.user-menu {
    position: relative;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.7rem 0.25rem 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.user-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.user-initials {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0a1f4d;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
}

.user-name {
    font-size: 0.88rem;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-caret {
    font-size: 0.65rem;
    opacity: 0.7;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 220px;
    background: #fff;
    color: #0a1f4d;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 30px 80px rgba(5, 21, 71, 0.25);
    border: 1px solid rgba(7, 24, 85, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 25;
}

.user-dropdown form {
    margin: 0;
}

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

.user-meta {
    margin-bottom: 0.75rem;
}

.user-meta p {
    font-size: 0.8rem;
    color: rgba(10, 31, 77, 0.6);
    margin-bottom: 0.15rem;
}

.user-meta strong {
    font-size: 0.95rem;
}

.user-link {
    display: block;
    padding: 0.55rem 0.25rem;
    font-size: 0.9rem;
    color: #0a1f4d;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-link:hover,
.user-link:focus-visible {
    background: rgba(7, 24, 85, 0.08);
    border-color: rgba(7, 24, 85, 0.2);
}

.user-link.logout {
    width: 100%;
    text-align: left;
    color: #c02626;
}

.user-link.logout:hover {
    background: rgba(192, 38, 38, 0.08);
    border-color: rgba(192, 38, 38, 0.2);
}

.mobile-login-icon {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.25s ease, transform 0.25s ease;
}

.mobile-login-icon svg {
    width: 18px;
    height: 18px;
}

.mobile-login-icon:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand .logo {
    /* Circular logo (DP-style). Keep size responsive but clipped to a circle */
    width: clamp(34px, 3.2vw, 46px);
    height: clamp(34px, 3.2vw, 46px);
    background: #fff; /* white background so logo stands out */
    font-weight: 700;
    border-radius: 9999px; /* full circle */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(2, 10, 58, 0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid rgba(2,10,58,0.06);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(2,10,58,0.02));
    overflow: hidden;
}

/* Brand image fills the box and keeps original colors; add image shadow for depth */
.brand .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* show the whole logo without cropping */
    border-radius: 50%; /* circular image */
    display: block;
    filter: none !important; /* keep original logo colors */
    background-color: #fff; /* ensure any transparency shows white */
    box-shadow: 0 6px 16px rgba(2,10,58,0.14);
}

/* 3D / polished title styling for the brand */
.brand strong {
    display: block;
}

.brand-name {
    /* Fixed brand title size across devices per request */
    font-size: 1.8rem !important;
    font-weight: 900;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #ffffff 0%, #e6f5ff 55%, #c6e7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 26px rgba(2,10,58,0.34);
    line-height: 1.02;
}

.brand-sub {
    display: block;
    font-size: 1rem !important; /* keep subtitle uniform on all devices */
    color: rgba(255,255,255,0.95);
    margin-top: 6px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Make main headings match the brand title size so titles stay consistent */
.service-hero h1,
.section-heading h2 {
    font-size: 1.8rem !important;
    line-height: 1.08;
}

/* Responsive: scale down logo and brand text on small screens */
@media (max-width: 640px) {
    .brand .logo {
        width: 48px;
        height: 48px;
        padding: 4px;
        /* keep circular on mobile too */
        border-radius: 9999px;
        box-shadow: 0 6px 18px rgba(2,10,58,0.14);
        overflow: hidden;
    }
    .brand .logo img {
        /* ensure full logo is visible on mobile */
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
        display: block;
        background-color: #fff;
    }
    .brand-name { font-size: 1.8rem; }
    .brand-sub { font-size: 1rem; }
}

.brand strong {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.brand span {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.25rem;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: #fff;
}

.header-secondary {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.3rem 5vw 0.45rem;
}

.mobile-menu-actions {
    display: none;
}

.category-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-weight: 600;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    white-space: nowrap;
}

.category-nav::-webkit-scrollbar {
    display: none;
}

.category-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.32rem;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.25s ease;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.category-chip.active,
.category-chip:hover {
    color: #fff;
}

.chip-label {
    white-space: nowrap;
    font-size: 0.74rem;
    opacity: 0.9;
    transition: opacity 0.25s ease;
}

@media (min-width: 1025px) {
    .category-nav {
        gap: 0;
        justify-content: space-between;
        padding-left: 2rem;
        padding-right: 2rem;
        overflow: visible;
    }

    .category-chip {
        flex: 1 1 auto;
        max-width: 120px;
    }
}


.category-chip .icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.0);
    border: 1px solid rgba(255, 255, 255, 0.0);
    box-shadow: inset 0 0 0 1px rgba(1, 11, 42, 0.12);
    transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
    opacity: 0.99;
}

.category-chip .icon img,
.category-chip .icon svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.category-chip .icon svg {
    fill: currentColor;
}

.category-chip.active .icon,
.category-chip:hover .icon {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(3, 27, 78, 0.3);
    border-color: transparent;
    transform: translateY(-2px);
    opacity: 1;
}

.category-chip.active .icon img,
.category-chip.active .icon svg,
.category-chip:hover .icon img,
.category-chip:hover .icon svg {
    filter: brightness(0) saturate(100%) invert(14%) sepia(32%) saturate(2300%) hue-rotate(205deg) brightness(95%) contrast(95%);
    opacity: 1;
}

.category-chip.active .chip-label {
    opacity: 1;
}

.support-link {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Admin notification bell uses the same slot as Support link. */
.header-bell {
    border: 0;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.support-link:hover {
    text-decoration: none;
}

.cta-btn {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 25px rgba(2, 10, 58, 0.25);
}

.cta-btn .cta-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cta-btn .cta-icon svg {
    width: 18px;
    height: 18px;
}

.cta-btn .cta-text {
    letter-spacing: 0.02em;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 32px rgba(2, 10, 58, 0.35);
}

@media (max-width: 1024px) {
    .header-actions .support-link,
    .header-actions .cta-btn {
        display: none;
    }

    /* Keep the admin bell visible even when Support link is hidden. */
    .header-actions .header-bell {
        display: inline-flex;
    }

    .user-pill {
        padding: 0.26rem 0.7rem 0.26rem 0.28rem;
        gap: 0.35rem;
        border-width: 1px;
    }

    .user-initials {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }

    .user-name {
        font-size: 0.78rem;
        max-width: 120px;
    }

    .mobile-login-icon {
        display: inline-flex;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-actions .support-link {
        text-align: center;
        font-size: 0.92rem;
    }

    .mobile-menu-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .mobile-menu-actions .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.75rem 0.5rem;
    }

    .mobile-menu-actions .mobile-nav .mobile-nav-link {
        display: block;
        padding: 0.6rem 0.9rem;
        border-radius: 6px;
        background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.18s ease, transform 0.12s ease;
    }

    .mobile-menu-actions .mobile-nav .mobile-nav-link:hover {
        background: rgba(255,255,255,0.06);
        transform: translateY(-1px);
    }
}

@media (max-width: 768px) {
    .user-pill {
        padding-right: 0.65rem;
    }

    .user-dropdown {
        min-width: min(260px, 90vw);
        right: 0;
    }
}

/* Ensure mobile menu overlays the nav and header content when open */
.mobile-menu-actions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 250; /* higher than header (100) and other page content */
    background: linear-gradient(120deg, rgba(3,27,78,0.98), rgba(12,44,106,0.96));
    box-shadow: 0 20px 50px rgba(2,10,58,0.35);
    transition: transform 0.22s ease, opacity 0.22s ease, max-height 0.3s ease, padding 0.25s ease;
    transform-origin: top;
    transform: translateY(-6px) scaleY(0.99);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    padding: 0 5vw;
}
.mobile-menu-actions.open {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    max-height: 320px;
    pointer-events: auto;
    padding-top: 0.85rem;
    padding-bottom: 1rem;
    overflow: auto;
}

/* Lock body scroll when mobile menu is open */
body:has(.mobile-menu-actions.open) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Alternative for browsers without :has() support */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* scrim that darkens page behind mobile menu */
.mobile-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 240; /* below the menu but above page content */
    background: rgba(2, 10, 30, 0.45);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.mobile-menu-scrim.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* mobile close button */
.mobile-menu-actions .mobile-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.15rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    z-index: 260;
}
@media (max-width: 640px) {
    .mobile-menu-actions .mobile-close {
        top: 6px;
        right: 10px;
        font-size: 1.05rem;
    }
}

/* Compact dropdown style on narrow screens (example-like) */
@media (max-width: 640px) {
    /* compact dropdown is fixed and hidden by default, only shown when .open */
    .mobile-menu-actions {
        position: fixed;
        left: auto;
        right: 12px;
        width: 260px;
        top: 56px; /* fallback if JS positioning fails */
        background: linear-gradient(120deg, #031b4e, #0c2c6a); /* match header */
        color: #fff;
        border-radius: 6px;
        box-shadow: 0 8px 28px rgba(2,10,58,0.18);
        padding: 8px;
        max-height: none;
        transform: translateY(-6px) scaleY(0.99);
        opacity: 0;
        display: none;
        overflow: visible; /* avoid internal scrolling */
        z-index: 9999;
    }
    .mobile-menu-actions.open {
        display: block;
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
    .mobile-menu-actions .mobile-close {
        color: #fff;
    }
    .mobile-nav-inner { padding: 6px 4px; }
    .mobile-nav-title {
        font-size: 0.95rem;
        margin: 8px 12px;
        color: #fff;
        font-weight: 800;
    }
    .mobile-nav-list { list-style: none; margin: 0; padding: 0; }
    .mobile-nav-list li { border-top: 1px solid rgba(255,255,255,0.06); }
    .mobile-nav-list li:first-child { border-top: none; }
    .mobile-nav-link {
        display: block;
        padding: 10px 12px;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        background: transparent;
    }
    .mobile-nav-link:hover { background: rgba(255,255,255,0.03); }
    .mobile-menu-scrim { display: none; }
}

.cta-btn:hover .cta-icon {
    background: #fff;
    transform: translateY(-1px);
}

.btn.primary,
.btn.secondary,
.btn.ghost {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn.secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
}

.btn.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.35);
}

.btn.primary:hover,
.btn.ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(2, 10, 58, 0.15);
}

@keyframes floatPulse {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0s);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-delay-1 {
    --delay: 0.1s;
}

.animate-delay-2 {
    --delay: 0.2s;
}

.animate-delay-3 {
    --delay: 0.3s;
}

.hero {
    padding: 4rem 5vw 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.form-card,
.info-card,
.plan-panel {
    background-size: 200% 200%;
    animation: gradientFlow 16s ease infinite;
    position: relative;
    overflow: hidden;
}

.support-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    align-self: stretch;
    height: 100%;
}

.info-card.is-hidden {
    display: none;
}

.plan-panel {
    display: none;
    border: 1px solid #dfe4fb;
    border-radius: 24px;
    padding: 1.75rem 2rem;
    box-shadow: 0 20px 45px rgba(5, 25, 80, 0.08);
    background: #fff;
    width: 100%;
    margin-bottom: 1.5rem;
    flex: 1;
    flex-direction: column;
    height: 100%;
    max-height: 560px;
    overflow: hidden;
}

.plan-panel.is-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    padding: 1rem 1.25rem 1.5rem !important;
    overflow-y: auto !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
}

.plan-panel-scrim {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 58, 0.55);
    backdrop-filter: blur(2px);
    z-index: 9998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.plan-panel-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.plan-panel.is-visible {
    display: flex;
}

/* Mobile: Make plan panel full screen overlay when visible */
@media (max-width: 768px) {
    .plan-panel.is-visible {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
        padding: 1rem !important;
        overflow-y: auto !important;
        background: #fff !important;
        flex-direction: column !important;
    }
    
    .plan-panel.is-visible .plan-panel-scrim {
        position: fixed;
        inset: 0;
        background: rgba(2, 10, 58, 0.55);
        backdrop-filter: blur(2px);
        z-index: 9998;
        opacity: 1;
        pointer-events: auto;
    }
}


.plan-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.plan-panel-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(11, 20, 55, 0.7);
}

.plan-panel-close {
    border: none;
    background: rgba(11, 20, 55, 0.07);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.plan-panel-close:hover {
    background: rgba(11, 20, 55, 0.16);
}

.plan-panel-body {
    margin-top: 1.25rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
}

.plan-panel-loading {
    font-size: 0.95rem;
    color: rgba(11, 20, 55, 0.75);
}

.bill-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.bill-summary-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(8, 24, 74, 0.08);
    box-shadow: 0 12px 28px rgba(6, 12, 50, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bill-summary-card span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(8, 24, 74, 0.65);
}

.bill-summary-card strong {
    font-size: 1.3rem;
    color: #0b1c4e;
}

.bill-summary-note {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: 0.9rem;
    background: rgba(14, 118, 255, 0.08);
    color: #0a2a66;
    border: 1px solid rgba(14, 118, 255, 0.25);
}

.bill-ticket {
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(7, 21, 88, 0.08);
    background: linear-gradient(135deg, rgba(252, 252, 255, 0.95), rgba(241, 247, 255, 0.95));
    box-shadow: 0 24px 40px rgba(8, 22, 66, 0.08);
}

.bill-ticket-empty {
    border: 1px dashed rgba(7, 21, 88, 0.18);
    box-shadow: none;
    background: rgba(244, 248, 255, 0.8);
}

.bill-ticket-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bill-ticket-label {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(10, 22, 68, 0.7);
    font-weight: 700;
}

.bill-ticket-placeholder {
    margin: 0;
    color: rgba(9, 15, 53, 0.7);
    font-size: 0.95rem;
}

.bill-ticket-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bill-ticket-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.bill-ticket-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    background: rgba(16, 83, 199, 0.08);
    color: #0b2b6f;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bill-ticket-item {
    display: flex;
    flex-direction: column;
}

.bill-ticket-item-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(11, 25, 66, 0.55);
    margin-bottom: 0.15rem;
}

.bill-ticket-item strong {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.25rem;
    color: #061642;
}

.bill-ticket-value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.bill-ticket-chip {
    margin-left: 0;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 88, 88, 0.12);
    color: #b01218;
    border: 1px solid rgba(255, 88, 88, 0.35);
}

.bill-ticket-apply {
    align-self: flex-start;
}

.bill-ticket-illustration {
    width: 150px;
    flex-shrink: 0;
    border-radius: 1.25rem;
    background: rgba(10, 22, 68, 0.04);
    border: 1px solid rgba(10, 22, 68, 0.08);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bill-ticket-illustration svg {
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .bill-ticket {
        flex-direction: column;
    }

    .bill-ticket-illustration {
        width: 100%;
        order: -1;
    }
}
.plan-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #dfe4fb;
    margin-bottom: 1rem;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 87, 208, 0.3) transparent;
    flex-wrap: nowrap !important;
}

.plan-tabs::-webkit-scrollbar {
    height: 6px;
}

.plan-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.plan-tabs::-webkit-scrollbar-thumb {
    background: rgba(11, 87, 208, 0.3);
    border-radius: 3px;
}

.plan-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 87, 208, 0.5);
}

.plan-tab {
    background: transparent;
    border: none;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: rgba(11, 20, 55, 0.6);
    padding: 0.5rem 0.75rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.plan-tab.active {
    color: var(--navy);
    border-color: #0b57d0;
}

.plan-tab-panels {
    display: block;
}

.plan-table-wrapper {
    display: none;
}

.plan-table-wrapper.active {
    display: block;
}

.plan-result-table {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.plan-result-table-empty {
    border: 1px dashed #d6dbf5;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: rgba(11, 20, 55, 0.65);
}



.plan-result-row {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e4e8fb;
    padding: 0.75rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 8px 18px rgba(8, 20, 66, 0.04);
}

.plan-row-top {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr minmax(100px, auto);
    align-items: center;
    gap: 0.8rem;
}

.plan-price-block {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy);
}

.plan-price-symbol {
    font-size: 1.1rem;
    font-weight: 600;
}

.plan-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 0;
}

.plan-chip-list:empty {
    display: none;
}

.plan-chip {
    padding: 0.3rem 0.55rem 0.3rem 1.8rem;
    border-radius: 10px;
    border: 1px solid #e3e7fb;
    font-size: 0.75rem;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    min-width: 90px;
    background: rgba(2, 10, 58, 0.03);
    position: relative;
}

.plan-chip::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    background: #0b57d0;
    border-radius: 8px;
    opacity: 0.85;
}

.plan-chip[data-icon="data"]::before {
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 6c0-2.21 4.03-4 9-4s9 1.79 9 4v12c0 2.21-4.03 4-9 4s-9-1.79-9-4V6zm9 14c4.42 0 7-1.5 7-2s-2.58-2-7-2-7 1.5-7 2 2.58 2 7 2zm-7-5.35C7.33 13.6 9.99 13 13 13s5.67.6 7 1.65V11c-1.33 1.05-3.99 1.65-7 1.65S7.33 12.05 6 11V14.65zm0-4C7.33 9.6 9.99 9 13 9s5.67.6 7 1.65V7c-1.33 1.05-3.99 1.65-7 1.65S7.33 8.05 6 7V10.65zm7-6.65c-4.42 0-7 1.5-7 2s2.58 2 7 2 7-1.5 7-2-2.58-2-7-2z"/></svg>') center/contain no-repeat;
}

.plan-chip[data-icon="sms"]::before {
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12zm-9-2h2v2h-2zm0-8h2v6h-2z"/></svg>') center/contain no-repeat;
}

.plan-chip[data-icon="voice"]::before {
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3c-1.66 0-3 1.34-3 3v6c0 1.66 1.34 3 3 3s3-1.34 3-3V6c0-1.66-1.34-3-3-3zm-1 3a1 1 0 012 0v6a1 1 0 01-2 0V6zm9 3h-2a7 7 0 01-14 0H2a9 9 0 0018 0z"/></svg>') center/contain no-repeat;
}

.plan-chip strong {
    color: var(--navy);
    font-size: 0.95rem;
}

.plan-chip small {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: rgba(11, 20, 55, 0.55);
}

.plan-chip.muted {
    border-style: dashed;
}


.plan-row-desc {
    font-size: 0.82rem;
    color: rgba(11, 20, 55, 0.72);
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-row-bottom {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.plan-row-bottom .plan-row-desc {
    flex: 1;
}

.plan-validity-block {
    text-align: right;
}

.plan-validity-inline {
    min-width: 96px;
}

.plan-validity-block span {
    display: block;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(11, 20, 55, 0.55);
}

.plan-validity-block strong {
    font-size: 1rem;
    color: var(--navy);
}


.plan-action-block {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}

.btn.mini {
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 999px;
    background: #0b142f;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn.mini:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn.mini:disabled,
.btn.mini[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    html {
        font-size: 100%;
    }

    .plan-row-top {
        grid-template-columns: 1fr;
    }

    .plan-row-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .plan-action-block,
    .plan-validity-block {
        text-align: left;
        width: 100%;
    }
}

.plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.plan-table thead th {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eef0fb;
    color: rgba(11, 20, 55, 0.8);
}

/* Ensure table headers remain visible when scrolling plan results on small screens */
@media (max-width: 768px) {
    .plan-panel-body {
        -webkit-overflow-scrolling: touch;
    }

    /* If a real table is used for plan lists, keep its header sticky below the tabs */
    .plan-table thead th {
        position: sticky;
        top: 48px; /* leaves space for the sticky .plan-tabs above */
        background: #fff;
        z-index: 3;
    }

    /* If tabs are present inside the scroll area, ensure they stay above table header */
    .plan-panel-body .plan-tabs {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #fff;
        margin: 0;
        padding: 0.25rem 0 0.5rem;
    }
    /* Make actual tables horizontally scrollable inside the panel while keeping the header sticky
       Approach: render the outer table as block (so it can overflow), keep thead/tbody as table
       so column layout remains consistent. This ensures horizontal scrolling and that thead
       position:sticky moves together with the table content. */
    .plan-panel-body .plan-table {
        display: block;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        /* allow the table to grow wider than the container when needed */
        width: 100%;
    }

    .plan-panel-body .plan-table thead,
    .plan-panel-body .plan-table tbody,
    .plan-panel-body .plan-table tr {
        display: table;
        width: auto;
        table-layout: fixed;
    }

    .plan-panel-body .plan-table thead th {
        position: sticky;
        top: 48px; /* keeps header below the sticky tabs */
        background: #fff;
        z-index: 3;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .plan-panel {
        padding: 1.1rem 1rem;
        border-radius: 18px;
        max-height: none;
        width: 100%;
    }

    .plan-panel-body {
        padding-right: 0;
        overflow-x: hidden;
    }

    .plan-tabs {
        position: sticky;
        top: 0;
        gap: 0.4rem;
        border-bottom: 1px solid #dfe4fb;
        overflow-x: auto !important;
        overflow-y: hidden;
        padding: 0.35rem 0.25rem 0.45rem;
        background: #fff;
        z-index: 5;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    .plan-tab {
        flex: none;
        border: 1px solid #dfe4fb;
        border-radius: 999px;
        padding: 0.5rem 0.9rem;
        text-align: center;
        white-space: nowrap;
        min-width: 120px;
    }

    .plan-tab.active {
        border-color: #0b57d0;
        background: rgba(11, 87, 208, 0.1);
        color: var(--navy);
        box-shadow: 0 8px 20px rgba(11, 87, 208, 0.18);
    }
}

.plan-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f2f4ff;
}

.plan-table tbody tr:last-child td {
    border-bottom: none;
}

.plan-table tbody tr:hover {
    background: rgba(0, 179, 255, 0.05);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 10% auto auto 50%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(124, 233, 217, 0.45), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.form-card,
.info-card,
.plan-panel {
    margin-bottom: 0.75rem;
}

.hero p {
    font-size: 1rem;
    color: rgba(11, 20, 55, 0.82);
}

.hero-card {
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(2, 10, 58, 0.08);
    animation: floatPulse 6s ease-in-out infinite;
}

.hero-card ul {
    list-style: none;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-card li {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--navy);
}

.status {
    font-size: 0.85rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
}

.status.live {
    background: rgba(7, 194, 135, 0.2);
    color: #059669;
}

.status.idle {
    background: rgba(255, 174, 0, 0.2);
    color: #b45309;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem;
    border-radius: 14px;
    font-weight: 600;
    border: none;
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.btn.ghost {
    border: 1px solid #d6dbf5;
    color: var(--navy);
}

/* Dashboard */
.dashboard-page {
    padding-top: 1.25rem;
    padding-bottom: 3.5rem;
    padding-left: clamp(0.75rem, 4vw, 2.5rem);
    padding-right: clamp(0.75rem, 4vw, 2.5rem);
    width: min(1360px, 100%);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Dashboard: flush/full-width (no page gutters). */
body[data-page="dashboard"] .dashboard-page {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.dashboard-quick-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Dashboard quick links: match primary/proceed button styling */
body[data-page="dashboard"] .dashboard-quick-links .btn.ghost {
    background: var(--navy);
    color: #fff;
    border: none;
}

body[data-page="dashboard"] .dashboard-quick-links .btn.ghost:hover,
body[data-page="dashboard"] .dashboard-quick-links .btn.ghost:focus-visible {
    box-shadow: 0 12px 24px rgba(2, 10, 58, 0.22);
}

.dashboard-quick-links > a:last-child {
    margin-left: auto;
}

@media (max-width: 640px) {
    body[data-page="dashboard"] .dashboard-quick-links .wallet-icon-btn.btn {
        padding: 0.55rem 0.9rem;
        border-radius: 12px;
        gap: 0.5rem;
    }

    body[data-page="dashboard"] .dashboard-quick-links .wallet-icon-btn .icon-circle {
        width: 26px;
        height: 26px;
        border-radius: 10px;
        font-size: 1rem;
    }

    body[data-page="dashboard"] .dashboard-quick-links .wallet-icon-btn .label {
        font-size: 0.85rem;
    }
}

.wallet-banner {
    background: linear-gradient(120deg, #031944, #0648a5);
    color: #fff;
    border-radius: 2rem;
    padding: 2rem 2.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    align-items: center;
    box-shadow: 0 40px 90px rgba(3, 12, 50, 0.4);
}

.wallet-banner-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wallet-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wallet-avatar {
    width: 60px;
    height: 60px;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.wallet-heading h2 {
    font-size: clamp(1.2rem, 2.3vw, 1.6rem);
    line-height: 1.05;
    margin: 0;
}

.wallet-updated {
    margin: 0;
    opacity: 0.85;
}


.wallet-banner-actions {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.wallet-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.txn-amount {
    font-weight: 700;
}

.txn-amount--credit {
    color: #0f7a52;
}

.txn-amount--debit {
    color: #b02028;
}

.wallet-icon-btn .icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.wallet-banner-actions .btn {
    background: transparent;
    border: none;
    color: #fff;
    box-shadow: none;
    padding: 0.25rem 0.3rem;
    border-radius: 0;
}

.wallet-banner-actions .btn:hover,
.wallet-banner-actions .btn:focus-visible {
    background: transparent;
    opacity: 0.8;
}


.dashboard-alert {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-greeting {
    position: relative;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1.2rem;
    background: linear-gradient(120deg, #f5f8ff, #ecf2ff);
    border: 1px solid rgba(4, 23, 70, 0.08);
    box-shadow: 0 18px 30px rgba(2, 12, 60, 0.08);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.dashboard-greeting strong {
    display: block;
    font-size: 1.05rem;
    color: #041033;
}

.dashboard-greeting p {
    margin: 0.2rem 0 0;
    color: rgba(4, 16, 50, 0.75);
    font-size: 0.9rem;
}

.greeting-dismiss {
    margin-left: auto;
    border: none;
    background: rgba(4, 16, 50, 0.08);
    color: rgba(4, 16, 50, 0.6);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.greeting-dismiss:focus-visible,
.greeting-dismiss:hover {
    background: rgba(4, 16, 50, 0.16);
    color: rgba(4, 16, 50, 0.95);
}

.dashboard-greeting.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.dashboard-empty {
    padding: 1rem;
    border-radius: 0.9rem;
    background: #f4f6fb;
    color: rgba(11, 20, 55, 0.7);
}

.dashboard-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.hero-snapshot {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-snapshot h2 {
    margin: 0.25rem 0 0.35rem;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: #04133d;
}

.hero-subtext {
    margin: 0;
    color: rgba(9, 26, 84, 0.7);
    max-width: 520px;
}

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.hero-highlight-card {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 25px 40px rgba(4, 15, 60, 0.08);
    border: 1px solid rgba(5, 30, 85, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-highlight-card--action {
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
}

.hero-highlight-card--action:focus-visible {
    outline: none;
    border-color: rgba(13, 71, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(13, 71, 255, 0.14), 0 25px 40px rgba(4, 15, 60, 0.08);
}

.hero-highlight-card--action:hover {
    border-color: rgba(13, 71, 255, 0.3);
    box-shadow: 0 30px 50px rgba(4, 15, 60, 0.1);
    transform: translateY(-1px);
}

.hero-highlight-card .label {
    font-size: 0.85rem;
    color: rgba(9, 26, 84, 0.65);
}

.hero-highlight-card strong {
    font-size: 1.15rem;
    color: #04133d;
}

.hero-highlight-card span {
    font-size: 0.85rem;
    color: rgba(9, 26, 84, 0.7);
}


.dashboard-panel-links {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.75rem;
    box-shadow: 0 16px 36px rgba(3, 15, 72, 0.07);
    border: 1px solid rgba(4, 23, 70, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.25rem;
}

.dashboard-panel-links header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.panel-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.panel-link {
    border-radius: 1.2rem;
    border: 1px solid rgba(6, 20, 70, 0.12);
    background: #f8f9ff;
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.panel-link:focus-visible,
.panel-link:hover {
    border-color: rgba(13, 71, 255, 0.35);
    box-shadow: 0 12px 30px rgba(13, 71, 255, 0.18);
    transform: translateY(-2px);
}

.panel-link-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.panel-link-copy strong {
    font-size: 0.95rem;
    color: #04133d;
}

.panel-link-copy small {
    color: rgba(5, 19, 70, 0.6);
    font-weight: 500;
}

.panel-link-arrow {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(5, 19, 70, 0.55);
}

.panel-links-note {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(5, 19, 70, 0.6);
}

.dashboard-panel.is-collapsed {
    display: none;
}

.dashboard-coupons {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.6rem;
    box-shadow: 0 18px 42px rgba(5, 20, 70, 0.08);
    border: 1px solid rgba(4, 23, 70, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.dashboard-coupons header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-coupons header h3 {
    margin: 0.15rem 0 0;
}

.dashboard-coupons header small {
    font-weight: 600;
    color: rgba(5, 19, 70, 0.65);
}

.coupon-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.coupon-chip {
    border-radius: 1.2rem;
    border: 1px solid rgba(6, 20, 70, 0.12);
    padding: 1rem 1.1rem;
    background: linear-gradient(120deg, #f9fbff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.coupon-chip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.coupon-code {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #0a1e55;
}

.coupon-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(45, 90, 255, 0.12);
    color: #1b3ab8;
}

.coupon-chip-meta {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(5, 19, 70, 0.78);
}

.coupon-chip-note {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(5, 19, 70, 0.6);
}

.coupon-chip-countdown {
    margin: 0;
    font-size: 0.85rem;
    color: #1c3faa;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.coupon-chip-countdown small {
    font-size: 0.75rem;
    color: rgba(5, 19, 70, 0.55);
}

.coupon-chip-updated {
    font-size: 0.78rem;
    color: rgba(5, 19, 70, 0.5);
}

.dashboard-hero ul {
    margin-top: 1.5rem;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}


.hero-meta-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.75rem;
    box-shadow: 0 25px 55px rgba(4, 16, 60, 0.12);
    border: 1px solid rgba(5, 16, 60, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-meta-card h3 {
    margin: 0;
}

.hero-meta-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-meta-card li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-meta-card strong {
    font-size: 2rem;
    line-height: 1.1;
}

.hero-meta-card small {
    color: rgba(7, 15, 60, 0.65);
}

.hero-meta-link {
    font-weight: 600;
    color: #0b63f8;
}

.wallet-add-btn {
    gap: 0.4rem;
    font-size: 1rem;
}

.wallet-add-btn span:first-child {
    font-size: 1.3rem;
    line-height: 1;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.dashboard-metrics article {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.5rem;
    box-shadow: 0 10px 50px rgba(9, 20, 70, 0.08);
    border: 1px solid rgba(8, 21, 59, 0.05);
}

.dashboard-metrics .label {
    font-size: 0.9rem;
    color: rgba(11, 20, 55, 0.7);
}

.dashboard-metrics strong {
    display: block;
    font-size: 1.9rem;
    margin-top: 0.6rem;
}

.dashboard-actions header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-actions .action-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.action-card {
    background: #041237;
    color: #fff;
    border-radius: 1.2rem;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 20px 40px rgba(1, 8, 36, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px rgba(1, 8, 36, 0.5);
}

.dashboard-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-panel {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.75rem;
    box-shadow: 0 15px 50px rgba(2, 15, 63, 0.08);
    border: 1px solid rgba(3, 19, 80, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

.dashboard-panel.wide,
.dashboard-panel.panel-full {
    width: 100%;
}

.dashboard-panel header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.panel-list,
.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panel-filter {
    width: 100%;
}

.panel-filter-input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(6, 20, 70, 0.15);
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: rgba(248, 250, 255, 0.6);
}

.panel-filter-input:focus {
    outline: none;
    border-color: rgba(35, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(35, 99, 235, 0.15);
    background: #fff;
}

.panel-filter-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.filter-empty {
    margin-top: -0.75rem;
}

.panel-list li,
.activity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.panel-list strong,
.activity-list strong {
    display: block;
}

.dashboard-panel .btn.ghost {
    color: var(--text);
    border-color: rgba(4, 21, 65, 0.15);
}

.activity-list .status {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status.success {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.status.pending {
    background: rgba(250, 204, 21, 0.16);
    color: #a16207;
}

.status.failed {
    background: rgba(248, 113, 113, 0.18);
    color: #b91c1c;
}

.status-note {
    display: block;
    font-size: 0.75rem;
    color: rgba(6, 20, 70, 0.6);
    margin-top: 0.1rem;
    line-height: 1.3;
}

.tips-panel ul {
    list-style: disc;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.link-button {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-support {
    background: linear-gradient(120deg, #031c5a, #0550a5);
    color: #fff;
    border-radius: 2rem;
    padding: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 35px 60px rgba(2, 12, 48, 0.4);
}

.dashboard-support .support-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.history-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    padding-bottom: 0.5rem;
    border-radius: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 17, 60, 0.25) transparent;
}

/* Admin tables: keep desktop-like rows on all screens (no card conversion, no wrapping).
   Use horizontal scroll inside .history-scroll when space is tight. */
body.admin-dashboard-body .history-scroll table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}
body.admin-dashboard-body .history-scroll th,
body.admin-dashboard-body .history-scroll td {
    white-space: nowrap;
    word-break: normal;
}

body.admin-dashboard-body .table-zoom-stage {
    display: inline-block;
    max-width: none;
}

.history-scroll::-webkit-scrollbar {
    height: 10px;
}

.history-scroll::-webkit-scrollbar-thumb {
    background: rgba(8, 17, 60, 0.25);
    border-radius: 999px;
}

.history-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.history-filters {
    margin: 1rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #f7f9ff;
    border: 1px solid rgba(6, 18, 70, 0.08);
    border-radius: 1.2rem;
    padding: 1rem 1.25rem;
}

.history-filters__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.history-filters__form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(6, 15, 60, 0.75);
}

.history-filters__form input {
    border: 1px solid rgba(6, 15, 60, 0.15);
    border-radius: 0.9rem;
    padding: 0.55rem 0.85rem;
    min-width: 220px;
    font-size: 0.95rem;
}

.history-filter-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.history-filter-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: rgba(6, 15, 60, 0.75);
}

.history-filter-meta strong {
    font-size: 1.1rem;
    color: var(--navy);
}

.history-filter-empty {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
}

.history-filter-empty[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .admin-panel table {
        font-size: 0.82rem;
    }

    .admin-panel th,
    .admin-panel td {
        padding: 0.55rem 0.3rem;
    }

    .utility-status-select {
        max-width: 150px;
    }

}

@media (max-width: 680px) {
    .admin-panel {
        padding: 1rem 0.75rem;
    }


    .admin-conversation .chat-bubble {
        max-width: 80%;
        padding: 0.95rem 1.1rem;
        border-radius: 1rem;
        background: #f2f5ff;
        color: #030b2c;
        box-shadow: 0 15px 30px rgba(5, 7, 34, 0.12);
    }

    .admin-conversation .chat-bubble-user {
        background: linear-gradient(135deg, #5d5bff, #4f84ff);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 0.25rem;
    }

    .admin-conversation .chat-bubble-admin {
        background: #ffffff;
        border: 1px solid rgba(3, 14, 52, 0.08);
    }
    .admin-panel table {
        font-size: 0.65rem;
    }

    .admin-panel th,
    .admin-panel td {
        padding: 0.32rem 0.18rem;
    }

    .admin-panel .history-scroll {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
        padding-left: 0;
        padding-right: 0;
    }

    .history-scroll {
        overflow-x: auto;
    }

    .utility-copy-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .utility-payment-ref strong {
        word-break: break-all;
    }

    .utility-status-select {
        max-width: 110px;
        font-size: 0.6rem;
    }

    .utility-status-control [data-utility-status-updated] {
        font-size: 0.5rem;
    }

    .history-filters__form {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    .history-filters__form label {
        flex: 1 1 0;
        min-width: 0;
    }

    .history-filters__form input {
        min-width: 0;
        width: 100%;
    }

    .history-filter-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: flex-end;
    }
}

.history-scroll--rows {
    max-height: clamp(360px, calc(10 * 3.25rem), 520px);
    overflow-y: auto;
    padding-bottom: 0.25rem;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 17, 60, 0.25) transparent;
}

.wallet-settlements-panel {
    height: 100%;
}

.wallet-settlements-scroll {
    max-height: none;
    height: calc(100vh - 240px);
    overflow: auto;
}

.wallet-settlements-scroll .history-table {
    width: 100%;
    min-width: 960px;
}

.history-scroll--rows::-webkit-scrollbar {
    width: 10px;
}

.history-scroll--rows::-webkit-scrollbar-thumb {
    background: rgba(8, 17, 60, 0.25);
    border-radius: 999px;
}

.history-scroll--rows::-webkit-scrollbar-track {
    background: transparent;
}

.history-table {
    width: max(100%, 760px);
    border-collapse: collapse;
    min-width: 760px;
    cursor: pointer;
    position: relative;
}

.table-action-btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    min-width: 120px;
}

.history-table th,
.history-table td {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(6, 20, 70, 0.08);
    white-space: nowrap;
}

.history-table th {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(6, 20, 70, 0.08);
    white-space: nowrap;
}

.history-table tbody tr:hover {
    background: rgba(3, 12, 60, 0.02);
}

[data-admin-utility-table] {
    min-width: 1160px;
    width: max(100%, 1160px);
}

[data-admin-wallet-table] {
    min-width: 780px;
    width: max(100%, 780px);
}

.utility-remarks-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.utility-remarks-input {
    width: 100%;
    max-width: 240px;
    padding: 0.45rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(5, 13, 60, 0.2);
    background: #fff;
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.utility-remarks-input:focus {
    outline: none;
    border-color: rgba(44, 85, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(44, 85, 255, 0.15);
}

.utility-remarks-input[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.utility-remarks-status {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(5, 13, 60, 0.55);
}

.utility-remarks-status-success {
    color: #1a7f5a;
}

.utility-remarks-status-error {
    color: #c63d3d;
}

.utility-remarks-status-pending {
    color: #b07400;
}

@media (max-width: 900px) {
    .history-scroll--rows {
        max-height: clamp(360px, calc(100vh - 260px), 640px);
    }

    .history-scroll {
        padding-bottom: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 680px) {
    .history-scroll--rows {
        max-height: clamp(260px, calc(100vh - 200px), 520px);
    }

    .history-scroll {
        padding-bottom: 1rem;
        padding-right: 1rem;
    }
}

.detail-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(7, 12, 60, 0.55);
    margin-bottom: 0.2rem;
    display: block;
    font-size: 0.75rem;
}

.detail-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.btn-xs {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 999px;
}

@media (max-width: 1024px) {
    .dashboard-page {
        gap: 2.25rem;
    }
    .dashboard-panel,
    .hero-meta-card {
        padding: 1.6rem;
    }
    .dashboard-actions .action-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-hero {
        grid-template-columns: 1fr;
    }
    .dashboard-support {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dashboard-page {
        padding-top: 0.4rem;
        padding-left: 0;
        padding-right: 0;
        gap: 1rem;
    }
    .wallet-banner {
        grid-template-columns: minmax(0, 1fr) auto;
        text-align: left;
        padding: 1rem 1.15rem;
        border-radius: 1.1rem;
        gap: 0.55rem;
    }
    .wallet-banner-info {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.4rem;
    }
    .wallet-heading {
        flex-direction: row;
        gap: 0.6rem;
        align-items: center;
    }
    .wallet-avatar {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .wallet-heading h2 {
        font-size: 1.2rem;
        line-height: 1.02;
    }
    .wallet-updated {
        font-size: 0.8rem;
        text-align: left;
    }
    .wallet-banner-actions {
        width: auto;
        flex-direction: row;
        justify-content: flex-end;
        gap: 0.2rem;
        align-self: flex-start;
    }
    .wallet-banner-actions .btn {
        width: auto;
        min-height: auto;
        padding: 0.15rem;
    }
    .wallet-banner-actions .label {
        display: none;
    }
    .wallet-illustration {
        display: none;
    }
    .hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero-highlight-card {
        text-align: center;
    }
    .hero-meta-card {
        text-align: center;
    }
    .wallet-add-btn {
        width: 100%;
    }
    .dashboard-metrics {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    .dashboard-support .support-actions {
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .hero-highlights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-panels {
        gap: 1.1rem;
    }

    .dashboard-panel {
        padding: 1.5rem;
    }
    .panel-list li,
    .activity-list li {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-actions header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .hero-meta-card,
    .dashboard-panel {
        border-radius: 1.2rem;
    }
    .dashboard-panel header {
        flex-direction: column;
        align-items: flex-start;
    }
    .history-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .detail-row-flex {
        flex-direction: column;
        gap: 0.75rem;
    }
    .detail-actions {
        margin-left: 0;
    }
}

/* Tighter mobile scale for dashboard/wallet/profile to fit more on screen */
@media (max-width: 640px) {
    body[data-page="dashboard"] .dashboard-page,
    body[data-page="wallet"] .wallet-page,
    body[data-page="profile"] .profile-page {
        transform: none;
        transform-origin: initial;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 1.25rem;
    }
}

@media (max-width: 520px) {
    body[data-page="dashboard"],
    body[data-page="wallet"],
    body[data-page="profile"] {
        font-size: 0.95rem;
    }

    /* Profile: keep card header copy on one line */
    body[data-page="profile"] .profile-card header {
        flex-wrap: nowrap;
        align-items: center;
    }
    body[data-page="profile"] .profile-card header > div {
        min-width: 0;
    }
    body[data-page="profile"] .profile-card .label {
        white-space: nowrap;
        font-size: 0.62rem;
        padding: 0.18rem 0.65rem;
    }
    body[data-page="profile"] .profile-card h3,
    body[data-page="profile"] .ak-accordion__summary-main h3 {
        font-size: 1.05rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-page="profile"] .profile-card header p,
    body[data-page="profile"] .ak-accordion__summary-main p {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-page="profile"] .ak-accordion__cta {
        pointer-events: none;
        white-space: nowrap;
        font-size: 0.88rem;
        padding: 0.55rem 0.9rem;
    }

    /* Profile forms: slightly smaller labels/notes */
    body[data-page="profile"] .profile-form label {
        font-size: 0.85rem;
    }
    body[data-page="profile"] .profile-form input,
    body[data-page="profile"] .profile-form select,
    body[data-page="profile"] .profile-form textarea {
        font-size: 0.95rem;
    }
    body[data-page="profile"] .form-note {
        font-size: 0.85rem;
    }

    /* Wallet load modal: keep key labels one-line */
    .wallet-load-tab {
        font-size: 0.9rem;
        padding: 0.4rem 0.85rem;
        white-space: nowrap;
    }
    .wallet-load-panel h3 {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wallet-load-modal .floating-field label,
    .wallet-load-modal .floating-field small {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dashboard: keep common headings compact */
    body[data-page="dashboard"] .hero-snapshot h2 {
        font-size: 1.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-page="dashboard"] .panel-link-copy strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 640px) {
    body[data-page="dashboard"],
    body[data-page="wallet"],
    body[data-page="profile"] {
        overflow-x: hidden;
        font-size: 90%;
    }
}

.hero-stats {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.hero-stats div {
    background: #fff;
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    border: 1px solid #e5e7f2;
}

.hero-stats strong {
    display: block;
    font-size: 1.4rem;
}

.services-overview,
.trust {
    padding: 3rem 5vw;
}

.section-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.section-heading h2 {
    font-size: 2rem;
    color: var(--navy);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.service-card {
    border: 1px solid #e0e5fb;
    border-radius: 22px;
    padding: 1.5rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(238, 242, 255, 0.9));
    box-shadow: 0 20px 50px rgba(2, 10, 58, 0.06);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 70px rgba(2, 10, 58, 0.15);
}

.service-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;
    width: 60%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.55), transparent);
    transform: rotate(15deg);
    transition: transform 0.5s ease;
}

.service-card:hover::after {
    transform: translateX(260%) rotate(15deg);
}

.service-card .icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15, 47, 123, 0.08), rgba(0, 138, 255, 0.08));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: inset 0 0 0 1px rgba(15, 47, 123, 0.05);
}

.service-card .icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.trust {
    background: #fff;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.trust-grid article {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
}

.rating-section {
    padding: 2rem 5vw 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.ad-slot,
.rating-card {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    border: 1px solid #e5e7f2;
    box-shadow: 0 20px 45px rgba(2, 10, 58, 0.05);
    text-align: center;
}

.ad-slot {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: rgba(11, 20, 55, 0.6);
}

.rating-card .score {
    font-size: 3rem;
    color: var(--navy);
    margin: 0.5rem 0 0.25rem;
}

.contact {
    padding: 3rem 5vw 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.contact-card,
.contact-info {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #e5e7f2;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(2, 10, 58, 0.04);
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #ced3eb;
    font: inherit;
}

.btn.primary {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

.wallet-banner-actions .btn.primary,
.wallet-banner-actions .btn.ghost {
    background: transparent;
    border: none;
    padding: 0.25rem;
    border-radius: 0;
    box-shadow: none;
}

.wallet-banner-actions .btn.primary:hover,
.wallet-banner-actions .btn.ghost:hover,
.wallet-banner-actions .btn.primary:focus-visible,
.wallet-banner-actions .btn.ghost:focus-visible {
    background: transparent;
    box-shadow: none;
    opacity: 0.8;
}

.site-footer {
    background: #fff;
    border-top: 1px solid #e1e4f3;
    width: 100%;
    align-self: stretch;
    margin-top: auto;
}

.ak-footer {
    padding: 2rem 5vw 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--text);
    width: min(1360px, 100%);
    margin: 0 auto;
}

.footer-link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem clamp(1rem, 2.5vw, 2.75rem);
    font-weight: 600;
    font-size: 0.95rem;
    order: 2;
    width: 100%;
}

.footer-link-row a {
    color: var(--navy);
    padding: 0.15rem 0.4rem;
    white-space: nowrap;
}

.footer-link-row a.is-active {
    color: #001859;
    font-weight: 700;
    border-bottom: 2px solid currentColor;
}

.footer-details {
    display: contents;
}

.footer-brand h4,
.footer-services-copy h4 {
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.footer-brand p,
.footer-services-copy p {
    color: rgba(11, 20, 55, 0.8);
    max-width: 540px;
}

.footer-brand {
    order: 1;
}

.footer-services-copy {
    order: 3;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8eaf5;
    font-size: 0.95rem;
    order: 4;
}

.payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.payment-badge {
    border: 1px solid #d6dbf5;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    background: #f8f9ff;
}

.payment-badge.upi {
    color: #0b7a4d;
}

.payment-badge.rupay {
    color: #25378c;
}

.payment-badge.visa {
    color: #1a3c8b;
}

.payment-badge.mastercard {
    color: #c2410c;
}

.payment-badge.netbanking {
    color: #0f172a;
}

.info-page {
    max-width: 1360px;
    margin: 0 auto;
    padding: 3rem 5vw 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-hero {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 1px solid rgba(6, 15, 55, 0.08);
    box-shadow: 0 30px 70px rgba(4, 11, 40, 0.07);
}

.info-hero .badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(7, 20, 70, 0.7);
}

.info-hero h1 {
    margin-top: 0.8rem;
    font-size: clamp(2rem, 3vw, 2.6rem);
    color: var(--navy);
}

.info-hero p {
    font-size: 1.05rem;
    color: rgba(15, 23, 42, 0.75);
    line-height: 1.6;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.info-card {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.5rem;
    border: 1px solid rgba(10, 20, 60, 0.08);
    box-shadow: 0 18px 50px rgba(2, 12, 48, 0.08);
}

.info-card h2,
.info-card h3,
.info-card h4 {
    margin-top: 0;
    color: var(--navy);
}

.info-card p,
.info-card li {
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.6;
}

.info-card ul,
.info-card ol {
    padding-left: 1.2rem;
    margin: 0.5rem 0 0;
}

.info-card ul li,
.info-card ol li {
    margin-bottom: 0.35rem;
}

.faq-accordion {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 1px solid rgba(6, 15, 55, 0.08);
    box-shadow: 0 24px 60px rgba(4, 11, 42, 0.08);
}

.faq-accordion__intro h2 {
    margin: 0;
    color: var(--navy);
}

.faq-accordion__intro p {
    margin-top: 0.5rem;
    color: rgba(15, 23, 42, 0.75);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
}

.faq-list details {
    border: 1px solid rgba(6, 18, 70, 0.12);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    background: #f9fbff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.faq-list details[open] {
    background: #fff;
    border-color: rgba(6, 18, 70, 0.25);
    box-shadow: 0 18px 50px rgba(4, 10, 40, 0.12);
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--navy);
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--navy);
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
    transform: rotate(45deg);
}

.faq-list p {
    margin: 0.75rem 0 0;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.6;
}

.info-highlight {
    border-left: 4px solid var(--navy);
    padding-left: 1rem;
    margin-top: 1.25rem;
    font-weight: 600;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.info-table th,
.info-table td {
    border: 1px solid rgba(15, 23, 42, 0.1);
    padding: 0.85rem 1rem;
    text-align: left;
}

.info-table th {
    background: #f4f6ff;
    font-weight: 600;
    color: var(--navy);
}

.site-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.site-map-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-map-grid li {
    margin-bottom: 0.3rem;
}

.cta-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.cta-pill-row .pill {
    border-radius: 999px;
    padding: 0.5rem 1rem;
    background: rgba(4, 12, 70, 0.08);
    font-weight: 600;
    color: var(--navy);
}

@media (max-width: 640px) {
    .info-page {
        padding: 2rem 1.25rem 3.25rem;
    }

    .info-hero {
        padding: 1.75rem;
    }

    .faq-accordion {
        padding: 1.75rem;
    }
}

.site-footer.simple-footer {
    background: var(--navy-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.5rem 5vw;
    text-align: center;
}

.site-footer.simple-footer p {
    font-size: 0.95rem;
}

.service-hero {
    /* Reduced top padding to remove gap under header */
    padding: 1.5rem 5vw 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: center;
    background: var(--gray);
}

.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.plan-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.plan-tags button {
    border: 1px solid #dbe1ff;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    background: #fff;
    cursor: pointer;
}

.plan-tags.is-disabled {
    opacity: 0.5;
}

.plan-tags.is-disabled button {
    cursor: not-allowed;
}

.operator-field {
    position: relative;
}

.input-note {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: rgba(11, 20, 55, 0.7);
    min-height: 1em;
}

.input-note[data-tone="success"] {
    color: #0b8c50;
}

.input-note[data-tone="error"] {
    color: #d7263d;
}

.input-note[data-tone="warning"] {
    color: #c77700;
}

.input-note[data-tone="info"] {
    color: #006bce;
}

.amount-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.amount-row label {
    flex: 1;
}

.check-plans-btn {
    white-space: nowrap;
    padding-inline: 1.25rem;
}

.payment-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.payment-controls .btn {
    min-width: 220px;
    justify-content: center;
}

.payment-controls .btn.is-armed,
.payment-controls .btn.is-ready {
    box-shadow: 0 15px 30px rgba(2, 10, 58, 0.18);
}

.payment-controls .btn.is-armed {
    background: linear-gradient(120deg, #062a68, #0b3ea0);
    color: #fff;
}

.payment-status {
    font-size: 0.85rem;
    margin-top: 0.35rem;
    color: rgba(11, 20, 55, 0.8);
    min-height: 1.25rem;
}

.payment-status[data-tone="success"] {
    color: #0b8c50;
}

.payment-status[data-tone="warning"] {
    color: #c77700;
}

.payment-status[data-tone="error"] {
    color: #d7263d;
}

.payment-handshake {
    position: relative;
    margin-top: 0.75rem;
    padding: 1.25rem;
    border: 1px dashed #cad0f2;
    border-radius: 18px;
    background: rgba(2, 10, 58, 0.03);
    overflow: hidden;
}

.payment-handshake.is-floating {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    margin-top: 0;
    border-style: solid;
    border-color: rgba(14, 26, 74, 0.18);
    background: #fff;
    box-shadow: 0 35px 80px rgba(4, 9, 34, 0.35);
    z-index: 1200;
}

.payment-handshake-dismiss {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    border: none;
    background: transparent;
    color: rgba(6, 10, 34, 0.6);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    display: none;
}

.payment-handshake-dismiss:hover {
    background: rgba(6, 12, 40, 0.08);
    color: #0d1c64;
}

.payment-handshake.is-floating .payment-handshake-dismiss {
    display: inline-flex;
}

.payment-handshake-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.payment-handshake-primary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .payment-handshake-primary {
        grid-template-columns: 1fr;
    }
}

.payment-handshake-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.payment-qr-block {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.payment-qr-block[hidden] {
    display: none !important;
}

.payment-qr-visual {
    width: 180px;
    height: 180px;
    background: #fff;
    border: 1px dashed #d8def6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.75rem;
}

.payment-qr-visual img,
.payment-qr-visual svg {
    width: 100%;
    height: auto;
}

.payment-qr-details {
    flex: 1;
    min-width: 180px;
}

.payment-qr-details p {
    margin-bottom: 0.35rem;
    color: rgba(11, 20, 55, 0.85);
}

.payment-handshake-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 34, 0.55);
    z-index: 1190;
    backdrop-filter: blur(1px);
}

.payment-handshake-overlay[hidden] {
    display: none;
}

body.handshake-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .amount-row {
        flex-direction: row;
        align-items: flex-end;
        gap: 0.6rem;
    }

    .amount-row label {
        flex: 1;
    }

    .check-plans-btn {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .payment-controls {
        width: 100%;
    }

    .payment-controls .btn {
        width: 100%;
    }
}

/* Mobile: show single-line truncated hero description with See more toggle */
@media (max-width: 640px) {
    .service-hero .hero-desc-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .service-hero .service-desc {
        margin: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Increased to match nav item visual weight on mobile */
        font-size: 1.05rem;
    }
    .service-hero .service-desc.expanded {
        white-space: normal;
    }
    .hero-desc-toggle {
        display: inline-block;
        background: transparent;
        border: none;
        color: var(--navy);
        font-weight: 700;
        cursor: pointer;
        padding: 0.15rem 0.35rem;
        font-size: 1.05rem;
    }
}

/* Hide toggle on larger screens */
.hero-desc-toggle { display: none; }

/* Reduce large hero heading on small screens so it fits on one line */
@media (max-width: 640px) {
    .service-hero h1 {
        font-size: 1.15rem !important;
        line-height: 1.05;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .service-hero p {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 179, 255, 0.2);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.badge.subtle {
    background: rgba(5, 17, 82, 0.08);
    font-size: 0.75rem;
}

.service-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.service-highlights article {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid #e5e7f2;
}

.service-highlights strong {
    display: block;
    font-size: 1.5rem;
    color: var(--navy);
}

.service-form {
    padding: 3rem 5vw;
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(460px, 1.4fr);
    gap: 1.75rem;
    align-items: flex-start;
}

.form-card,
.info-card {
    border: 1px solid #e5e7f2;
    border-radius: 20px;
    padding: 2rem;
}

.form-card {
    align-self: stretch;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.recharge-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recharge-form[data-service-lock="true"] .btn.primary,
.recharge-form[data-service-lock="true"] .js-payment-flow {
    opacity: 0.6;
    cursor: not-allowed;
}

.service-lock-alert {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(255, 153, 0, 0.15);
    color: #6a2a00;
    font-weight: 600;
    font-size: 0.95rem;
}

.checkout-shell[hidden] {
    display: none;
}

.checkout-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 1200;
    pointer-events: none;
}

.checkout-modal[aria-hidden="true"] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkout-modal:not([aria-hidden="true"]) {
    pointer-events: all;
    opacity: 1;
}

.checkout-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 35, 0.4);
}

.checkout-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 1.75rem;
    width: min(480px, calc(100% - 2.5rem));
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(5, 8, 35, 0.3);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Guests: hide wallet section + wallet-only button */
.checkout-shell[data-auth="0"] .checkout-channel-wallet,
.checkout-shell[data-auth="0"] [data-checkout-wallet-pay],
.checkout-shell[data-auth="0"] [data-checkout-wallet-topup] {
    display: none !important;
}

/* Logged-in users: hide login CTA inside checkout modal */
.checkout-shell[data-auth="1"] [data-checkout-login] {
    display: none !important;
}

@media (max-width: 1024px) {
    .checkout-modal__dialog {
        max-height: 88vh;
        gap: 1rem;
    }

    .checkout-channel-body {
        gap: 0.75rem;
    }

    .checkout-channel-summary,
    .checkout-channel-wallet {
        padding: 0.85rem 1rem;
    }

    .checkout-device-hint {
        padding: 0.65rem 0.85rem;
    }
}

@media (max-width: 720px) {
    .checkout-modal {
        align-items: flex-start;
        padding: 0.5rem;
    }

    .checkout-modal__dialog {
        width: 100%;
        max-height: 88vh;
        margin: 0.75rem auto 0;
        padding: 1.1rem;
        border-radius: 18px;
        box-shadow: 0 18px 48px rgba(5, 8, 35, 0.25);
        font-size: 0.94rem;
        line-height: 1.45;
    }

    .checkout-modal__header {
        align-items: flex-start;
        gap: 0.5rem;
    }

    .checkout-modal__header h2 {
        font-size: 1.2rem;
    }

    .checkout-modal__sub,
    .checkout-summary-label,
    .checkout-summary-grid dt,
    .checkout-summary-grid dd,
    .checkout-channel-hint,
    .checkout-device-hint,
    .checkout-summary-note,
    .payment-status {
        font-size: 0.92rem;
    }

}

.checkout-modal__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-modal__header h2 {
    margin: 0.15rem 0;
    font-size: 1.5rem;
}

.checkout-modal__sub {
    margin: 0.2rem 0 0;
    color: rgba(11, 20, 55, 0.65);
}

.checkout-modal__close {
    background: rgba(5, 17, 82, 0.08);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    cursor: pointer;
}

.checkout-channel-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-channel-summary {
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(5, 17, 82, 0.12);
    background: #fff9f6;
}

.checkout-summary-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(11, 20, 55, 0.65);
    margin: 0 0 0.75rem;
}

.checkout-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.checkout-summary-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkout-summary-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(11, 20, 55, 0.6);
    font-weight: 500;
}

.checkout-summary-grid dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
}

.checkout-summary-note {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(5, 17, 82, 0.08);
    color: rgba(11, 20, 55, 0.7);
}

.checkout-device-hint {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #f0f4ff;
    color: rgba(11, 20, 55, 0.75);
    font-size: 0.9rem;
}

.checkout-channel-wallet {
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(5, 17, 82, 0.12);
    background: #f7f9ff;
}

.checkout-channel-wallet strong {
    display: block;
    font-size: 1.35rem;
    margin-top: 0.35rem;
    color: var(--navy);
}

.checkout-channel-hint {
    margin: 0.35rem 0 0;
    color: rgba(11, 20, 55, 0.7);
}

/* Hide UPI app suggestions grid */
[data-checkout-upi-grid] {
    display: none !important;
}

.checkout-channel-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
}

.checkout-channel-upi-row {
    display: contents;
}

/* Utility Credits: compact receipt-style summary + safer buttons (utility-only) */
.checkout-modal.checkout-modal--utility .checkout-modal__dialog {
    max-height: min(70vh, calc(100vh - 2.5rem));
    border: 1px solid rgba(5, 17, 82, 0.08);
    background: linear-gradient(180deg, #ffffff, #f7f9ff);
    position: relative;
    overflow: hidden;
}

.checkout-modal.checkout-modal--utility .checkout-modal__dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--navy), var(--navy-dark));
}

.checkout-modal.checkout-modal--utility .checkout-modal__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(5, 17, 82, 0.08);
}

.checkout-modal.checkout-modal--utility .checkout-modal__header .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, #ffffff, #f0f4ff);
    color: var(--navy);
    border: 1px solid rgba(5, 17, 82, 0.12);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.checkout-modal.checkout-modal--utility .checkout-modal__header h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--navy);
}

.checkout-modal.checkout-modal--utility .checkout-modal__close {
    background: rgba(5, 17, 82, 0.06);
    border: 1px solid rgba(5, 17, 82, 0.1);
}

.checkout-modal.checkout-modal--utility .checkout-modal__close:hover {
    background: rgba(5, 17, 82, 0.1);
}

.checkout-modal.checkout-modal--utility .checkout-channel-summary {
    background: linear-gradient(135deg, #fff9f6, #f7f9ff);
    border-color: rgba(5, 17, 82, 0.14);
    box-shadow: 0 14px 34px rgba(5, 8, 35, 0.08);
}

.checkout-modal.checkout-modal--utility .checkout-channel-actions {
    grid-template-columns: 1fr;
}

.checkout-modal.checkout-modal--utility .checkout-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.checkout-modal.checkout-modal--utility .checkout-summary-grid dt,
.checkout-modal.checkout-modal--utility .checkout-summary-grid dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-modal.checkout-modal--utility .checkout-summary-grid dt {
    font-size: clamp(0.68rem, 2.6vw, 0.75rem);
}

.checkout-modal.checkout-modal--utility .checkout-summary-grid dd {
    font-size: clamp(0.9rem, 3.2vw, 0.98rem);
}

.checkout-modal.checkout-modal--utility .checkout-channel-upi-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.7rem;
    align-items: stretch;
}

.checkout-modal.checkout-modal--utility [data-checkout-upi] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    width: 100%;
    background: linear-gradient(180deg, var(--navy), var(--navy-dark));
}

.checkout-modal.checkout-modal--utility [data-checkout-show-qr] {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
    min-width: 92px;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    white-space: nowrap;
    background: #f0f4ff;
    border: 1px solid rgba(5, 17, 82, 0.12);
    text-decoration: none;
    color: var(--navy);
}

.checkout-modal.checkout-modal--utility .checkout-utility-total {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.checkout-modal.checkout-modal--utility .checkout-utility-total img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    flex: 0 0 auto;
}

.checkout-modal.checkout-modal--utility .checkout-qr-mini {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1;
}

.checkout-modal.checkout-modal--utility .checkout-qr-mini__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(11, 20, 55, 0.72);
}

.checkout-modal.checkout-modal--utility .checkout-qr-mini__icon {
    width: 18px;
    height: 18px;
    color: var(--navy);
}

@media (max-height: 640px) {
    .checkout-modal.checkout-modal--utility .checkout-modal__dialog {
        padding: 1rem;
        gap: 0.9rem;
    }
    .checkout-modal.checkout-modal--utility .checkout-channel-summary,
    .checkout-modal.checkout-modal--utility .checkout-channel-wallet {
        padding: 0.85rem 1rem;
    }
    .checkout-modal.checkout-modal--utility .checkout-channel-actions {
        gap: 0.7rem;
    }
}

.checkout-result-order {
    margin: 0;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.05rem;
}

.checkout-success-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0;
}

.checkout-success-details div {
    border: 1px solid rgba(5, 17, 82, 0.08);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: #fdfdff;
}

.checkout-success-details dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(11, 20, 55, 0.65);
}

.checkout-success-details dd {
    margin: 0.35rem 0 0;
    font-weight: 600;
    color: var(--navy);
}

.checkout-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.checkout-receipt-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.checkout-receipt-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
}

/* ID Unban modal: Profile ID input + Check button inline */
.checkout-modal #id-unban-modal [data-id-unban-profile-row],
.checkout-modal .checkout-modal__dialog [data-id-unban-profile-row] {
    display: flex;
    gap: 0.75rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.checkout-modal #id-unban-modal [data-id-unban-profile-row] input,
.checkout-modal .checkout-modal__dialog [data-id-unban-profile-row] input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.checkout-modal #id-unban-modal [data-id-unban-profile-row] button,
.checkout-modal .checkout-modal__dialog [data-id-unban-profile-row] button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.checkout-modal #id-unban-modal .id-unban-help-trigger {
    width: 44px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 999px;
    font-weight: 800;
}

/* Buttons: disabled state (needed for eligibility-gated submit) */
button.btn[disabled],
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ID Unban modal: compact summary + 2-column grid */
#id-unban-modal .checkout-channel-summary {
    padding: 0.85rem 1rem;
}

#id-unban-modal .checkout-summary-label {
    margin-bottom: 0.55rem;
}

#id-unban-modal .checkout-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

/* ID Unban: recent request status colors */
#id-unban-modal .id-unban-request-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

#id-unban-modal .id-unban-request-meta {
    flex: 1 1 auto;
    min-width: 0;
}

#id-unban-modal [data-id-unban-requests] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#id-unban-modal .id-unban-request-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(5, 17, 82, 0.12);
    background: #fff;
}

#id-unban-modal .id-unban-request-col:first-child {
    padding-right: 0.85rem;
    border-right: 1px solid rgba(5, 17, 82, 0.1);
}

#id-unban-modal .id-unban-request-col:last-child {
    padding-left: 0.85rem;
}

#id-unban-modal .id-unban-request-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

#id-unban-modal .id-unban-request-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

#id-unban-modal .id-unban-request-row strong {
    font-size: 0.95rem;
    color: var(--navy);
}


/* Values only (no labels) */
#id-unban-modal .id-unban-request-card {
    font-size: 0.85rem;
}

#id-unban-modal .id-unban-request-value {
    color: var(--navy);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#id-unban-modal .id-unban-request-col {
    align-items: flex-start;
}

@media (max-width: 520px) {
    #id-unban-modal .id-unban-request-card {
        grid-template-columns: 1fr;
    }

    #id-unban-modal .id-unban-request-col:first-child {
        padding-right: 0;
        border-right: 0;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid rgba(5, 17, 82, 0.1);
    }

    #id-unban-modal .id-unban-request-col:last-child {
        padding-left: 0;
        padding-top: 0.65rem;
    }
}

.checkout-receipt-hint {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(11, 20, 55, 0.65);
}

.checkout-receipt-status {
    margin: 0.35rem 0 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.dth-mode-pill {
    margin-bottom: 0.25rem;
}

.recharge-type-group {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: #eff2ff;
    align-self: flex-start;
}

.toggle-pill {
    position: relative;
}

.toggle-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.toggle-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(11, 20, 55, 0.6);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.toggle-pill input:checked + span {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 18px rgba(6, 21, 89, 0.07);
}

/* Auth layout */
.auth-page {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.auth-main {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #e3e7fb;
    padding: clamp(1.8rem, 3vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 2.8vw, 3rem);
    align-items: center;
    box-shadow: 0 35px 80px rgba(4, 16, 68, 0.08);
}

.auth-main h1 {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    margin-bottom: 0.75rem;
}

.auth-main p {
    color: rgba(11, 20, 55, 0.8);
}

.auth-highlights {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.auth-stat-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.auth-stat-grid article {
    border: 1px solid rgba(3, 27, 78, 0.12);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    background: rgba(244, 246, 251, 0.7);
}

.auth-stat-grid strong {
    display: block;
    font-size: 1.35rem;
    color: var(--navy);
}

.auth-stat-grid span {
    font-size: 0.9rem;
    color: rgba(11, 20, 55, 0.7);
}

@media (max-width: 1024px) {
    .auth-main {
        display: flex;
        flex-direction: column;
    }

    .auth-forms {
        order: -1;
        width: 100%;
    }

    .auth-hero-copy {
        order: 0;
    }
}

.auth-forms {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.auth-switch {
    display: inline-flex;
    border: 1px solid rgba(3, 27, 78, 0.15);
    border-radius: 999px;
    padding: 0.25rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(3, 27, 78, 0.04);
    align-self: flex-start;
}

.auth-switch-btn {
    border: none;
    background: transparent;
    padding: 0.45rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    color: rgba(11, 20, 55, 0.6);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-switch-btn.is-active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 8px 20px rgba(2, 10, 58, 0.25);
}

.auth-panel {
    display: none;
}

.auth-panel.is-active {
    display: flex;
}

.auth-panel[hidden] {
    display: none !important;
}

.auth-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e3e7fb;
    padding: 2rem;
    box-shadow: 0 25px 60px rgba(4, 16, 68, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-card header h2 {
    margin: 0.25rem 0;
    font-size: 1.65rem;
}

.auth-card header p {
    color: rgba(11, 20, 55, 0.75);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-auth {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(11, 20, 55, 0.6);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.social-divider::before,
.social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(11, 20, 55, 0.1);
}

.google-button {
    display: inline-flex;
    justify-content: center;
}

.form-alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
}

.form-alert-success {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.form-alert-error {
    background: rgba(248, 113, 113, 0.18);
    color: #991b1b;
}

.form-alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.phone-composite {
    display: block;
}

.phone-composite-row {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
}

.phone-country,
.phone-number,
.phone-country-btn {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(11, 20, 55, 0.12);
    padding: 0.85rem 0.95rem;
    font: inherit;
    background: #ffffff;
}

.phone-number {
    flex: 1 1 auto;
}

/* Enhanced country picker: keep native select as fallback, hide only when JS enhanced */
.phone-composite--enhanced .phone-country-select {
    display: none;
}

.phone-country-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 76px;
    text-align: left;
    cursor: pointer;
    background: #f7f9ff;
    position: relative;
    white-space: nowrap;
    padding-right: 2.1rem;
}

.phone-country-btn::after {
    content: "▾";
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(11, 20, 55, 0.55);
    font-size: 0.95rem;
}

.phone-country:focus,
.phone-number:focus,
.phone-country-btn:focus,
.phone-country-search:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.phone-country-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 38, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.phone-country-panel {
    width: min(680px, 100%);
    max-height: min(78vh, 720px);
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(11, 20, 55, 0.12);
    box-shadow: 0 40px 80px rgba(2, 10, 38, 0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.phone-country-title {
    padding: 1rem 1.1rem;
    font-weight: 800;
    color: rgba(11, 20, 55, 0.9);
    border-bottom: 1px solid rgba(11, 20, 55, 0.08);
}

.phone-country-search {
    margin: 0.9rem 1.1rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(11, 20, 55, 0.12);
    padding: 0.8rem 0.95rem;
    font: inherit;
    background: #f7f9ff;
}

.phone-country-list {
    padding: 0.5rem 0.6rem 0.9rem;
    overflow: auto;
}

.phone-country-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    color: rgba(11, 20, 55, 0.9);
}

.phone-country-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

.phone-country-item[aria-current="true"] {
    background: rgba(16, 185, 129, 0.12);
}

@media (max-width: 520px) {
    .phone-composite-row {
        flex-direction: column;
    }

    .phone-country-btn {
        width: 100%;
    }
}

.auth-form input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--navy);
}

.remember-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: rgba(11, 20, 55, 0.8);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-note {
    font-size: 0.85rem;
    color: rgba(11, 20, 55, 0.7);
}

.link-muted {
    color: rgba(11, 20, 55, 0.65);
    font-weight: 600;
}

.link-muted:hover {
    color: var(--navy);
}

.link-button {
    background: none;
    border: none;
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-button:hover,
.link-button:focus {
    color: var(--sky);
    outline: none;
}

.optional {
    font-weight: 500;
    color: rgba(11, 20, 55, 0.5);
}

.badge-muted {
    background: rgba(11, 20, 55, 0.06);
    color: rgba(11, 20, 55, 0.7);
}

.badge-accent {
    background: rgba(124, 233, 217, 0.32);
    color: var(--navy);
}

.auth-benefits {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #e3e7fb;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.benefit-grid article {
    border-radius: 18px;
    border: 1px solid rgba(3, 27, 78, 0.08);
    padding: 1.5rem;
    background: rgba(244, 246, 251, 0.6);
}

.benefit-grid h3 {
    margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
    .auth-card {
        padding: 0;
    }
}

        width: 100%;
        max-height: 100vh;
    .form-row {
        flex-direction: column;
        border-radius: 0;
        align-items: flex-start;
    }

    .auth-benefits {
        padding: 1.75rem;
    }
}

.dth-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dth-summary-card {
    border: 1px solid #e5e7f2;
    border-radius: 18px;
    padding: 1rem 1.25rem;
    background: rgba(2, 10, 58, 0.03);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.dth-summary-card span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(11, 20, 55, 0.6);
}

.dth-summary-card strong {
    display: block;
    font-size: 1rem;
    color: var(--navy);
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-weight: 500;
}

.info-card ul {
    margin-top: 1rem;
    list-style: disc;
    padding-left: 1.25rem;
    color: rgba(11, 20, 55, 0.8);
}

.support-highlights {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
}

.support-highlights article {
    background: #fff;
    border: 1px solid #e5e7f2;
    border-radius: 16px;
    padding: 1.125rem 1rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(6, 21, 89, 0.05);
}

.support-highlights strong {
    display: block;
    font-size: 1.35rem;
    color: var(--navy);
}

.support-highlights span {
    display: block;
    margin-top: 0.35rem;
    color: rgba(11, 20, 55, 0.8);
    font-size: 0.95rem;
}

@media (max-width: 1024px) {
    .service-form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Mobile: remove side padding so form card fits edge-to-edge */
@media (max-width: 640px) {
    main,
        padding: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        border-radius: 0;
        padding: 0.75rem 0.5rem;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .form-card,
    .info-card {
        padding: 1rem;
        border-radius: 12px;
    }
    .hero {
        padding: 1.25rem 0.5rem 1rem;
    }
}

@media (min-width: 768px) {
    .ak-footer {
        gap: 2rem;
    }

    .footer-link-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1.5rem;
        border-bottom: 1px solid #e8eaf5;
        padding-bottom: 0.75rem;
        order: 1;
    }

    .footer-link-row a {
        position: relative;
    }

    .footer-link-row a + a::before {
        content: "";
        position: absolute;
        left: -0.75rem;
        top: 50%;
        width: 1px;
        height: 60%;
        background: #d4d9ef;
        transform: translateY(-50%);
    }

    .footer-details {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
        order: 2;
    }

    .footer-brand,
    .footer-services-copy {
        flex: 1;
        order: unset;
    }

    .footer-services-copy {
        padding-left: 2rem;
        border-left: 1px solid #eef0fb;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        order: 3;
    }
}

@media (max-width: 768px) {
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Header-specific: make the Login/Register pill smaller without changing global CTA styles */
.header-actions .cta-btn {
    padding: 0.42rem 0.9rem;
    gap: 0.35rem;
    font-size: 0.92rem;
    min-width: auto;
    box-shadow: 0 8px 20px rgba(2, 10, 58, 0.28);
}
.header-actions .cta-btn .cta-icon {
    width: 24px;
    height: 24px;
}
.header-actions .cta-btn .cta-icon svg {
    width: 14px;
    height: 14px;
}
.header-actions .cta-btn .cta-text {
    font-size: 0.92rem;
}

/* Desktop: center category nav and increase chip/icon size for better prominence */
@media (min-width: 1025px) {
    .category-nav {
        justify-content: center;
        padding: 0;
        gap: 1.35rem;
    }
    .category-chip {
        font-size: 0.82rem;
        gap: 0.25rem;
        max-height: 100vh;
        margin: 0;
    }
    .category-chip .icon {
        width: 44px;
        height: 44px;
        border-radius: 999px;
    }
    .category-chip .icon img,
    .category-chip .icon svg {
        width: 26px;
        height: 26px;
    }
    .chip-label {
        font-size: 0.78rem;
        opacity: 0.95;
    }
}

/* Strong desktop override: make brand title and subtitle much larger
   This compensates for the page-level zoom applied elsewhere and
   ensures the brand is prominent on wide screens. */
@media (min-width: 1025px) {
    .brand-name {
        font-size: 2.0rem !important;
        line-height: 1.02;
        text-shadow: 0 10px 36px rgba(2,10,58,0.38);
    }
    .brand-sub {
        font-size: 1.25rem !important;
    }
}

/* Tablet: slightly reduce brand title and logo compared to desktop
   Apply between mobile and desktop so tablet screens look balanced */
@media (min-width: 641px) and (max-width: 1024px) {
    .brand .logo {
        width: 56px;
        height: 56px;
        padding: 5px;
    }
    .brand-name {
        font-size: 1.25rem !important;
        line-height: 1.04;
        text-shadow: 0 8px 28px rgba(2,10,58,0.36);
    }
    .brand-sub {
        font-size: 0.80rem !important;
    }
    .service-hero h1,
    .section-heading h2 {
        font-size: 1.25rem !important;
        line-height: 1.06;
    }
}

/* Mobile override: reduce brand title + subtitle by ~10% from mobile defaults */
@media (max-width: 640px) {
    .brand-name { font-size: 1.17rem !important; }
    .brand-sub  { font-size: 0.60rem !important; }
}

@media (max-width: 640px) {
    .header-primary {
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
    }

    .brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.5rem;
    }

    .brand strong,
    .brand-name,
    .brand-sub {
        white-space: nowrap;
    }

    .brand .logo {
        width: 38px;
        height: 38px;
        padding: 4px;
    }

    .header-actions {
        flex-shrink: 0;
        gap: 0.4rem;
    }

    .user-pill {
        padding: 0.22rem 0.55rem 0.22rem 0.26rem;
        gap: 0.3rem;
    }

    .user-initials {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
    }

    .user-name {
        font-size: 0.72rem;
        max-width: 95px;
    }
}

@media (max-width: 480px) {
    .brand-name { font-size: 1.05rem !important; }
    .brand-sub  { font-size: 0.52rem !important; }

    .user-name {
        max-width: 60px;
    }
}

/* Extra-small phones: prevent header text overflow/wrap by tightening spacing. */
@media (max-width: 420px) {
    .header-primary {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        gap: 0.4rem;
    }

    .header-actions .support-link {
        display: none;
    }

    .brand .logo {
        width: 40px;
        height: 40px;
    }

    .brand > div {
        min-width: 0;
        overflow: hidden;
    }

    .brand-name {
        font-size: 1rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Keep subtitle visible globally; just make it tighter on tiny screens. */
    .brand-sub {
        display: block !important;
        font-size: 0.56rem !important;
        line-height: 1.05 !important;
        margin-top: 0.05rem !important;
        opacity: 0.92;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
}

/* Header brand typography: stable weights + smooth scaling (avoid breakpoint jumps).
   Scoped to the fixed header to prevent site-wide side effects. */
.site-header .brand strong {
    font-size: inherit;
    letter-spacing: inherit;
}

.site-header .brand-name {
    font-synthesis-weight: none;
    font-weight: 700 !important;
    font-size: clamp(0.98rem, 1.8vw, 1.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
}

.site-header .brand-sub {
    font-synthesis-weight: none;
    font-weight: 500 !important;
    font-size: clamp(0.58rem, 1.0vw, 0.78rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    margin-top: 0.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.site-header .brand .logo {
    width: clamp(34px, 3.2vw, 46px);
    height: clamp(34px, 3.2vw, 46px);
}