/*
 * AdaWang shared responsive layer
 * Loaded after page and theme styles so every public, customer and admin view
 * receives the same final layout safeguards.
 */

:root {
    --aw-page-max: 1440px;
    --aw-page-pad: clamp(14px, 2.4vw, 30px);
    --aw-control-height: 44px;
    --aw-radius: 8px;
    --aw-border: #e3e9f0;
    --aw-ink: #172033;
    --aw-muted: #64748b;
    --aw-focus: #0f766e;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
video,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

button,
a,
select,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    touch-action: manipulation;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--aw-focus) 24%, transparent);
    outline-offset: 2px;
}

:where(
    .portal-layout,
    .portal-main,
    .shell,
    .grid,
    .card,
    .panel,
    .panel-surface,
    .page-head,
    .section-head,
    .dashboard-command,
    .dashboard-layout,
    .dashboard-main,
    .dashboard-aside,
    .dash,
    .dash-grid,
    .dash-card,
    .dash-card-body,
    .p2p-wallet-hero,
    .wallet-panel,
    .wallet-row,
    .settings-layout,
    .support-chat-shell,
    .support-chat-panel,
    .support-compose,
    .support-compose-actions,
    .ticket-workspace,
    .ticket-list,
    .ticket-detail,
    .ticket-thread,
    .content-wrap,
    .row,
    [class*="col-"]
) {
    min-width: 0;
}

:where(
    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small,
    label,
    td,
    th,
    .muted,
    .dash-card-title,
    .ticket-message-body,
    .support-bubble
) {
    overflow-wrap: anywhere;
}

.customer-portal-body :where(.card, .panel-surface, .overview-card, .action-tile),
.admin-body :where(.panel, .stat-card, .card, .table-responsive) {
    border-radius: var(--aw-radius) !important;
}

.customer-portal-body :where(input, select, textarea),
.admin-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: var(--aw-control-height);
}

.customer-portal-body :where(.btn, .dash-btn),
.admin-body :where(.btn) {
    min-height: 42px;
    white-space: normal;
}

.customer-portal-body :where(.form-actions, .dash-actions, .section-head, .page-head) {
    row-gap: 10px;
}

.customer-portal-body :where(.table-wrap, .table-responsive, .dash-scroll) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.customer-portal-body table,
.admin-body table {
    width: 100%;
}

.customer-portal-body .portal-main {
    width: 100%;
    max-width: var(--aw-page-max) !important;
    margin-inline: auto;
}

.customer-portal-body .portal-layout > .portal-main {
    align-self: start;
}

.customer-portal-body .dash {
    width: 100%;
    max-width: 100%;
}

.customer-portal-body .dash-card {
    overflow: hidden;
}

.customer-portal-body .dash-card-header,
.customer-portal-body .dash-card-body {
    padding: clamp(14px, 2vw, 20px);
}

.customer-portal-body .dash-actions,
.customer-portal-body .dash-loan-actions,
.customer-portal-body .dash-wallet-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.customer-portal-body .dash-scroll {
    scrollbar-width: thin;
}

.customer-portal-body .support-chat-panel {
    overflow: hidden;
}

