/* START Desktop view */
@media (min-width: 1201px) {
    /* ============================ Banner ============================ */
    .lx-banner-deposit-withdrawal {
        position: relative;
        min-height: 28rem;
        border-bottom-right-radius: 2rem;
        border-bottom-left-radius: 2rem;
        overflow: hidden;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 5rem 0 0 0;
        isolation: isolate;
    }

    .lx-banner-deposit-withdrawal .row {
        min-height: calc(28rem - 5rem);
        align-items: stretch;
    }

    .lx-banner-deposit-withdrawal::before,
    .lx-banner-deposit-withdrawal::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-banner-deposit-withdrawal::before {
        top: -120px;
        left: -80px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxDwOrbA 22s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal::after {
        bottom: -140px;
        right: -100px;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxDwOrbB 28s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title {
        position: relative;
        z-index: 1;
        margin-top: 2rem;
        text-align: left;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: left;
        margin: 4rem 0 0;
        font-size: 3rem;
        letter-spacing: -0.02em;
        line-height: 1.5;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxDwTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: left;
        color: #f0f6f8;
        font-size: 1.1rem;
        font-weight: 400;
        margin: 1rem 0 0;
        max-width: 620px;
        letter-spacing: 0.01em;
        line-height: 1.5;
        opacity: 0.95;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image img {
        display: block;
        margin: 0;
        max-width: 110%;
        height: auto;
    }

    .deposit-withdrawal-table-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin-top: 5rem;
    }

    /* Stretch the table container wider than the default Bootstrap 1140px so
       long currency rows can fit in two lines without crowding. */
    .deposit-withdrawal-table-section > .container {
        max-width: 1320px;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0 0 1rem 0;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-subtitle {
        text-align: center;
        font-size: 1.05rem;
        font-weight: 400;
        line-height: 1.6;
        color: #5d5c5c;
        margin: 0 0 2.5rem;
    }

    /* Both layouts are now rendered server-side; hide the card list at
       desktop width so only the table shows. */
    .lx-dw-mobile { display: none; }

    /* START deposit-withdrawal-tabs.php CSS */
    /* Tab */
    .lx-tab-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 2rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-tab-btn {
        padding: 0.65rem 1.5rem;
        border: 1px solid #e8edf2;
        background: #ffffff;
        color: #5d5c5c;
        cursor: pointer;
        border-radius: 2rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
        -webkit-appearance: none;
                appearance: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .lx-tab-btn:hover {
        border-color: rgba(31, 192, 208, 0.4);
        color: #199caa;
        transform: translateY(-1px);
    }

    .lx-tab-btn.active {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%);
        border-color: #199caa;
        color: #ffffff;
        box-shadow: 0 6px 18px rgba(31, 192, 208, 0.30);
    }

    .lx-tab-btn.active:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(31, 192, 208, 0.40);
    }

    /* Tab Content */
    .lx-tab-content {
        display: none;
    }

    .lx-tab-content.active {
        display: block;
    }

    /* Table — clean horizontal-divider design (no vertical borders).
       overflow stays visible so tooltips can pop above the cell bounds.
       Corner rounding is moved onto the corner cells themselves. */
    .lx-dw-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: auto;
        text-align: left;
        table-layout: fixed;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }

    .lx-dw-table th:first-child { border-top-left-radius: 1rem; }
    .lx-dw-table th:last-child  { border-top-right-radius: 1rem; }
    .lx-dw-table tbody tr:last-child td:first-child { border-bottom-left-radius: 1rem; }
    .lx-dw-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 1rem; }

    /* Table header — cyan band, white text, faint white column dividers */
    .lx-dw-table th {
        text-align: center;
        vertical-align: middle;
        padding: 0.7rem 0.7rem;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.55);
    }

    .lx-dw-table th:last-child {
        border-right: none;
    }

    /* Column widths — sized so each column's longest 2-line content fits.
       Sums to 100%. Tuned for the 1320px container set above. */
    .lx-dw-table th:nth-child(1),
    .lx-dw-table td:nth-child(1) { width: 15%; }   /* Available Options       */
    .lx-dw-table th:nth-child(2),
    .lx-dw-table td:nth-child(2) { width: 23%; }   /* Minimum Amount          */
    .lx-dw-table th:nth-child(3),
    .lx-dw-table td:nth-child(3) { width: 30%; }   /* Supported Currencies    */
    .lx-dw-table th:nth-child(4),
    .lx-dw-table td:nth-child(4) { width: 12%; }   /* Deposit Conditions      */
    .lx-dw-table th:nth-child(5),
    .lx-dw-table td:nth-child(5) { width: 20%; }   /* Deposit Fees (tiered)   */

    /* Table Cells — horizontal divider beneath each row + thin white column
       dividers (visible on the zebra rows, invisible on white rows). */
    .lx-dw-table td {
        text-align: center;
        vertical-align: middle;
        padding: 0.80rem 0.85rem;
        word-wrap: break-word;
        border: none;
        border-bottom: 1px solid #eef0f4;
        border-right: 1px solid #dde3ea;
        height: 80px;
        overflow: visible;
        max-height: 90px;
        color: #1a1a1a;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .lx-dw-table td:last-child {
        border-right: none;
    }

    /* Last row has no divider */
    .lx-dw-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Soft zebra — barely there, just enough to delineate alternate rows */
    .lx-dw-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    /* Row hover — subtle background highlight, no transform */
    .lx-dw-table tbody tr {
        transition: background 0.3s ease;
    }

    .lx-dw-table tbody tr:hover {
        background-color: #eef5f8;
    }

    /* Logo and text */
    .lx-dw-logo-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lx-dw-logo {
        width: auto;
        height: auto;
        max-height: 32px;
        max-width: 80%;
        object-fit: contain;
        margin-bottom: 0.5rem;
    }

    .lx-dw-title-text {
        text-align: center;
        font-weight: 600;
        font-size: 0.85rem;
        color: #1a1a1a;
        letter-spacing: -0.01em;
    }

    /* ============================ Tooltips ============================ */
    .lx-tooltip {
        position: relative;
        display: inline-flex;
        cursor: pointer;
        font-style: normal;
        color: #199caa;
        font-weight: 700;
        z-index: auto;
        padding: 0.15rem 0.25rem;
        transition: color 0.25s ease;
    }

    .lx-tooltip:hover {
        color: #1eb1c2;
    }

    /* Tooltip content — white card; JS positions it (fixed coords) and toggles
       the .is-shown class. CSS keyframes handle the slide-down animation. */
    .lx-tooltip-content {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: calc(100% + 0.65rem);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 320px;
        background: #ffffff;
        color: #1a1a1a;
        text-align: left;
        padding: 0.85rem 1rem;
        border-radius: 0.85rem;
        border: 1px solid #e8edf2;
        box-shadow:
            0 18px 36px rgba(15, 32, 39, 0.15),
            0 6px 14px rgba(15, 32, 39, 0.08);
        white-space: normal;
        pointer-events: auto;
        z-index: 9999;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
    }

    /* Default placement: tooltip BELOW icon → slide DOWN from -8px */
    .lx-tooltip-content.is-shown {
        visibility: visible;
        animation: lxDwTipSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Flipped placement: tooltip ABOVE icon → slide UP from +8px */
    .lx-tooltip-content[data-placement="above"].is-shown {
        animation: lxDwTipSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

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

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

    /* Little white triangle arrow — positioned dynamically by JS via the
       --lx-tooltip-arrow-x custom property so it always points at the icon
       even when the tooltip is clamped against a viewport edge. */
    .lx-tooltip-content::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: var(--lx-tooltip-arrow-x, 50%);
        transform: translateX(-50%) translateY(50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #e8edf2;
        border-top: 1px solid #e8edf2;
    }

    /* When JS flips the tooltip above the icon (no room below), point the
       arrow downward instead. */
    .lx-tooltip-content[data-placement="above"]::after {
        bottom: auto;
        top: 100%;
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        border-left: none;
        border-top: none;
        border-right: 1px solid #e8edf2;
        border-bottom: 1px solid #e8edf2;
    }

    .lx-tooltip-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.65rem;
        overflow: hidden;
        border: 1px solid #e8edf2;
    }

    .lx-tooltip-table th {
        padding: 0.5rem 0.65rem;
        text-align: left;
        color: #ffffff;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        font-size: 0.8rem;
        font-weight: 600;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.30);
    }

    .lx-tooltip-table th:last-child {
        border-right: none;
    }

    .lx-tooltip-table td {
        padding: 0.5rem 0.65rem;
        text-align: left;
        color: #1a1a1a;
        background: #ffffff;
        font-size: 0.8rem;
        vertical-align: middle;
        word-wrap: break-word;
        border: none;
        border-top: 1px solid #eef0f4;
    }

    .lx-tooltip-table tbody tr:nth-child(even) td {
        background: #fafbfc;
    }
    /* END deposit-withdrawal-tabs.php CSS */

    .deposit-withdrawal-table-section .depsoit-withdrawal-note {
        font-size: 1rem;
        color:#000000;
    }

    .lx-deposit-withdrawal-third-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        margin-top: 4rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-box {
        position: relative;
        background: #f2f4f8;
        margin: 5rem auto;
        border-radius: 2rem;
        padding: 0;
        height: 30rem;
        width: 100%;
        max-width: 1200px;
        overflow: hidden;
        border: 1px solid #e8edf2;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 6px 14px rgba(0, 0, 0, 0.06);
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title {
        padding: 3rem 2rem 3rem 3rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title h6 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        color: #0f2027;
        font-size: 2.4rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.25;
        margin: 0;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        color: #5d5c5c;
        font-size: 1rem;
        line-height: 1.6;
        margin: 1rem 0 1.5rem;
    }

    /* PHP markup uses .lx-deposit-withdrawal-four-button — original CSS had a
       typo (.x-deposit-withdrawal-four-button) so the button was unstyled. */
    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button {
        text-align: left;
        width: 100%;
        margin: 0;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        padding: 0.65rem 1.75rem;
        cursor: pointer;
        transition:
            background 0.4s ease,
            border-color 0.4s ease,
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.4s ease;
        box-shadow: 0 4px 14px rgba(31, 192, 208, 0.30);
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account:hover {
        background-color: #1fc0d0;
        border-color: #1fc0d0;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(31, 192, 208, 0.40);
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image {
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image img {
        display: block;
        margin: 0;
        max-width: 90%;
        height: auto;
        position: relative;
        bottom: 0;
        z-index: 1;
    }
}
/* END Desktop view */

/* START Tablet view */
@media (min-width: 768px) and (max-width: 1200px) {
    /* ============================ Banner ============================ */
    .lx-banner-deposit-withdrawal {
        position: relative;
        min-height: 18rem;
        border-bottom-right-radius: 2rem;
        border-bottom-left-radius: 2rem;
        overflow: hidden;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 2.5rem 0 0 0;
        isolation: isolate;
    }

    .lx-banner-deposit-withdrawal .row {
        min-height: calc(18rem - 2.5rem);
        align-items: stretch;
    }

    .lx-banner-deposit-withdrawal::before,
    .lx-banner-deposit-withdrawal::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-banner-deposit-withdrawal::before {
        top: -100px;
        left: -60px;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxDwOrbA 24s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal::after {
        bottom: -120px;
        right: -80px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxDwOrbB 30s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title {
        position: relative;
        z-index: 1;
        margin-top: 1rem;
        text-align: center;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 1rem 0 0;
        font-size: 2.2rem;
        letter-spacing: -0.02em;
        line-height: 1.5;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxDwTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 1rem;
        font-weight: 400;
        margin: 0.85rem auto 0;
        max-width: 520px;
        letter-spacing: 0.01em;
        line-height: 1.5;
        opacity: 0.95;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image img {
        display: block;
        margin: 0 auto;
        /* Adjust max-width to taste — controls how big the payment-logos
           graphic appears on tablet relative to the text column. */
        max-width: 320px;
        width: 100%;
        height: auto;
    }

    .deposit-withdrawal-table-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-title {
        text-align: center;
        font-size: 2rem;
        margin: 3rem 0 1rem 0;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-subtitle {
        text-align: center;
        font-size: 1rem;
        font-weight: normal;
    }

     .deposit-withdrawal-table-section .depsoit-withdrawal-note {
        font-size: 1rem;
        color:#000000;
    }

    .lx-deposit-withdrawal-third-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        margin: 2rem 0 4rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-box {
        background: #f2f4f8;
        margin: 0 auto 2rem;
        border-radius: 1.5rem;
        padding: 2rem;
        width: 100%;
        max-width: 900px;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title {
        text-align: left;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title h6 {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 0.75rem;
        line-height: 1.25;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 0 1.25rem;
        color: #5e6282;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button {
        text-align: left;
        width: 100%;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #fff;
        border-radius: 2rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
        width: fit-content;
        padding: 0.4rem 1.25rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image img {
        position: static;
        display: block;
        margin: 0 auto;
        max-width: 260px;
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    /* Both layouts are now rendered server-side; hide the desktop tab/table
       at tablet width so only the card list shows. */
    .lx-tabs { display: none; }

    /* START deposit-withdrawal-mobile.php CSS */
    .lx-dw-mobile {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #f6f7fb;
        padding-bottom: 20px;
    }

    .lx-dw-tabs {
        position: sticky;
        top: 0;
        z-index: 999;
        display: flex;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #eaecef;
    }

    .lx-dw-tab {
        flex: 1;
        padding: 14px 12px;
        border: none;
        background: transparent;
        font-weight: 600;
        font-size: 0.92rem;
        color: #6b7280;
        cursor: pointer;
        position: relative;
    }

    .lx-dw-tab.active {
        color: #000000;
        font-size: 1.5rem;
        font-weight: bold;
    }

    .lx-dw-tab.active::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 6px;
        height: 3px;
        background: #199caa;
        border-radius: 999px;
    }

    .lx-dw-group-title {
        font-size: 0.72rem;
        font-weight: 700;
        color: #9ca3af;
        margin: 18px 14px 6px;
        text-transform: uppercase;
    }

    .lx-dw-card {
        background: #fff;
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 2rem;
        border: 1px solid #eef0f4;
        box-shadow: 0 6px 18px rgba(17,24,39,0.05);
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
        cursor: pointer;
        transform-origin: center;
        will-change: transform;
        position: relative;
        z-index: 1;
        isolation: isolate;
        backface-visibility: hidden;
    }

    .lx-dw-top {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .lx-dw-logo {
        width: 20%;
        height: 25%;
        text-align: center;
        margin: auto;
        object-fit: contain;
    }

    .lx-dw-title {
        font-weight: 650;
        color: #111827;
        display: none;
    }

    /* KEY/VALUE */
    .lx-dw-kv {
        margin-top: 8px;
    }

    .lx-dw-row {
        display: grid;
        grid-template-columns: 40% 60%;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
        align-items: start;
    }


    .lx-dw-row:last-child {
        border-bottom: none;
    }

    .lx-dw-key {
        font-size: 1rem;
        color: #6b7280;
        text-align: left;
        border-right: 1px solid #f1f5f9;
    }

    .lx-dw-val {
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
        color: #000000;
        word-break: break-word;
    }

    /* NOTE: .lx-toast used to live here. It has been moved to the shared
       section at the bottom of this file — the toast <div> is appended to
       <body> by JS on every breakpoint, so scoping its styles to the
       tablet/mobile media queries left it unstyled (and therefore visible
       as raw "Deposit View" text) on desktop. */

    /* PANEL BASE STATE (IMPORTANT FIX) */
    .lx-dw-panel {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        display: none;
    }

    /* when active (optional hook if you want later expansion) */
    .lx-dw-panel.active {
        display: block;
    }

    /* Tap-driven tooltip — matches desktop visual style, opens via .is-open
       set by the tap handler in deposit-withdrawal-mobile.php. */
    .lx-tooltip {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-style: normal;
        color: #199caa;
        font-weight: 700;
        padding: 0.15rem 0.25rem;
    }

    .lx-tooltip-icon {
        margin-left: 4px;
        font-style: normal;
        font-weight: 700;
    }

    .lx-tooltip-content {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: calc(100% + 0.65rem);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 280px;
        background: #ffffff;
        color: #1a1a1a;
        text-align: left;
        padding: 0.85rem 1rem;
        border-radius: 0.85rem;
        border: 1px solid #e8edf2;
        box-shadow:
            0 18px 36px rgba(15, 32, 39, 0.15),
            0 6px 14px rgba(15, 32, 39, 0.08);
        white-space: normal;
        pointer-events: none;
        z-index: 9999;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
    }

    /* JS portals .lx-tooltip-content into <body> with position:fixed coords
       and adds .is-shown — so we react to the class on the content itself,
       not on the wrapper, since the wrapper is no longer the parent. */
    .lx-tooltip-content.is-shown {
        visibility: visible;
        pointer-events: auto;
        animation: lxDwTipTapSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .lx-tooltip-content::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #e8edf2;
        border-top: 1px solid #e8edf2;
    }

    .lx-tooltip-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.65rem;
        overflow: hidden;
        border: 1px solid #e8edf2;
    }

    .lx-tooltip-table th {
        padding: 0.5rem 0.65rem;
        text-align: left;
        color: #ffffff;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        font-size: 0.75rem;
        font-weight: 600;
        border: none;
    }

    .lx-tooltip-table td {
        padding: 0.5rem 0.65rem;
        text-align: left;
        color: #1a1a1a;
        background-color: #ffffff;
        vertical-align: middle;
        word-wrap: break-word;
        font-size: 0.8rem;
        border-top: 1px solid #e8edf2;
    }
    /* END deposit-withdrawal-mobile.php CSS */
}
/* END Tablet view */

/* START Mobile view */
@media (max-width: 767px) {
    /* ============================ Banner ============================ */
    .lx-banner-deposit-withdrawal {
        position: relative;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        overflow: hidden;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 3rem 0 0 0;
        isolation: isolate;
    }

    .lx-banner-deposit-withdrawal::before,
    .lx-banner-deposit-withdrawal::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-banner-deposit-withdrawal::before {
        top: -80px;
        left: -50px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxDwOrbA 26s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal::after {
        bottom: -90px;
        right: -60px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxDwOrbB 32s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title {
        position: relative;
        z-index: 1;
        margin-top: 1rem;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 1rem 0 0;
        font-size: 1.85rem;
        letter-spacing: -0.02em;
        line-height: 1.5;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxDwTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 0.95rem;
        font-weight: 400;
        margin: 0.85rem auto 0;
        max-width: 480px;
        padding: 0 0.5rem;
        letter-spacing: 0.01em;
        line-height: 1.5;
        opacity: 0.95;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image {
        position: relative;
        z-index: 1;
        margin: 1.5rem 0 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-image img {
        display: block;
        margin: 0;
        max-width: 80%;
        height: auto;
    }

    .deposit-withdrawal-table-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-title {
        text-align: center;
        font-size: 2rem;
        margin: 3rem 0 1rem 0;
    }

    .deposit-withdrawal-table-section .deposit-withdrawal-table-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.65;
        color: #5d5c5c;
        margin: 0 auto 2rem;
        text-align: center;
        padding: 0 0.5rem;
    }

     .deposit-withdrawal-table-section .depsoit-withdrawal-note {
        font-size: 1rem;
        color:#000000;
    }

    .lx-deposit-withdrawal-third-section {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        margin: 1.5rem 0 3rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-box {
        background: #f2f4f8;
        margin: 0 auto 1.5rem;
        border-radius: 1.25rem;
        padding: 1.75rem 1.25rem;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title {
        text-align: center;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title h6 {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0 0 0.75rem;
        line-height: 1.3;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-title p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0 auto 1.25rem;
        color: #5e6282;
        max-width: 320px;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button {
        text-align: center;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #fff;
        border-radius: 2rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
        width: fit-content;
        padding: 0.4rem 1.25rem;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image img {
        position: static;
        display: block;
        margin: 0 auto;
        max-width: 220px;
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    /* Both layouts are now rendered server-side; hide the desktop tab/table
       at mobile width so only the card list shows. */
    .lx-tabs { display: none; }

    /* START deposit-withdrawal-mobile.php CSS */
    .lx-dw-mobile {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #f6f7fb;
        padding-bottom: 20px;
    }

    .lx-dw-tabs {
        position: sticky;
        top: 0;
        z-index: 999;
        display: flex;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #eaecef;
    }

    .lx-dw-tab {
        flex: 1;
        padding: 14px 12px;
        border: none;
        background: transparent;
        font-weight: 600;
        font-size: 0.92rem;
        color: #6b7280;
        cursor: pointer;
        position: relative;
    }

    .lx-dw-tab.active {
        color: #000000;
        font-size: 1.5rem;
        font-weight: bold;
    }

    .lx-dw-tab.active::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 6px;
        height: 3px;
        background: #199caa;
        border-radius: 999px;
    }

    .lx-dw-group-title {
        font-size: 0.72rem;
        font-weight: 700;
        color: #9ca3af;
        margin: 18px 14px 6px;
        text-transform: uppercase;
    }

    .lx-dw-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        margin: 10px 12px;
        border: 1px solid #eef0f4;
        box-shadow: 0 6px 18px rgba(17,24,39,0.05);
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
        cursor: pointer;
        transform-origin: center;
        will-change: transform;
        position: relative;
        z-index: 1;
        isolation: isolate;
        backface-visibility: hidden;
    }

    /* zoom state */
    /* .lx-dw-card.is-zoomed {
        transform: scale(1.08) translateY(-2px);
        box-shadow: 0 30px 70px rgba(0,0,0,0.22);
        z-index: 999;
    } */

    /* .lx-dw-card:active {
        transform: scale(0.98);
    } */

    .lx-dw-top {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    /* .lx-dw-logo {
        width: 28px;
        height: 28px;
        object-fit: contain;
    } */

    .lx-dw-logo {
        width: 30%;
        height: 25%;
        text-align: center;
        margin: auto;
        object-fit: contain;
    }

    .lx-dw-title {
        font-weight: 650;
        color: #111827;
        display: none;
    }

    /* KEY/VALUE */
    .lx-dw-kv {
        margin-top: 8px;
    }

    /* .lx-dw-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    } */

    .lx-dw-row {
        display: grid;
        grid-template-columns: 45% 55%;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
        align-items: start;
    }

    .lx-dw-row:last-child {
        border-bottom: none;
    }

    .lx-dw-key {
        font-size: 0.78rem;
        color: #6b7280;
        text-align: left;
        border-right: 1px solid #f1f5f9;
    }

    .lx-dw-val {
        font-size: 0.82rem;
        font-weight: 600;
        text-align: left;
        color: #000000;
        word-break: break-word;
    }

    /* NOTE: .lx-toast used to live here. It has been moved to the shared
       section at the bottom of this file — see the comment in the tablet
       block above for why. */

    /* PANEL BASE STATE (IMPORTANT FIX) */
    .lx-dw-panel {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        display: none;
    }

    /* when active (optional hook if you want later expansion) */
    .lx-dw-panel.active {
        display: block;
    }

    /* Tap-driven tooltip — matches desktop visual style, opens via .is-open
       set by the tap handler in deposit-withdrawal-mobile.php. */
    .lx-tooltip {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-style: normal;
        color: #199caa;
        font-weight: 700;
        padding: 0.15rem 0.25rem;
    }

    .lx-tooltip-icon {
        margin-left: 4px;
        font-style: normal;
        font-weight: 700;
    }

    .lx-tooltip-content {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: calc(100% + 0.65rem);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 240px;
        background: #ffffff;
        color: #1a1a1a;
        text-align: left;
        padding: 0.75rem 0.9rem;
        border-radius: 0.85rem;
        border: 1px solid #e8edf2;
        box-shadow:
            0 18px 36px rgba(15, 32, 39, 0.15),
            0 6px 14px rgba(15, 32, 39, 0.08);
        white-space: normal;
        pointer-events: none;
        z-index: 9999;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 1.5;
    }

    /* JS portals .lx-tooltip-content into <body> with position:fixed coords
       and adds .is-shown — so we react to the class on the content itself,
       not on the wrapper, since the wrapper is no longer the parent. */
    .lx-tooltip-content.is-shown {
        visibility: visible;
        pointer-events: auto;
        animation: lxDwTipTapSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .lx-tooltip-content::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #e8edf2;
        border-top: 1px solid #e8edf2;
    }

    .lx-tooltip-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.65rem;
        overflow: hidden;
        border: 1px solid #e8edf2;
    }

    .lx-tooltip-table th {
        padding: 0.45rem 0.6rem;
        text-align: left;
        color: #ffffff;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        font-size: 0.7rem;
        font-weight: 600;
        border: none;
    }

    .lx-tooltip-table td {
        padding: 0.45rem 0.6rem;
        text-align: left;
        color: #1a1a1a;
        background-color: #ffffff;
        vertical-align: middle;
        word-wrap: break-word;
        font-size: 0.75rem;
        border-top: 1px solid #e8edf2;
    }
    /* END deposit-withdrawal-mobile.php CSS */
}
/* END Mobile view */


/* ================================================================
   TOAST (shared — must NOT live inside a media query)
   ================================================================
   showToast() in deposit-withdrawal-mobile.php appends
   <div class="lx-toast"> to <body>, and that script runs at every
   breakpoint because the card markup is rendered server-side and only
   hidden with CSS. When these rules were scoped to the tablet/mobile
   media queries, the div fell back to an unstyled block at desktop
   width and rendered as plain black "Deposit View" text at the bottom
   of the page. Keeping it global means the toast is always correctly
   positioned and hidden (opacity: 0) until .show is applied.
   ================================================================ */
.lx-toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    opacity: 0;
    pointer-events: none;   /* never intercept clicks while invisible */
    transition: all 0.2s ease;
    z-index: 9999;
}

.lx-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}


/* ============================ Animations (shared) ============================ */
/* Tap-tooltip slide-down: tablet + mobile portal the popup into <body>
   with position:fixed pixel coords (transform cleared), so this is Y-only. */
@keyframes lxDwTipTapSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lxDwTitleShimmer {
    0%   { background-position: 150% center; }
    100% { background-position: -150% center; }
}

@keyframes lxDwOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 40px) scale(1.12); }
}

@keyframes lxDwOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, -40px) scale(1.15); }
}

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


/* ================================================================
   ENGAGEMENT LAYER — scroll animations + interactive enhancements
   ================================================================ */

/* Banner load-in — staggered fade-up (fires on page load, no IO) */
.lx-dw-page .anim-banner-1,
.lx-dw-page .anim-banner-2,
.lx-dw-page .anim-banner-3 {
    opacity: 0;
}
.lx-dw-page .anim-banner-1 { animation: lxDwFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.lx-dw-page .anim-banner-2 { animation: lxDwFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.lx-dw-page .anim-banner-3 { animation: lxDwFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }

/* Title fades in AND keeps shimmering simultaneously */
.lx-dw-page .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-title.anim-banner-1 {
    animation:
        lxDwFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
        lxDwTitleShimmer 11s ease-in-out infinite;
}

/* Scroll-triggered base states — toggled to .is-visible by the IO.
   NOTE: no `will-change: transform` here. will-change creates a containing
   block for position:fixed children, which would trap the tooltip inside
   a row instead of relative to the viewport. */
.lx-dw-page .anim-up,
.lx-dw-page .anim-left,
.lx-dw-page .anim-right,
.lx-dw-page .anim-scale {
    opacity: 0;
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.lx-dw-page .anim-up    { transform: translateY(28px); }
.lx-dw-page .anim-left  { transform: translateX(-32px); }
.lx-dw-page .anim-right { transform: translateX(32px); }
.lx-dw-page .anim-scale { transform: scale(0.96); }

.lx-dw-page .anim-float-up {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.lx-dw-page .anim-up.is-visible,
.lx-dw-page .anim-left.is-visible,
.lx-dw-page .anim-right.is-visible,
.lx-dw-page .anim-scale.is-visible,
.lx-dw-page .anim-float-up.is-visible {
    opacity: 1;
    transform: none;
}

.lx-dw-page .anim-d1 { transition-delay: 0.15s; }
.lx-dw-page .anim-d2 { transition-delay: 0.30s; }
.lx-dw-page .anim-d3 { transition-delay: 0.45s; }


/* Table rows cascade-in once the table scrolls into view.
   No will-change for the same reason as above — table rows wrap the
   tooltip icons, and a containing block here would break position:fixed. */
.lx-dw-page .lx-dw-row-anim {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lx-dw-page .lx-dw-row-anim.is-visible {
    opacity: 1;
    transform: none;
}


/* Tab content fades when switching between Deposit / Withdrawal.
   IMPORTANT: opacity-only animation — no transform. Any non-`none`
   transform (even `translateY(0)`) creates a containing block that
   would trap the position:fixed tooltip inside the tab content. */
.lx-dw-page .lx-tab-content {
    transition: opacity 0.4s ease;
}

.lx-dw-page .lx-tab-content.active {
    animation: lxDwFadeInTab 0.45s ease both;
}

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


/* Tab buttons get a subtle press feedback */
.lx-dw-page .lx-tab-btn:active {
    transform: scale(0.96);
}


/* Open Account button — branded shimmer-sweep on hover */
.lx-dw-page .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account {
    position: relative;
    overflow: hidden;
}

.lx-dw-page .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 75%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-22deg);
    transition: left 0.9s ease;
    pointer-events: none;
}

.lx-dw-page .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-button .btn-lx-open-account:hover::before {
    left: 130%;
}


/* Gentle floating animation for the third-section feature image */
.lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image img {
    animation: lxDwFloat 3.5s ease-in-out infinite;
    will-change: transform;
}

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


/* ================================================================
   Reduced-motion fallback
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .lx-banner-deposit-withdrawal::before,
    .lx-banner-deposit-withdrawal::after,
    .lx-banner-deposit-withdrawal .lx-banner-deposit-withdrawal-title .deposit-withdrawal-title {
        animation: none !important;
    }
    .lx-dw-page .anim-banner-1,
    .lx-dw-page .anim-banner-2,
    .lx-dw-page .anim-banner-3 {
        animation: none;
        opacity: 1;
    }
    .lx-dw-page .anim-up,
    .lx-dw-page .anim-left,
    .lx-dw-page .anim-right,
    .lx-dw-page .anim-scale,
    .lx-dw-page .anim-float-up,
    .lx-dw-page .lx-dw-row-anim {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .lx-deposit-withdrawal-third-section .lx-deposit-withdrawal-four-image img {
        animation: none;
        transform: none;
    }
    .lx-toast {
        transition: none;
    }
}