/* ===========================================================
   Layout switch — cards on desktop, accordion on tablet/mobile
   =========================================================== */
@media (max-width: 1200px) {
    .lx-account-cards,
    .lx-expand-button {
        display: none !important;
    }
}

@media (min-width: 1201px) {
    .lx-mobile-accordion {
        display: none !important;
    }
}


/* START Desktop view */
@media (min-width: 1201px) {
    /* ============================ Banner ============================ */
    .lx-banner-account-types {
        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-account-types .row {
        min-height: calc(28rem - 5rem);
        align-items: stretch;
    }

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

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

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

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

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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: lxAtTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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-account-types .lx-banner-account-types-image {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-account-types .lx-banner-account-types-image img {
        display: block;
        margin: 0;
        max-width: 94%;
        height: auto;
    }

    .account-types-table-section .account-types-table-title {
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 5rem 0 1rem 0;
    }

    .account-types-table-section .account-types-table-subtitle {
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.05rem;
        font-weight: 400;
        line-height: 1.6;
        color: #5d5c5c;
        margin: 0 0 2.5rem;
    }

    .lx-account-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        width: 100%;
    }

    .lx-account-cards .lx-account-card {
        border-radius: 1rem;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    }

    .lx-account-cards .lx-account-card:hover {
        transform: translateY(-4px);
        border-color: rgba(31, 192, 208, 0.4);
        box-shadow: 0 14px 32px rgba(31, 192, 208, 0.12);
    }

    /* Card header — cyan gradient band */
    .lx-account-cards .lx-account-card .lx-card-header {
        background: linear-gradient(180deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff;
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 0.7rem 0.8rem;
    }

    /* Summary section padding */
    .lx-account-cards .lx-card-summary {
        padding: 0 1rem;
    }

    /* Label / value — smaller, tighter */
    .lx-account-cards .lx-card-summary .lx-label {
        color: #6b7280;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        display: block;
        font-size: 0.78rem;
        line-height: 1.2;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-value {
        color: #111827;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 600;
        white-space: nowrap;
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Minimum deposit — centered banner area */
    .lx-account-cards .lx-card-min-deposit {
        text-align: center;
        margin-top: 1.5rem;
        padding: 0 1rem;
    }

    .lx-account-cards .lx-card-min-deposit .lx-label {
        color: #4b5563;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 0.95rem;
        white-space: normal;
        display: inline;
    }

    .lx-account-cards .lx-card-min-deposit .lx-value {
        color: #111827;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        white-space: normal;
        display: inline;
        margin-left: 0.25rem;
    }

    /* Open Account button — refined cyan pill */
    .lx-account-cards .lx-card-action {
        text-align: center;
        margin: 0.5rem 0 2rem;
        padding: 0 1rem;
    }

    .lx-account-cards .lx-open-account-btn {
        display: inline-block;
        margin: 0;
        padding: 0.55rem 1.75rem;
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%);
        color: #ffffff;
        border-radius: 2rem;
        text-decoration: none;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 4px 14px rgba(31, 192, 208, 0.30);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.4s ease;
    }

    .lx-account-cards .lx-open-account-btn:hover {
        background: linear-gradient(135deg, #1fc0d0 0%, #1aa7b6 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(31, 192, 208, 0.45);
    }

    /* Leverage rows — label left, value right (horizontal alignment) */
    .lx-account-cards .lx-card-summary .lx-leverage-label {
        color: #6b7280;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 0.78rem;
        line-height: 1.5;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-leverage-value {
        color: #111827;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 0.8rem;
        line-height: 1.5;
        white-space: nowrap;
    }

    /* "Leverage (up to)" section header inside summary */
    .lx-account-cards .lx-card-summary .col-lg-12:first-child {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        color: #4b5563;
        margin-bottom: 0.4rem;
    }

    /* Override the col-lg-* stacking for leverage rows so each is a tight
       horizontal label+value pair (matches the photo layout). */
    .lx-account-cards .lx-card-summary .group-leverage {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin: 0 !important;
        /* Keep horizontal padding so the row's left/right edges line up with
           the col-lg-6 rows above (Bootstrap col gutter — ~0.75rem each side).
           Only override top/bottom for tighter row spacing. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        gap: 0.5rem;
        flex-wrap: nowrap !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage > div {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-8 {
        flex: 1 1 auto !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-4 {
        text-align: right;
    }

    /* Expand section (Show More) */
    .lx-card-expand {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        padding: 0 1rem;
    }

    .lx-card-expand.active {
        max-height: 1200px;
    }

    .lx-account-cards .lx-card-expand .lx-label {
        color: #6b7280;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        white-space: normal;
        display: block;
        font-size: 0.78rem;
        line-height: 1.4;
        margin-bottom: 0.15rem;
    }

    .lx-account-cards .lx-card-expand .lx-value {
        color: #111827;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 600;
        white-space: normal;
        display: block;
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .lx-toggle-btn {
        background: none;
        border: none;
        color: #1eb1c2;
        font-weight: 600;
        padding: 0.75rem;
        cursor: pointer;
        transition: color 0.3s ease;
        font-size: 0.9rem;
    }

    .lx-toggle-btn:hover {
        color: #157f8b;
    }

    /* Each label/value pair stacks vertically inside its column */
    .lx-card-expand .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.4rem;
        flex-wrap: nowrap;
    }

    .lx-card-summary .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.4rem;
    }

    /* Tighter horizontal divider */
    .lx-row-divider {
        width: 100%;
        height: 1px;
        background-color: #eef0f4;
        margin: 0.3rem 0;
        margin: 12px 0;
    }

    /* Tooltip icon — small cyan question mark */
    .lx-tooltip-icon {
        font-size: 0.78rem;
        cursor: pointer;
        transition: transform 0.2s ease, color 0.2s ease;
        color: #199caa;
    }

    .lx-tooltip-icon:hover {
        transform: scale(1.1);
        color: #1eb1c2;
    }

    /* Tighten the row spacing in summary */
    .lx-account-cards .lx-card-summary .row.mb-2 {
        margin-bottom: 0 !important;
    }

    /* Label group — keeps tooltip icon snug to the label */
    .lx-account-cards .lx-label-group {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-bottom: 0.15rem;
    }

    /* Tooltip popup — matches deposit-withdrawal tooltip design.
       JS portals it into <body> and sets fixed coordinates + arrow offset. */
    .lx-tooltip-popup {
        position: fixed;
        width: max-content;
        max-width: 280px;
        padding: 0.85rem 1rem;
        background: #ffffff;
        color: #1a1a1a;
        border: 1px solid #e8edf2;
        border-radius: 0.85rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
        box-shadow:
            0 18px 36px rgba(15, 32, 39, 0.15),
            0 6px 14px rgba(15, 32, 39, 0.08);
        z-index: 9999;
        pointer-events: none;
        text-align: left;
        opacity: 0;
        visibility: hidden;
    }

    /* Arrow that points up at the icon — left position is set dynamically by
       JS via the --lx-tooltip-arrow-x custom property so it tracks the icon
       even when the popup is clamped against a viewport edge. */
    .lx-tooltip-popup::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;
    }

    .lx-tooltip-popup.is-shown {
        visibility: visible;
        animation: lxAtTipSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }



    .lx-balance-row {
        display: block;
        justify-content: space-between;
        align-items: center;
    }

    .lx-label-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .lx-label {
        /* white-space: nowrap; */
        white-space: normal;
    }

    .lx-tooltip-icon {
        flex-shrink: 0;
    }

    .lx-expand-button.col-lg-12 {
        display: flex;
        justify-content: center;
        /* margin: auto; */
        width: 100%;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 0 !important;
    }

    .lx-toggle-all-btn {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    .lx-toggle-all-btn:hover {
        background-color: #148094;
        border-color: #148094;
    }

    /* "Refer [?] for the Terms and Conditions" line below the toggle button */
    .lx-terms-line {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.5rem;
        color: #4b5b6f;
        font-size: 1rem;
        font-weight: 400;
    }

    .lx-terms-line .lx-terms-icon {
        font-size: 1.05rem;
        color: #199caa;
    }

    /* ============================ Section title ============================ */
    .lx-account-dynamic {
        display: block;
        text-align: center;
        margin: 5rem auto 0;
        max-width: 1200px;
        padding: 0 1rem;
    }

    .lx-account-dynamic .dynamic-leverage-tiering-system-one {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lx-account-dynamic .title-dynamic-leverage-tiering-system-one {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0;
        display: block;
    }

    .lx-account-dynamic .content-dynamic-leverage-tiering-system-one {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.05rem;
        line-height: 1.6;
        color: #5d5c5c;
        max-width: 880px;
        /* islamic-account/index.css is enqueued globally and has the same
           selector with `margin: 3rem 0 2rem 0` (no auto) — without these
           !importants, that rule wins and the block stops centering. */
        margin: 1.25rem auto 2.5rem !important;
        font-weight: 400;
        display: block;
        text-align: center !important;
    }

    /* ============================ Dynamic leverage table — DW-style design ============================ */
    .lx-dynamic-leverage {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: auto;
        text-align: center;
        table-layout: fixed;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        border-radius: 0.8rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }

    /* Reset the hard borders. !important is needed because
       islamic-account/index.css is enqueued globally and sets
       `border: 1px solid #000` on the same selector — without this it wins
       the cascade and shows hard black borders on every cell. */
    .lx-dynamic-leverage th,
    .lx-dynamic-leverage td {
        border: none !important;
        text-align: center;
        vertical-align: middle;
    }

    /* The empty top-left corner cell stays transparent so the wide
       "Account Balance" tab reads as a floating chip separated from "Leverage (Up To)" */
    .lx-dynamic-leverage thead tr:first-child th.lx-dl-corner,
    .lx-dynamic-leverage thead tr:first-child th:first-child {
        background: transparent;
        border: none;
        padding: 0;
    }

    /* "Account Balance" wide tab — DW gradient, both top corners rounded */
    .lx-dynamic-leverage thead tr:first-child th:nth-child(2) {
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.01em;
        padding: 0.9rem 0.7rem;
    }

    /* "Leverage (Up To)" tab — stands alone in row 2 col 1, top-left rounded */
    .lx-dynamic-leverage thead tr:nth-child(2) th:first-child {
        border-top-left-radius: 0.8rem;
    }

    /* Sub-header row — DW gradient, faint white column dividers.
       !important to beat the `border: none !important` reset above. */
    .lx-dynamic-leverage thead tr:nth-child(2) th {
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.01em;
        padding: 0.7rem 0.7rem;
        border-right: 1px solid rgba(255, 255, 255, 0.55) !important;
    }

    .lx-dynamic-leverage thead tr:nth-child(2) th:last-child {
        border-right: none !important;
    }

    /* Body cells — DW pattern: horizontal hairline + thin vertical column divider.
       !important on these so they survive the `border: none !important` reset
       above (which is needed to beat the islamic-account global override). */
    .lx-dynamic-leverage tbody td {
        padding: 0.85rem 0.85rem;
        color: #1a1a1a;
        font-size: 0.85rem;
        line-height: 1.5;
        border-bottom: 1px solid #eef0f4 !important;
        border-right: 1px solid #dde3ea !important;
    }

    .lx-dynamic-leverage tbody td:last-child {
        border-right: none !important;
    }

    .lx-dynamic-leverage tbody tr:last-child td {
        border-bottom: none !important;
    }

    /* Zebra rows — white / light blue-grey alternating.
       !important on both because islamic-account/index.css enqueues globally
       and sets odd→#f2f4f8 / even→#e6e6e6 on the same selector. */
    .lx-dynamic-leverage tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    .lx-dynamic-leverage tbody tr:nth-child(even) {
        background-color: #eef5f8 !important;
    }

    /* Row hover — subtle background highlight */
    .lx-dynamic-leverage tbody tr {
        transition: background 0.3s ease;
    }

    .lx-dynamic-leverage tbody tr:hover {
        background-color: #eef5f8;
    }

    /* Bottom row corner rounding for the card-edge feel */
    .lx-dynamic-leverage tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0.8rem;
    }

    .lx-dynamic-leverage tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0.8rem;
    }

    /* ============================ Open Account steps section ============================ */
    .lx-open-account-lirunex {
        position: relative;
        background:
            radial-gradient(circle at 18% 14%, rgba(31, 192, 208, 0.08) 0%, transparent 35%),
            radial-gradient(circle at 86% 90%, rgba(31, 192, 208, 0.06) 0%, transparent 38%),
            linear-gradient(180deg, #f7fafc 0%, #eef5f8 100%);
        border-radius: 1.5rem;
        text-align: center;
        max-width: 1200px;
        margin: 2rem auto 0;
        padding: 3rem 2rem 3rem;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-open-account-lirunex .title-open-account-lirunex {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: #1a1a1a;
        text-align: center;
        margin: 0 0 0.85rem;
    }

    .lx-open-account-lirunex .content-open-account-lirunex {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.05rem;
        line-height: 1.6;
        text-align: center;
        color: #5d5c5c;
        font-weight: 400;
        margin: 0;
    }

    .lx-account-step-card {
        padding: 1.25rem 1rem;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-account-step-card:hover {
        transform: translateY(-4px);
    }

    .lx-account-step-card i {
        color: #ffffff;
        font-size: 1.35rem;
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%);
        width: 3.25rem;
        height: 3.25rem;
        line-height: 3.25rem;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: 1.25rem;
        text-align: center;
        box-shadow: 0 8px 22px rgba(31, 192, 208, 0.30);
        font-weight: 700;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    }

    .lx-account-step-card:hover i {
        transform: translateY(-2px) rotate(-3deg);
        box-shadow: 0 10px 26px rgba(31, 192, 208, 0.45);
    }

    .lx-account-step-card .lx-account-step-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #1a1a1a;
        margin: 0 0 0.5rem;
    }

    .lx-account-step-card .lx-account-step-content {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1rem;
        margin: 0;
        color: #5d5c5c;
        font-weight: 400;
        line-height: 1.5;
    }

    /* ============================ Final CTA button ============================ */
    .lx-account-types-cta {
       margin: 2rem auto 5rem;
       text-align: center;
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button {
        display: inline-block;
        position: relative;
        overflow: hidden;
        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.75rem 2rem;
        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 18px rgba(31, 192, 208, 0.30);
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button::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-account-types-cta .open-account-button .btn-open-account-button:hover {
        background-color: #1fc0d0;
        border-color: #1fc0d0;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(31, 192, 208, 0.45);
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button:hover::before {
        left: 130%;
    }
}
/* END Desktop view */

/* START Tablet view */
@media (min-width: 768px) and (max-width: 1200px) {
    /* ============================ Banner ============================ */
    .lx-banner-account-types {
        position: relative;
        min-height: 20rem;
        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: 3rem 0 0 0;
        isolation: isolate;
    }

    .lx-banner-account-types .row {
        min-height: calc(20rem - 3rem);
        align-items: stretch;
    }

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

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

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

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

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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: lxAtTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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-account-types .lx-banner-account-types-image {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-account-types .lx-banner-account-types-image img {
        display: block;
        max-width: 108%;
        width: 100%;
        height: auto;
    }

    .account-types-table-section .account-types-table-title {
        text-align: center;
        font-size: 2rem;
        margin: 4rem 0 1rem 0;
    }

     .account-types-table-section .account-types-table-subtitle {
        font-size: 1rem;
        line-height: 1.4;
        display: block;
        color: #6b7280;
        margin: 0 auto 3rem !important;
        font-weight: normal;
        text-align: center !important;
    }

    .lx-account-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        width: 100%;
    }

    .lx-account-cards .lx-account-card {
        border-radius: 1rem;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
    }

     .lx-account-cards .lx-account-card .lx-card-header {
        background: linear-gradient(180deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff;
        text-align: center;
        font-weight: 700;
        font-size: 1rem;
        padding: 1rem 0.5rem 1rem 0.5rem;
        white-space: nowrap;
    }

    .lx-account-cards .lx-card-summary {
            padding: 0 1rem 0 1rem;
    }

    .lx-account-cards .lx-card-summary .lx-label {
        color: #6b7280;
        font-weight: 500;
        /* white-space: nowrap; */
        display: block;
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-value {
        color: #111827;
        font-weight: 600;
        white-space: nowrap;
        /* white-space: normal; */
        font-size: 1rem;
    }

    .lx-account-cards .lx-card-min-deposit {
        text-align: center;
        margin-top: 0rem;
        white-space: pre-line;
    }

    .lx-account-cards .lx-card-min-deposit .lx-label {
        color: #6b7280;
        font-weight: 500;
        /* white-space: nowrap; */
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-min-deposit .lx-value {
        color: #111827;
        font-weight: 600;
        /* white-space: nowrap; */
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-action {
        text-align: center;
        margin-bottom: 2rem;
    }

    .lx-account-cards .lx-open-account-btn {
        display: inline-block;
        margin: 20px auto 0 auto;
        padding: 10px 28px;
        background: #1eb1c2;
        color: #ffffff;
        border-radius: 50px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-align: center;
    }

    .lx-account-cards .lx-open-account-btn:hover {
        background: #157f8b;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .lx-account-cards .lx-card-summary .lx-leverage-label {
        color: #6b7280;
        font-weight: 500;
        /* white-space: nowrap; */
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-leverage-value {
        color: #111827;
        font-weight: 600;
        /* white-space: nowrap; */
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .group-leverage {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin: 0 !important;
        /* Keep horizontal padding so the row's left/right edges line up with
           the col-lg-6 rows above (Bootstrap col gutter — ~0.75rem each side).
           Only override top/bottom for tighter row spacing. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        gap: 0.5rem;
        flex-wrap: nowrap !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage > div {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-8 {
        flex: 1 1 auto !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-4 {
        text-align: right;
    }

    .lx-card-expand {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.1s ease;
        padding: 0 1rem;
    }

    .lx-card-expand.active {
        max-height: 1000px;
    }

    .lx-account-cards .lx-card-expand .lx-label {
        color: #6b7280;
        font-weight: 500;
        /* white-space: nowrap; */
        white-space: normal;
        display: block;
        font-size: 1rem
    }

    .lx-account-cards .lx-card-expand .lx-value {
        color: #111827;
        font-weight: 600;
        /* white-space: nowrap; */
        white-space: normal;
        display: block;
        font-size: 1rem
    }

    .lx-toggle-btn {
        background: none;
        border: none;
        color: #1eb1c2;
        font-weight: 600;
        padding: 15px;
        cursor: pointer;
        transition: 0.3s ease;
        font-size: 1rem;
    }

    .lx-toggle-btn:hover {
        color: #157f8b;
    }

    .lx-card-expand .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        flex-wrap: nowrap;
    }

    .lx-card-summary .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .lx-row-divider {
        width: 100%;
        height: 1px;
        background-color: #e5e5e5;
        margin: 5px 0;
    }

    .lx-tooltip-icon {
        font-size: 14px;
        color: #1eb1c2;
        cursor: pointer;
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }

    .lx-tooltip-icon:hover {
        transform: scale(1.1);
    }

    /* .lx-tooltip-popup {
        position: absolute;
        width: 25%;
        padding: 1rem;
        background: #ffffff;
        color: #000000;
        border: 1px solid #199caa;
        border-radius: 2rem;
        font-size: 0.8rem;
        line-height: 1.4;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        pointer-events: none;
        text-align: left;
        transform: translateX(20%);
        transform: translateX(0%);
    } */

    /* Tablet/mobile tooltip — same look as desktop, just slightly narrower */
    .lx-tooltip-popup {
        position: fixed;
        max-width: 240px;
        width: max-content;
        padding: 0.75rem 0.9rem;
        background: #ffffff;
        color: #1a1a1a;
        border: 1px solid #e8edf2;
        border-radius: 0.85rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 1.5;
        box-shadow:
            0 18px 36px rgba(15, 32, 39, 0.15),
            0 6px 14px rgba(15, 32, 39, 0.08);
        z-index: 9999;
        pointer-events: none;
        text-align: left;
        opacity: 0;
        visibility: hidden;
    }

    .lx-tooltip-popup::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;
    }

    .lx-tooltip-popup.is-shown {
        visibility: visible;
        animation: lxAtTipSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .lx-balance-row {
        display: block;
        justify-content: space-between;
        align-items: center;
    }

    .lx-label-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .lx-label {
        /* white-space: nowrap; */
        white-space: normal;
    }

    .lx-expand-button {
        display: flex;
        justify-content: center;
        /* margin: auto; */
        width: 100%;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .lx-toggle-all-btn {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    .lx-toggle-all-btn:hover {
        background-color: #148094;
        border-color: #148094;
    }

    .lx-terms-line {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.5rem;
        color: #4b5b6f;
        font-size: 0.95rem;
        font-weight: 400;
        text-align: center;
        flex-wrap: wrap;
    }

    .lx-terms-line .lx-terms-icon {
        font-size: 1rem;
        color: #199caa;
    }

   .lx-account-dynamic {
        display: block;
        text-align: center;
        margin: 4rem auto 0;
        max-width: 1200px;
        padding: 0 1rem;
    }

    .lx-account-dynamic .dynamic-leverage-tiering-system-one {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lx-account-dynamic .title-dynamic-leverage-tiering-system-one {
        font-size: 2rem;
        margin: 0;
        line-height: 1.4;
        display: block;
    }

    .lx-account-dynamic .content-dynamic-leverage-tiering-system-one {
        font-size: 1rem;
        line-height: 1.4;
        display: block;
        color: #6b7280;
        margin: 1rem auto !important;
        font-weight: normal;
        text-align: center !important;
    }

    /* Dynamic leverage table — DW-style design */
    .lx-dynamic-leverage {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: auto;
        text-align: center;
        table-layout: fixed;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        border-radius: 0.8rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }

    /* !important on borders/backgrounds because islamic-account/index.css is
       enqueued globally and overrides these selectors with hard black borders,
       solid teal headers and grey rows. */
    .lx-dynamic-leverage th,
    .lx-dynamic-leverage td {
        border: none !important;
        text-align: center;
        vertical-align: middle;
    }

    /* Empty top-left corner cell stays transparent */
    .lx-dynamic-leverage thead tr:first-child th.lx-dl-corner,
    .lx-dynamic-leverage thead tr:first-child th:first-child {
        background: transparent !important;
        border: none !important;
        padding: 0;
    }

    /* "Account Balance" wide tab — DW gradient, both top corners rounded */
    .lx-dynamic-leverage thead tr:first-child th:nth-child(2) {
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.01em;
        padding: 0.75rem 0.55rem;
    }

    /* "Leverage (Up To)" tab in row 2 col 1, top-left corner rounded */
    .lx-dynamic-leverage thead tr:nth-child(2) th:first-child {
        border-top-left-radius: 0.8rem;
    }

    .lx-dynamic-leverage thead tr:nth-child(2) th {
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.01em;
        padding: 0.6rem 0.55rem;
        border-right: 1px solid rgba(255, 255, 255, 0.55) !important;
    }

    .lx-dynamic-leverage thead tr:nth-child(2) th:last-child {
        border-right: none !important;
    }

    .lx-dynamic-leverage tbody td {
        padding: 0.75rem 0.6rem;
        color: #1a1a1a;
        font-size: 0.78rem;
        line-height: 1.5;
        border-bottom: 1px solid #eef0f4 !important;
        border-right: 1px solid #dde3ea !important;
    }

    .lx-dynamic-leverage tbody td:last-child {
        border-right: none !important;
    }

    .lx-dynamic-leverage tbody tr:last-child td {
        border-bottom: none !important;
    }

    .lx-dynamic-leverage tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    .lx-dynamic-leverage tbody tr:nth-child(even) {
        background-color: #eef5f8 !important;
    }

    .lx-dynamic-leverage tbody tr {
        transition: background 0.3s ease;
    }

    .lx-dynamic-leverage tbody tr:hover {
        background-color: #eef5f8;
    }

    .lx-dynamic-leverage tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0.8rem;
    }

    .lx-dynamic-leverage tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0.8rem;
    }

    .lx-open-account-lirunex {
        position: relative;
        background:
            radial-gradient(circle at 18% 14%, rgba(31, 192, 208, 0.08) 0%, transparent 35%),
            radial-gradient(circle at 86% 90%, rgba(31, 192, 208, 0.06) 0%, transparent 38%),
            linear-gradient(180deg, #f7fafc 0%, #eef5f8 100%);
        border-radius: 1.25rem;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        text-align: center;
        margin: 2rem 5% 0 5%;
        padding: 2.5rem 1.5rem;
    }
    .lx-open-account-lirunex .title-open-account-lirunex {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .lx-open-account-lirunex .content-open-account-lirunex {
        font-size: 1rem;
        text-align: center;
        color: #5e6282;
        font-weight: normal;
        margin: 0 0 3rem;
    }
    .lx-account-step-card i {
        color: #ffffff;
        font-size: 2rem;
        background-color: #199caa;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: 1rem;
        text-align: center;
    }

    .lx-account-step-card h5 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .lx-account-step-card h6 {
        font-size: 0.95rem;
        color: #5e6282;
        font-weight: normal;
    }

    .lx-open-account-lirunex-step {
        background: #199caa;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: auto;
    }

    .lx-account-step-card .lx-account-step-title {
        font-size: 1.5rem;
        margin: 0;
    }

    .lx-account-step-card .lx-account-step-content {
        font-size: 1rem;
        text-align: center;
        color: #5e6282;
        font-weight: normal;
        margin-top: 0.5rem;
    }

    .lx-account-types-cta {
       margin: 1.25rem auto 4rem;
       text-align: center;
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
        width: fit-content;
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button:hover {
        background-color: #158099;
        border: 1px solid #199caa;
    }
}
/* END Tablet view */

/* START Mobile view */
@media (max-width: 767px) {
    /* ============================ Banner ============================ */
    .lx-banner-account-types {
        position: relative;
        min-height: 26rem;
        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-account-types::before,
    .lx-banner-account-types::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        pointer-events: none;
        z-index: 0;
    }

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

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

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

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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.15;
        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: lxAtTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-account-types .lx-banner-account-types-title .account-types-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-account-types .lx-banner-account-types-image {
        position: relative;
        z-index: 1;
        margin: 1.5rem 0 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .lx-banner-account-types .lx-banner-account-types-image img {
        display: block;
        margin: 0;
        max-width: 120%;
        height: auto;
    }

    .account-types-table-section .account-types-table-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 3rem 0.5rem 0.75rem;
        text-align: center;
    }

     .account-types-table-section .account-types-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;
    }

    .lx-account-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        width: 100%;
    }

    .lx-account-cards .lx-account-card {
        border-radius: 1rem;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
    }

     .lx-account-cards .lx-account-card .lx-card-header {
        background: linear-gradient(180deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff;
        text-align: center;
        font-weight: 700;
        font-size: 1rem;
        padding: 1rem 0.5rem 1rem 0.5rem;
        white-space: nowrap;
    }

    .lx-account-cards .lx-card-summary {
            padding: 0 1rem 0 1rem;
    }

    .lx-account-cards .lx-card-summary .lx-label {
        color: #6b7280;
        font-weight: 500;
        display: block;
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-value {
        color: #111827;
        font-weight: 600;
        white-space: nowrap;
        font-size: 1rem;
    }

    .lx-account-cards .lx-card-min-deposit {
        text-align: center;
        margin-top: 0rem;
        white-space: pre-line;
    }

    .lx-account-cards .lx-card-min-deposit .lx-label {
        color: #6b7280;
        font-weight: 500;
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-min-deposit .lx-value {
        color: #111827;
        font-weight: 600;
        font-size: 1rem;
        white-space: normal;
    }

    .lx-account-cards .lx-card-action {
        text-align: center;
        margin-bottom: 2rem;
    }

    .lx-account-cards .lx-open-account-btn {
        display: inline-block;
        margin: 20px auto 0 auto;
        padding: 10px 28px;
        background: #1eb1c2;
        color: #ffffff;
        border-radius: 50px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-align: center;
    }

    .lx-account-cards .lx-open-account-btn:hover {
        background: #157f8b;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .lx-account-cards .lx-card-summary .lx-leverage-label {
        color: #6b7280;
        font-weight: 500;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .lx-leverage-value {
        color: #111827;
        font-weight: 600;
        white-space: normal;
    }

    .lx-account-cards .lx-card-summary .group-leverage {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin: 0 !important;
        /* Keep horizontal padding so the row's left/right edges line up with
           the col-lg-6 rows above (Bootstrap col gutter — ~0.75rem each side).
           Only override top/bottom for tighter row spacing. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        gap: 0.5rem;
        flex-wrap: nowrap !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage > div {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-8 {
        flex: 1 1 auto !important;
    }

    .lx-account-cards .lx-card-summary .group-leverage .col-lg-4 {
        text-align: right;
    }

    .lx-card-expand {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.1s ease;
        padding: 0 1rem;
    }

    .lx-card-expand.active {
        max-height: 1000px;
    }

    .lx-account-cards .lx-card-expand .lx-label {
        color: #6b7280;
        font-weight: 500;
        white-space: normal;
        display: block;
        font-size: 1rem
    }

    .lx-account-cards .lx-card-expand .lx-value {
        color: #111827;
        font-weight: 600;
        white-space: normal;
        display: block;
        font-size: 1rem
    }

    .lx-toggle-btn {
        background: none;
        border: none;
        color: #1eb1c2;
        font-weight: 600;
        padding: 15px;
        cursor: pointer;
        transition: 0.3s ease;
        font-size: 1rem;
    }

    .lx-toggle-btn:hover {
        color: #157f8b;
    }

    .lx-card-expand .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        flex-wrap: nowrap;
    }

    .lx-card-summary .d-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .lx-row-divider {
        width: 100%;
        height: 1px;
        background-color: #e5e5e5;
        margin: 5px 0;
    }

    .lx-tooltip-icon {
        font-size: 14px;
        color: #1eb1c2;
        cursor: pointer;
        transition: transform 0.15s ease;
    }

    .lx-tooltip-icon:hover {
        transform: scale(1.1);
    }

    .lx-tooltip-popup {
        position: absolute;
        transform: translateX(50%);
        width: 50%;
        padding: 1rem;
        background: #ffffff;
        color: #000000;
        border: 1px solid #199caa;
        border-radius: 0.5rem;
        font-size: 0.85rem;
        line-height: 1.4;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        pointer-events: none;
        text-align: left;
    }

    .lx-tooltip-icon {
        flex-shrink: 0;
    }

    .lx-balance-row {
        display: block;
        justify-content: space-between;
        align-items: center;
    }

    .lx-label-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .lx-label {
        white-space: normal;
    }

    .lx-expand-button {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .lx-toggle-all-btn {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    .lx-toggle-all-btn:hover {
        background-color: #148094;
        border-color: #148094;
    }

    .lx-terms-line {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.5rem;
        color: #4b5b6f;
        font-size: 0.95rem;
        font-weight: 400;
        text-align: center;
        flex-wrap: wrap;
    }

    .lx-terms-line .lx-terms-icon {
        font-size: 1rem;
        color: #199caa;
    }

   .lx-account-dynamic {
        display: block;
        text-align: center;
        margin: 3rem auto 0;
        padding: 0 1rem;
    }

    .lx-account-dynamic .dynamic-leverage-tiering-system-one {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lx-account-dynamic .title-dynamic-leverage-tiering-system-one {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0;
    }

    .lx-account-dynamic .content-dynamic-leverage-tiering-system-one {
        font-size: 1rem;
        line-height: 1.4;
        display: block;
        color: #6b7280;
        margin: 1rem auto !important;
        font-weight: normal;
        text-align: center !important;
    }

    /* Dynamic leverage table — DW-style design */
    .lx-dynamic-leverage {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: auto;
        text-align: center;
        table-layout: fixed;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        border-radius: 0.8rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }

    /* !important on borders/backgrounds because islamic-account/index.css is
       enqueued globally and overrides these selectors with hard black borders,
       solid teal headers and grey rows. */
    .lx-dynamic-leverage th,
    .lx-dynamic-leverage td {
        border: none !important;
        text-align: center;
        vertical-align: middle;
    }

    /* Empty top-left corner cell stays transparent */
    .lx-dynamic-leverage thead tr:first-child th.lx-dl-corner,
    .lx-dynamic-leverage thead tr:first-child th:first-child {
        background: transparent !important;
        border: none !important;
        padding: 0;
    }

    /* "Account Balance" wide tab — DW gradient, both top corners rounded */
    .lx-dynamic-leverage thead tr:first-child th:nth-child(2) {
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8rem;
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.01em;
        padding: 0.75rem 0.55rem;
    }

    /* "Leverage (Up To)" tab in row 2 col 1, top-left corner rounded */
    .lx-dynamic-leverage thead tr:nth-child(2) th:first-child {
        border-top-left-radius: 0.8rem;
    }

    .lx-dynamic-leverage thead tr:nth-child(2) th {
        background: linear-gradient(to bottom, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.01em;
        padding: 0.6rem 0.55rem;
        border-right: 1px solid rgba(255, 255, 255, 0.55) !important;
    }

    .lx-dynamic-leverage thead tr:nth-child(2) th:last-child {
        border-right: none !important;
    }

    .lx-dynamic-leverage tbody td {
        padding: 0.75rem 0.6rem;
        color: #1a1a1a;
        font-size: 0.78rem;
        line-height: 1.5;
        border-bottom: 1px solid #eef0f4 !important;
        border-right: 1px solid #dde3ea !important;
    }

    .lx-dynamic-leverage tbody td:last-child {
        border-right: none !important;
    }

    .lx-dynamic-leverage tbody tr:last-child td {
        border-bottom: none !important;
    }

    .lx-dynamic-leverage tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    .lx-dynamic-leverage tbody tr:nth-child(even) {
        background-color: #eef5f8 !important;
    }

    .lx-dynamic-leverage tbody tr {
        transition: background 0.3s ease;
    }

    .lx-dynamic-leverage tbody tr:hover {
        background-color: #eef5f8;
    }

    .lx-dynamic-leverage tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0.8rem;
    }

    .lx-dynamic-leverage tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0.8rem;
    }

    .lx-open-account-lirunex {
        position: relative;
        background:
            radial-gradient(circle at 18% 14%, rgba(31, 192, 208, 0.08) 0%, transparent 35%),
            radial-gradient(circle at 86% 90%, rgba(31, 192, 208, 0.06) 0%, transparent 38%),
            linear-gradient(180deg, #f7fafc 0%, #eef5f8 100%);
        border-radius: 1.25rem;
        border: 1px solid #e8edf2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        text-align: center;
        margin: 2rem 5% 0 5%;
        padding: 3rem 1.5rem 4rem;
    }
    .lx-open-account-lirunex .title-open-account-lirunex {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .lx-open-account-lirunex .content-open-account-lirunex {
        font-size: 1rem;
        text-align: center;
        color: #5e6282;
        font-weight: normal;
    }
    .lx-account-step-card i {
        color: #ffffff;
        font-size: 2rem;
        background-color: #199caa;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: 1rem;
        text-align: center;
        margin-top: 2rem;
    }

    .lx-account-step-card h5 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .lx-account-step-card h6 {
        font-size: 0.95rem;
        color: #5e6282;
        font-weight: normal;
    }

    .lx-open-account-lirunex-step {
        background: #199caa;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: auto;
    }

    .lx-account-step-card .lx-account-step-title {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .lx-account-step-card .lx-account-step-content {
        font-size: 1.2rem;
        margin: 0;
        color: #5e6282;
        font-weight: normal;
    }

    .lx-account-types-cta {
       margin: 1.25rem auto 4rem;
       text-align: center;
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #ffffff;
        border-radius: 2rem;
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.1s;
        width: fit-content;
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    .lx-account-types-cta .open-account-button .btn-open-account-button:hover {
        background-color: #158099;
        border: 1px solid #199caa;
    }
}
/* END Mobile view */

/* ============================ Animations (shared) ============================ */
/* lxAtTipSlideDown is referenced from `.lx-tooltip-popup.is-shown` rules in
   every breakpoint. Must live at the top level — keyframes nested inside an
   @media block only resolve when that media query matches, which is why the
   tooltip wasn't appearing on tablet/mobile when the rule lived in the
   desktop block. */
@keyframes lxAtTipSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

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

/* ============================ Page enhancements ============================ */

/* Scroll-reveal — fade + gentle rise + tiny scale. JS adds .is-visible when
   the target enters the viewport. The expo-out curve [0.16, 1, 0.3, 1] is
   the "settling" feel used by Stripe / Apple — fast at the start, slows in
   gracefully at the end. */
.lx-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.lx-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Per-card header tint — same cyan family, progressively deepening so each
   tier reads at a glance. STANDARD (lightest) → PRIME → PRO (deepest), with
   STANDARD CENT as a slightly bluer counterpart to STANDARD.
   One class deeper in specificity than the base rule, so this wins at every
   breakpoint without needing to duplicate inside the media queries. */
.lx-account-cards .lx-account-card:nth-of-type(1) .lx-card-header {
    background: linear-gradient(180deg, #3ec5d4 0%, #1ea7b6 100%);
}
.lx-account-cards .lx-account-card:nth-of-type(2) .lx-card-header {
    background: linear-gradient(180deg, #1eb1c2 0%, #157f8b 100%);
}
.lx-account-cards .lx-account-card:nth-of-type(3) .lx-card-header {
    background: linear-gradient(180deg, #168ea0 0%, #0d6470 100%);
}
.lx-account-cards .lx-account-card:nth-of-type(4) .lx-card-header {
    background: linear-gradient(180deg, #28a8c2 0%, #176d83 100%);
}

/* Stronger card hover — lift + cyan-tinted glow.
   Long, soft easing so movement feels weighted, not flicky.
   Gated to hover-capable devices so taps on touchscreens don't get stuck
   in the lifted state. Specificity bumped to .lx-account-cards .lx-account-card
   to beat the per-breakpoint rules that don't define a transition. */
.lx-account-cards .lx-account-card {
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (hover: hover) {
    .lx-account-cards .lx-account-card:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow:
            0 20px 44px rgba(31, 192, 208, 0.18),
            0 6px 14px rgba(0, 0, 0, 0.06);
    }
}

/* Open Account CTA — same weighted hover curve so the page feels coherent.
   Pointer cursor + branded focus ring fix two browser-default papercuts:
   the <button> doesn't change the cursor by default, and after a click the
   browser's hard black focus outline lingers until the button loses focus. */
.btn-open-account-button,
.lx-toggle-all-btn {
    cursor: pointer;
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease !important;
}

@media (hover: hover) {
    .btn-open-account-button:hover,
    .lx-toggle-all-btn:hover {
        transform: translate3d(0, -2px, 0);
    }
}

.btn-open-account-button:focus,
.lx-toggle-all-btn:focus {
    outline: none;
}

.btn-open-account-button:focus-visible,
.lx-toggle-all-btn:focus-visible {
    outline: 3px solid rgba(31, 192, 208, 0.45);
    outline-offset: 2px;
}

/* Step-card hover — gentle lift on hover-capable devices (was desktop-only
   before; this brings the same polish to tablet without affecting touch). */
.lx-account-step-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.lx-account-step-card i {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

@media (hover: hover) {
    .lx-account-step-card:hover {
        transform: translate3d(0, -4px, 0);
    }
    .lx-account-step-card:hover i {
        transform: translate3d(0, -2px, 0) rotate(-3deg);
        box-shadow: 0 10px 26px rgba(31, 192, 208, 0.45);
    }
}

/* Pulsing ripple around the numbered step circles. Pseudo-element so the
   existing hover translate/rotate on the icon stays untouched. */
@keyframes lxAtStepPulse {
    0%   { box-shadow: 0 0 0 0 rgba(31, 192, 208, 0.45); opacity: 1; }
    70%  { box-shadow: 0 0 0 16px rgba(31, 192, 208, 0); opacity: 0; }
    100% { box-shadow: 0 0 0 0 rgba(31, 192, 208, 0); opacity: 0; }
}

.lx-account-step-card i {
    position: relative;
}

/* ::after, not ::before — Font Awesome uses ::before for the digit glyph */
.lx-account-step-card i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: lxAtStepPulse 2.6s ease-out infinite;
    animation-delay: var(--lx-step-delay, 0s);
}

/* Stagger the pulses so they read 1 → 2 → 3 */
.lx-open-account-lirunex .col-lg-4:nth-of-type(1) .lx-account-step-card i { --lx-step-delay: 0s; }
.lx-open-account-lirunex .col-lg-4:nth-of-type(2) .lx-account-step-card i { --lx-step-delay: 0.45s; }
.lx-open-account-lirunex .col-lg-4:nth-of-type(3) .lx-account-step-card i { --lx-step-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
    .lx-banner-account-types::before,
    .lx-banner-account-types::after,
    .lx-banner-account-types .lx-banner-account-types-title .account-types-title,
    .lx-account-step-card i::after {
        animation: none !important;
    }
    .lx-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .lx-account-card {
        transition: none !important;
    }
}