.customer-portal-body .support-messages {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.customer-portal-body .support-bubble {
    width: fit-content;
    max-width: min(78%, 720px) !important;
}

.customer-portal-body .support-bubble.visitor {
    margin-left: auto;
}

.customer-portal-body .support-bubble.support,
.customer-portal-body .support-bubble.system {
    margin-right: auto;
}

.customer-portal-body .support-media img,
.customer-portal-body .support-media video {
    display: block;
    width: auto;
    max-width: min(100%, 520px);
    max-height: 420px;
    object-fit: contain;
    border-radius: 6px;
}

.customer-portal-body .support-compose {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #fff;
    border-top: 1px solid var(--aw-border);
}

.customer-portal-body .support-compose textarea {
    min-height: 52px;
    max-height: 132px;
    resize: vertical;
}

/* Public homepage safeguards */
.public-site {
    color: var(--aw-ink);
}

.public-site :where(.nav-container, .hero-container, .section-container, .footer-container) {
    width: min(100%, var(--aw-page-max));
}

.public-site :where(.quick-actions-grid, .features-grid, .usecases-grid, .process-grid, .form-grid) > * {
    min-width: 0;
}

.public-site .footer-links a {
    overflow-wrap: anywhere;
}

.public-tool-page {
    min-height: 100dvh;
    padding: clamp(20px, 5vw, 48px) 12px !important;
    color: var(--aw-ink);
}

.public-tool-page .container {
    max-width: 960px;
}

.public-tool-page .status-card {
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

.public-tool-page .form-control,
.public-tool-page .btn {
    min-height: var(--aw-control-height);
}

/* Admin sign-in */
.admin-login-body {
    min-height: 100dvh;
    padding: 20px;
}

.admin-login-body .login-card {
    width: min(100%, 440px);
    margin-inline: auto;
    border-radius: var(--aw-radius) !important;
}

.admin-login-body .brand-logo {
    width: auto;
    max-width: min(100%, 180px);
    height: 44px;
    object-fit: contain;
}

/* Admin desktop shell */
.admin-body .admin-shell {
    min-height: 100dvh;
    padding: 0;
}

.admin-body .admin-shell > .row {
    flex-wrap: nowrap;
    min-height: 100dvh;
    width: 100%;
    margin: 0 !important;
}

.admin-body .sidebar {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    position: sticky !important;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-body .admin-main {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}

.admin-body .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
}

.admin-body .admin-topbar-leading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-menu-toggle,
.admin-sidebar-backdrop {
    display: none;
}

.admin-menu-toggle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce5ee;
    border-radius: var(--aw-radius);
    background: #fff;
    color: #0f172a;
    box-shadow: none;
}

.admin-body .content-wrap {
    width: 100%;
    max-width: var(--aw-page-max);
    padding: var(--aw-page-pad);
}

.admin-body .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-body .form-check-input,
.admin-body input[type="checkbox"],
.admin-body input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.admin-body .ticket-workspace {
    max-width: 100%;
}

.admin-body .ticket-list-body,
.admin-body .ticket-thread {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.admin-body .ticket-message-body {
    max-width: 100%;
}

.admin-body .ticket-message-media img,
.admin-body .ticket-message-media video {
    display: block;
    width: auto;
    max-width: min(100%, 560px);
    max-height: 460px;
    object-fit: contain;
    border-radius: 6px;
}

.admin-body .ticket-compose {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top: 1px solid var(--aw-border);
}

.admin-body .ticket-compose textarea {
    min-height: 54px;
    max-height: 150px;
    resize: vertical;
}

@media (min-width: 901px) {
    .customer-portal-body .portal-layout {
        grid-template-columns: 260px minmax(0, 1fr) !important;
    }
}

@media (max-width: 1100px) {
    .customer-portal-body :where(
        .dash-main-grid,
        .dashboard-layout,
        .settings-layout,
        .wallet-panel,
        .p2p-wallet-hero,
        .support-chat-shell
    ) {
        grid-template-columns: 1fr !important;
    }

    .customer-portal-body .support-info-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .customer-portal-body .portal-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 70px 12px calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .customer-portal-body .mobile-menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        right: 12px !important;
        z-index: 1210 !important;
        width: 44px !important;
        height: 44px !important;
    }

    .customer-portal-body .portal-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(86vw, 310px) !important;
        max-width: 310px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        z-index: 1200 !important;
    }

    .customer-portal-body .portal-layout.sidebar-open .portal-sidebar {
        transform: translateX(0) !important;
    }

    .customer-portal-body .portal-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1190 !important;
        background: rgba(15, 23, 42, .48) !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .customer-portal-body .portal-layout.sidebar-open .portal-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .customer-portal-body .portal-layout.sidebar-open {
        height: 100dvh;
        overflow: hidden;
    }

    .customer-portal-body :where(.grid.two, .grid.three, .dash-grid-4, .dash-overview-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .customer-portal-body .support-info-stack {
        grid-template-columns: 1fr !important;
    }

    .customer-portal-body .support-chat-panel {
        min-height: calc(100dvh - 150px) !important;
    }

    .customer-portal-body .support-bubble {
        max-width: 88% !important;
    }

    .public-site .navbar {
        max-width: 100vw;
    }

    .public-site .nav-container {
        gap: 8px;
    }

    .public-site .nav-logo {
        flex: 0 1 auto;
        min-width: 0;
    }

    .public-site .nav-right {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .admin-body {
        background: #f4f7fa !important;
    }

    .admin-body.admin-sidebar-open {
        height: 100dvh;
        overflow: hidden;
    }

    .admin-body .admin-shell > .row {
        display: block !important;
        margin: 0 !important;
    }

    .admin-body .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1045 !important;
        width: min(86vw, 310px) !important;
        max-width: 310px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 16px !important;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 44px rgba(15, 23, 42, .22) !important;
    }

    .admin-body.admin-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .admin-body .sidebar .nav.flex-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .admin-body .sidebar .nav-section-label {
        margin: 10px 6px 4px !important;
    }

    .admin-body .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        border: 0;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .admin-body.admin-sidebar-open .admin-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-body .admin-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .admin-body .topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        min-height: 62px;
    }

    .admin-body .admin-topbar-leading {
        align-items: center;
    }

    .admin-body .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-body .admin-session-label {
        display: none;
    }

    .admin-body .content-wrap {
        padding: 12px !important;
    }

    .admin-body :where(.row.g-3, .row.g-4) > [class*="col-"] {
        width: 100%;
    }

    .admin-body .table {
        min-width: 720px;
    }

    .admin-body .ticket-workspace {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .admin-body .ticket-list {
        max-height: min(42dvh, 430px) !important;
    }

    .admin-body .ticket-detail {
        min-height: min(66dvh, 620px) !important;
    }

    .admin-body .ticket-thread {
        min-height: 320px !important;
        max-height: 56dvh !important;
        overflow-y: auto !important;
    }

    .admin-body .ticket-compose {
        padding: 12px !important;
    }

    .admin-body .ticket-actions,
    .admin-body .ticket-compose-tools {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

@media (max-width: 560px) {
    .public-tool-page .input-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .public-tool-page .input-group > * {
        width: 100%;
        border-radius: var(--aw-radius) !important;
    }

    .customer-portal-body :where(
        .grid.two,
        .grid.three,
        .dash-grid,
        .dash-grid-4,
        .dash-overview-grid,
        .readonly-grid,
        .action-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    .customer-portal-body :where(.dash-actions, .dash-loan-actions, .dash-wallet-actions) {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .customer-portal-body :where(.dash-actions, .dash-loan-actions, .dash-wallet-actions) > * {
        width: 100%;
        justify-content: center;
    }

    .customer-portal-body .support-chat-head {
        padding: 12px !important;
    }

    .customer-portal-body .support-messages {
        padding: 10px !important;
    }

    .customer-portal-body .support-bubble {
        max-width: 94% !important;
    }

    .customer-portal-body .support-compose {
        padding: 10px !important;
    }

    .customer-portal-body .support-compose-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .customer-portal-body .support-compose-actions > * {
        width: 100%;
    }

    .public-site .hero-stats,
    .public-site .hero-actions,
    .public-site .footer-top {
        grid-template-columns: 1fr !important;
    }

    .public-site .mobile-sticky-cta .sticky-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-body .ticket-message {
        max-width: 94% !important;
    }

    .admin-body .ticket-head,
    .admin-body .ticket-detail-head,
    .admin-body .ticket-panel-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .admin-body .ticket-compose .btn,
    .admin-body .ticket-compose-tools > * {
        width: 100%;
    }
}

@media (hover: none), (pointer: coarse) {
    body,
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        cursor: auto !important;
    }

    :where(.card, .panel, .btn, .nav-link, .side-link):hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Stable mobile navigation controls. Kept last to win over legacy page themes. */
@media (max-width: 900px) {
    .customer-portal-body .portal-main {
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    .customer-portal-body .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, .48) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, #0d6f62, #12977f) !important;
        color: #fff !important;
        box-shadow: 0 10px 26px rgba(13, 111, 98, .28) !important;
        overflow: hidden !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .customer-portal-body .mobile-menu-toggle::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 12px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 55%);
        pointer-events: none;
    }

    .customer-portal-body .mobile-menu-icon {
        position: relative;
        z-index: 1;
        width: 21px;
        height: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .customer-portal-body .mobile-menu-icon > span {
        width: 100%;
        height: 2px;
        display: block;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: transform .2s ease, opacity .16s ease, width .2s ease;
    }

    .customer-portal-body .mobile-menu-icon > span:nth-child(2) {
        width: 15px;
        align-self: flex-end;
    }

    .customer-portal-body .mobile-menu-toggle.is-open .mobile-menu-icon > span:first-child {
        transform: translateY(7px) rotate(45deg);
    }

    .customer-portal-body .mobile-menu-toggle.is-open .mobile-menu-icon > span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .customer-portal-body .mobile-menu-toggle.is-open .mobile-menu-icon > span:last-child {
        transform: translateY(-7px) rotate(-45deg);
    }

    .customer-portal-body .mobile-bottom-nav {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        position: fixed !important;
        inset: auto 0 calc(10px + env(safe-area-inset-bottom)) 0 !important;
        z-index: 1100 !important;
        width: 100% !important;
        height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .customer-portal-body .mobile-action-toggle {
        position: relative !important;
        z-index: 3 !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 6px !important;
        gap: 0 !important;
        border: 1px solid rgba(255, 255, 255, .5) !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, #0d6f62, #12977f) !important;
        color: #fff !important;
        box-shadow: 0 12px 30px rgba(13, 111, 98, .3) !important;
        animation: none !important;
        pointer-events: auto !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .customer-portal-body .mobile-action-toggle::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 56%);
        pointer-events: none;
    }

    .customer-portal-body .mobile-action-toggle .material-icons-outlined {
        position: relative;
        z-index: 1;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    .customer-portal-body .mobile-action-toggle > span:last-child {
        position: relative;
        z-index: 1;
        margin-top: 1px;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: .04em;
    }

    .customer-portal-body .mobile-bottom-nav.open .mobile-action-toggle {
        transform: translateY(-2px) !important;
        box-shadow: 0 16px 36px rgba(13, 111, 98, .38) !important;
    }

    .customer-portal-body .mobile-action-menu {
        position: absolute !important;
        z-index: 2 !important;
        left: 50% !important;
        bottom: 72px !important;
        width: min(calc(100vw - 24px), 344px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
        border: 1px solid rgba(209, 221, 230, .9) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 20px 48px rgba(15, 23, 42, .2) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(-50%) translateY(12px) scale(.97) !important;
        transform-origin: bottom center;
        pointer-events: none !important;
        transition: opacity .18s ease, visibility .18s ease, transform .2s ease !important;
    }

    .customer-portal-body .mobile-bottom-nav.open .mobile-action-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    .customer-portal-body .mobile-action-link {
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 9px !important;
        gap: 8px !important;
        border: 1px solid #e4ebf1 !important;
        border-radius: 12px !important;
        background: #f8fbfa !important;
        box-shadow: none !important;
        color: #13231f !important;
    }

    .customer-portal-body .mobile-action-link .material-icons-outlined {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: #e2f5ef !important;
        color: #0d6f62 !important;
        font-size: 19px !important;
    }

    .customer-portal-body .mobile-action-link small {
        margin-top: 2px !important;
        color: #66756f !important;
        font-size: 10px !important;
    }

    .customer-portal-body .mobile-action-scrim {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(15, 23, 42, .24) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .18s ease, visibility .18s ease !important;
    }

    .customer-portal-body .mobile-bottom-nav.open .mobile-action-scrim {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .customer-portal-body .portal-layout.sidebar-open .mobile-bottom-nav {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(12px) !important;
    }
}

@media (max-width: 420px) {
    .customer-portal-body .mobile-action-menu {
        grid-template-columns: 1fr !important;
        width: min(calc(100vw - 24px), 316px) !important;
        max-height: min(64dvh, 330px);
        overflow-y: auto;
    }
}

/* Compact mobile dashboard and public header refinements. */
@media (max-width: 900px) {
    .customer-portal-body .portal-main {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .customer-portal-body .mobile-bottom-nav {
        inset: auto 12px max(12px, env(safe-area-inset-bottom)) auto !important;
        width: 56px !important;
        height: 56px !important;
        justify-content: flex-end !important;
    }

    .customer-portal-body .mobile-action-toggle {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(13, 111, 98, .28) !important;
        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .customer-portal-body .mobile-action-toggle > span:last-child {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    .customer-portal-body .mobile-action-toggle .material-icons-outlined {
        font-size: 27px !important;
    }

    .customer-portal-body .mobile-action-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: 420px !important;
        margin-left: auto !important;
        padding: 10px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        transform: translateY(12px) scale(.98) !important;
        transform-origin: bottom right !important;
    }

    .customer-portal-body .mobile-bottom-nav.open .mobile-action-menu {
        transform: translateY(0) scale(1) !important;
    }

    .customer-portal-body .mobile-action-link {
        min-height: 56px !important;
    }
}

@media (max-width: 768px) {
    .public-site .navbar {
        min-height: 64px !important;
        padding: 8px 0 !important;
        background: rgba(255, 255, 255, .97) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .public-site .nav-container {
        min-height: 48px !important;
        padding: 0 12px !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .public-site .nav-logo-img {
        width: auto !important;
        height: 30px !important;
        max-width: 132px !important;
    }

    .public-site .nav-right {
        min-width: 0 !important;
        margin-left: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    .public-site .nav-right > a[href="repayment.php"],
    .public-site .nav-right > a[href="check-loan-status.php"],
    .public-site .nav-right > .nav-install-entry,
    .public-site .nav-right > .nav-cta {
        display: none !important;
    }

    .public-site .nav-right > a[href="signin.php"] {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        display: inline-grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .public-site .nav-right > a[href="signin.php"] > span:not(.material-icons-outlined) {
        display: none !important;
    }

    .public-site .lang-switch {
        flex: 0 0 auto !important;
    }

    .public-site .hero {
        padding: 82px 14px 30px !important;
    }

    .public-site .hero::after {
        top: 70px !important;
    }

    .public-site .hero-badge {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    .public-site .mobile-sticky-cta {
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .98) !important;
        border-top-color: #e4ebf1 !important;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, .09) !important;
    }

    .public-site .mobile-sticky-cta .sticky-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .public-site .mobile-sticky-cta .btn-primary,
    .public-site .mobile-sticky-cta .btn-secondary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 9px 7px !important;
        font-size: .72rem !important;
        line-height: 1.18 !important;
        text-align: center !important;
    }

    .public-site .mobile-sticky-cta .sticky-install {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
    }
}

@media (max-width: 420px) {
    .customer-portal-body .mobile-action-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: auto !important;
        max-height: min(60dvh, 300px);
    }

    .public-site .nav-logo-img {
        max-width: 118px !important;
        height: 28px !important;
    }

    .public-site .lang-btn {
        min-width: 29px !important;
        padding: 5px 7px !important;
    }
}

/* AdaWang Premium 2026: shared visual finish for public, customer and admin views. */
:root {
    --aw-premium-navy: #10233f;
    --aw-premium-ink: #172033;
    --aw-premium-emerald: #087f6a;
    --aw-premium-emerald-dark: #076454;
    --aw-premium-gold: #d5a94f;
    --aw-premium-canvas: #f4f7f6;
    --aw-premium-surface: #ffffff;
    --aw-premium-soft: #eef5f2;
    --aw-premium-line: #dce6e2;
    --aw-premium-muted: #64748b;
    --aw-premium-shadow: 0 12px 34px rgba(16, 35, 63, .08);
    --aw-premium-shadow-hover: 0 18px 42px rgba(16, 35, 63, .12);
}

.public-site,
.customer-portal-body,
.admin-body {
    color: var(--aw-premium-ink) !important;
    background-color: var(--aw-premium-canvas) !important;
}

.public-site :where(h1, h2, h3, h4),
.customer-portal-body :where(h1, h2, h3, h4),
.admin-body :where(h1, h2, h3, h4) {
    color: var(--aw-premium-navy);
    letter-spacing: 0 !important;
}

.public-site :where(.btn-primary, .nav-cta),
.customer-portal-body :where(.btn.primary, .dash-btn-primary),
.admin-body :where(.btn-primary, .btn-success) {
    border-color: var(--aw-premium-emerald) !important;
    background: var(--aw-premium-emerald) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(8, 127, 106, .18) !important;
}

.public-site :where(.btn-primary, .nav-cta):hover,
.customer-portal-body :where(.btn.primary, .dash-btn-primary):hover,
.admin-body :where(.btn-primary, .btn-success):hover {
    border-color: var(--aw-premium-emerald-dark) !important;
    background: var(--aw-premium-emerald-dark) !important;
    box-shadow: 0 12px 26px rgba(8, 127, 106, .24) !important;
    transform: translateY(-1px);
}

.public-site :where(.btn-secondary, .btn-outline),
.customer-portal-body :where(.btn.outline, .dash-btn-outline),
.admin-body :where(.btn-outline-primary, .btn-outline-secondary) {
    border: 1px solid var(--aw-premium-line) !important;
    background: #fff !important;
    color: var(--aw-premium-navy) !important;
    box-shadow: none !important;
}

.public-site :where(.btn-secondary, .btn-outline):hover,
.customer-portal-body :where(.btn.outline, .dash-btn-outline):hover,
.admin-body :where(.btn-outline-primary, .btn-outline-secondary):hover {
    border-color: #b9ccc5 !important;
    background: var(--aw-premium-soft) !important;
    color: var(--aw-premium-emerald-dark) !important;
}

/* Public website */
.public-site .navbar {
    border-bottom: 1px solid rgba(16, 35, 63, .08) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 24px rgba(16, 35, 63, .05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.public-site .nav-right > a:not(.nav-cta),
.public-site .lang-switch {
    border-color: var(--aw-premium-line) !important;
    background: #fff !important;
    color: var(--aw-premium-navy) !important;
}

.public-site .lang-btn.active {
    background: var(--aw-premium-soft) !important;
    color: var(--aw-premium-emerald-dark) !important;
}

.public-site .hero {
    background-color: #f8fbfa !important;
}

.public-site .hero-title {
    max-width: 930px;
    margin-inline: auto;
    color: var(--aw-premium-navy) !important;
}

.public-site .hero-title .highlight {
    color: var(--aw-premium-emerald) !important;
}

.public-site .hero-subtitle {
    max-width: 760px;
    margin-inline: auto;
    color: var(--aw-premium-muted) !important;
}

.public-site :where(.hero-badge, .license-badge) {
    border: 1px solid rgba(213, 169, 79, .38) !important;
    background: #fffaf0 !important;
    color: #745414 !important;
    box-shadow: none !important;
}

.public-site :where(
    .stat-card,
    .quick-card,
    .feature-card,
    .action-card,
    .calculator-card,
    .simulator-card,
    .support-duitnow,
    .bnpl-card
) {
    border: 1px solid var(--aw-premium-line) !important;
    border-radius: 8px !important;
    background: var(--aw-premium-surface) !important;
    box-shadow: var(--aw-premium-shadow) !important;
}

.public-site :where(.quick-card, .feature-card, .action-card):hover {
    border-color: #bdcec8 !important;
    box-shadow: var(--aw-premium-shadow-hover) !important;
    transform: translateY(-2px);
}

.public-site :where(.quick-card, .feature-card, .action-card) .material-icons-outlined {
    color: var(--aw-premium-emerald) !important;
}

.public-site :where(.quick-actions-section, .simulator-section, .calculator-section) {
    background-color: var(--aw-premium-canvas) !important;
}

.public-site footer {
    border-top: 3px solid var(--aw-premium-gold) !important;
    background: var(--aw-premium-navy) !important;
}

/* Customer portal */
.customer-portal-body .portal-sidebar {
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    background: var(--aw-premium-navy) !important;
    box-shadow: 12px 0 34px rgba(16, 35, 63, .12) !important;
}

.customer-portal-body .side-link {
    border-radius: 8px !important;
    color: rgba(255, 255, 255, .78) !important;
}

.customer-portal-body .side-link:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.customer-portal-body .side-link.active {
    border-left: 3px solid var(--aw-premium-gold) !important;
    background: var(--aw-premium-emerald) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
}

.customer-portal-body .portal-main {
    background-color: transparent !important;
}

.customer-portal-body :where(
    .card,
    .dash-card,
    .panel-surface,
    .overview-card,
    .wallet-row,
    .action-tile,
    .transaction-card,
    .loan-card,
    .trust-check,
    .meta-box
) {
    border: 1px solid var(--aw-premium-line) !important;
    border-radius: 8px !important;
    background: var(--aw-premium-surface) !important;
    box-shadow: var(--aw-premium-shadow) !important;
}

.customer-portal-body :where(.overview-card, .action-tile, .transaction-card, .loan-card):hover {
    border-color: #bdcec8 !important;
    box-shadow: var(--aw-premium-shadow-hover) !important;
    transform: translateY(-2px);
}

.customer-portal-body :where(.dashboard-command, .p2p-wallet-hero, .wallet-balance-card, .dash-profile) {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--aw-premium-navy) 0%, #164d52 100%) !important;
    box-shadow: 0 20px 48px rgba(16, 35, 63, .18) !important;
}

.customer-portal-body :where(.dashboard-command, .p2p-wallet-hero, .wallet-balance-card, .dash-profile)::after {
    animation-duration: 12s !important;
    opacity: .5;
}

.customer-portal-body :where(.dashboard-command, .p2p-wallet-hero, .wallet-balance-card, .dash-profile) :where(h1, h2, h3, p, strong, small) {
    color: #fff !important;
}

.customer-portal-body .mobile-menu-toggle,
.customer-portal-body .mobile-action-toggle {
    border: 1px solid rgba(255, 255, 255, .34) !important;
    background: var(--aw-premium-emerald) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(8, 127, 106, .24) !important;
}

.customer-portal-body :where(input, select, textarea) {
    border-color: var(--aw-premium-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--aw-premium-ink) !important;
}

.customer-portal-body :where(input, select, textarea):focus {
    border-color: var(--aw-premium-emerald) !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 106, .12) !important;
}

/* Admin panel */
.admin-body {
    --primary: var(--aw-premium-navy);
    --primary-light: var(--aw-premium-emerald);
    --accent: var(--aw-premium-gold);
    --surface: var(--aw-premium-canvas);
    --border: var(--aw-premium-line);
    --text: var(--aw-premium-ink);
}

.admin-body .sidebar {
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    background: var(--aw-premium-navy) !important;
    box-shadow: 12px 0 34px rgba(16, 35, 63, .12) !important;
}

.admin-body .nav-link {
    border-radius: 8px !important;
}

.admin-body .nav-link.active {
    border-left: 3px solid var(--aw-premium-gold) !important;
    background: var(--aw-premium-emerald) !important;
}

.admin-body .topbar {
    border-bottom-color: var(--aw-premium-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.admin-body :where(.panel, .stat-card, .card, .table-responsive) {
    border: 1px solid var(--aw-premium-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--aw-premium-shadow) !important;
}

.admin-body .stat-value {
    color: var(--aw-premium-emerald-dark) !important;
}

.admin-body .table > :not(caption) > * > * {
    border-bottom-color: #edf2f0 !important;
    padding: .8rem .75rem;
}

.admin-body .table thead th {
    background: var(--aw-premium-soft) !important;
    color: var(--aw-premium-navy) !important;
}

@keyframes awPremiumEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.public-site :where(.hero > *, .quick-card, .feature-card, .action-card),
.customer-portal-body :where(.dash-profile, .overview-card, .dashboard-main > .card, .dashboard-aside > .card),
.admin-body :where(.content-wrap > *, .stat-card, .panel) {
    animation: awPremiumEnter .34s ease-out both;
}

@media (max-width: 768px) {
    .public-site .hero-title {
        font-size: 2rem !important;
        line-height: 1.13 !important;
    }

    .public-site .hero-subtitle {
        font-size: .96rem !important;
        line-height: 1.65 !important;
    }

    .customer-portal-body .portal-main {
        padding-inline: 12px !important;
    }

    .customer-portal-body :where(.dashboard-command, .p2p-wallet-hero, .wallet-balance-card, .dash-profile) {
        border-radius: 8px !important;
    }

    .admin-body .content-wrap {
        padding: 16px !important;
    }
}

@media (max-width: 420px) {
    .public-site .hero-title {
        font-size: 1.76rem !important;
    }

    .customer-portal-body .mobile-menu-toggle {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    .customer-portal-body .mobile-action-toggle {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        border-radius: 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-site :where(.hero > *, .quick-card, .feature-card, .action-card),
    .customer-portal-body :where(.dash-profile, .overview-card, .dashboard-main > .card, .dashboard-aside > .card),
    .admin-body :where(.content-wrap > *, .stat-card, .panel) {
        animation: none !important;
    }
}