/* =====================================================
           xPal Gold — Upgrade UI  (New Card Design)
           Overrides additional.css / gold.css visuals only.
           All IDs, JS hooks and server-side code unchanged.
        ===================================================== */
        :root {
            --xg-bg:          #0a0a0a;
            --xg-surface:     #141414;
            --xg-surface2:    #1c1c1c;
            --xg-border:      #2a2a2a;
            --xg-gold:        #3631C6;
            --xg-gold-light:  #5048E8;
            --xg-gold-muted:  #96A2F6;
            --xg-purple:      #5b4cf5;
            --xg-purple-h:    #6d5ef7;
            --xg-text:        #f0f0f0;
            --xg-text-muted:  #888;
            --xg-text-dim:    #555;
            --xg-red:         #e05c5c;
            --xg-green:       #4caf7d;
            --xg-radius:      14px;
            --xg-radius-sm:   8px;
            --xg-shadow:      0 8px 40px rgba(0,0,0,0.6);
        }

        /* ── Container ── */
        .business-flex {
            background: var(--xg-bg) !important;
        }
        #choose-plan-container {
            padding: 32px 16px 56px !important;
            max-width: 100% !important;
            background: var(--xg-bg) !important;
        }

        /* ── Block-display: stack panels vertically ── */
        #choose-plan-container .block-display {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 20px;
            width: 100%;
        }

        /* ── Plan-selection card wrapper ── */
        #choose-plan.choose-plan-div,
        #choose-plan.choose-plan-div.initial-ui {
            background: var(--xg-surface) !important;
            border: 1px solid var(--xg-border) !important;
            border-radius: 20px !important;
            box-shadow: var(--xg-shadow) !important;
            width: 100% !important;
            max-width: 560px !important;
            padding: 28px !important;
            margin: 0 !important;
        }

        /* ── Plan-selection header row ── */
        #choose-plan #choose-plan-container {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            margin-bottom: 22px !important;
        }
        #choose-plan #cpl-text {
            font-size: 20px !important;
            font-weight: 700 !important;
            color: var(--xg-text) !important;
            margin: 0 !important;
            justify-content: flex-start !important;
        }
        #choose-plan .edit-plan.choose-payment-edit {
            background: none !important;
            border: 1px solid var(--xg-border) !important;
            color: var(--xg-text-muted) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            padding: 6px 14px !important;
            border-radius: 20px !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            order: 1;
            margin: 0 !important;
        }
        #choose-plan .edit-plan.choose-payment-edit:hover {
            color: var(--xg-text) !important;
            border-color: var(--xg-gold) !important;
        }

        /* ── Plan cards ── */
        .subscritionDetail {
            background: var(--xg-surface2) !important;
            border: 2px solid var(--xg-border) !important;
            border-radius: var(--xg-radius) !important;
            padding: 15px 16px 15px 52px !important;
            cursor: pointer !important;
            transition: border-color 0.2s, background 0.2s !important;
            display: block !important;
            position: relative !important;
            margin-bottom: 10px !important;
        }
        .subscritionDetail:last-of-type { margin-bottom: 20px !important; }
        .subscritionDetail:hover { border-color: #444 !important; }
        .subscritionDetail.green {
            border-color: var(--xg-gold) !important;
            background: var(--xg-gold-muted) !important;
        }

        /* Radio dot via ::before */
        .subscritionDetail::before {
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px; height: 20px;
            border-radius: 50%;
            border: 2px solid var(--xg-text-dim);
            background: var(--xg-surface);
            transition: all 0.2s;
            box-sizing: border-box;
        }
        .subscritionDetail.green::before {
            border-color: var(--xg-gold);
            background: var(--xg-gold);
            box-shadow: inset 0 0 0 4px var(--xg-surface2);
        }

        /* Plan name */
        .subscritionDetail .subscriptionDetailDiv { display: block !important; }
        .subscritionDetail .subscriptionText {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 6px !important;
            margin-bottom: 5px !important;
        }
        .subscritionDetail .subscriptionText h3 {
            font-size: 14px !important;
            font-weight: 600 !important;
            color: var(--xg-text) !important;
            margin: 0 !important;
        }

        /* Plan price row */
        .subscritionDetail .subscriptionAmount {
            display: flex !important;
            align-items: baseline !important;
            gap: 5px !important;
            flex-wrap: wrap !important;
        }
        .subscritionDetail .subscriptionAmount h2 {
            font-size: 22px !important;
            font-weight: 800 !important;
            color: var(--xg-text) !important;
            margin: 0 !important;
        }

        /* Save badge */
        .subscritionDetail .text-discount {
            display: inline-block !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            padding: 2px 8px !important;
            border-radius: 20px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.04em !important;
            background: var(--xg-gold) !important;
            color: #fff !important;
            margin-bottom: 3px !important;
        }
        #additional-9.text-discount {
            background: var(--xg-red) !important;
            color: #fff !important;
        }

        /* Counter span & cut-through price */
        .subscritionDetail .counter-number {
            font-size: 12px !important;
            color: var(--xg-text-muted) !important;
            font-family: Arial, sans-serif !important;
        }
        .subscritionDetail .n-cut-sec {
            font-size: 12px !important;
            color: var(--xg-text-dim) !important;
            text-decoration: line-through !important;
            font-family: Arial, sans-serif !important;
        }
        .perMonthCalc, .perYearCalc, .lifeTimeCalc {
            font-size: 12px !important;
            color: var(--xg-text-dim) !important;
            font-family: Arial, sans-serif !important;
        }

        /* Hide old checkbox images */
        .subscritionDetail .webCheckBox,
        .subscritionDetail .mobileCheckBox { display: none !important; }

        /* ── Payment method button row ── */
        .buttons-wrapper {
            display: flex !important;
            flex-direction: row !important;
            gap: 6px !important;
            background: var(--xg-surface2) !important;
            border-radius: var(--xg-radius-sm) !important;
            padding: 4px !important;
            align-items: stretch !important;
            flex-wrap: nowrap !important;
            margin: 0 !important;
        }
        .buttons-wrapper .crypto-wrapper,
        .buttons-wrapper .nowpayments-wrapper,
        .buttons-wrapper .stripe-button-container { flex: 1 !important; min-width: 0 !important; }
        .buttons-wrapper .enabled-button-container,
        .buttons-wrapper .stripe-button-container form { width: 100% !important; }

        /* Each tab button */
        .buttons-wrapper .cryptoOptions,
        .buttons-wrapper #nowpaymentsBtn,
        .buttons-wrapper #stripeBtn {
            width: 100% !important;
            padding: 10px 6px !important;
            border: none !important;
            background: none !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            color: var(--xg-text-muted) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            transition: all 0.2s !important;
            line-height: 1.3 !important;
        }
        .buttons-wrapper .cryptoOptions:hover,
        .buttons-wrapper #nowpaymentsBtn:hover,
        .buttons-wrapper #stripeBtn:hover {
            background: rgba(255,255,255,0.05) !important;
            color: var(--xg-text) !important;
        }
        /* Hide existing inner div & img in tab buttons, show text cleanly */
        .buttons-wrapper .mainCryptoBtn {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 5px !important;
            font-size: 12px !important;
            font-weight: 600 !important;
        }
        .buttons-wrapper .mainCryptoBtn img { width: 22px !important; height: 22px !important; opacity: 0.7 !important; }
        .buttons-wrapper .stripeimg { width: 22px !important; height: 22px !important; opacity: 0.7 !important; }

        /* ── Payment panel cards (stripe / coinbase / nowpayments) ── */
        #stripe-main.choose-plan-div,
        .crypto-payment-wrapper.choose-plan-div,
        #nowpayments-main.choose-plan-div {
            background: var(--xg-surface) !important;
            border: 1px solid var(--xg-border) !important;
            border-radius: 20px !important;
            box-shadow: var(--xg-shadow) !important;
            width: 100% !important;
            max-width: 560px !important;
            padding: 28px !important;
            margin: 0 !important;
        }

        /* Back button */
        .back {
            background: none !important;
            border: none !important;
            color: var(--xg-text-muted) !important;
            font-size: 13px !important;
            cursor: pointer !important;
            padding: 0 !important;
            margin-bottom: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
            transition: color 0.2s !important;
        }
        .back:hover { color: var(--xg-text) !important; }

        /* Panel title inside payment cards */
        #cc-text.choose-plan,
        .payWithCryptoText {
            font-size: 20px !important;
            font-weight: 700 !important;
            color: var(--xg-text) !important;
            margin-bottom: 20px !important;
            justify-content: flex-start !important;
        }
        .option-name.op-name-1,
        .option-name.op-name-2,
        .option-name.op-name-3 {
            font-size: 14px !important;
            font-weight: 600 !important;
            color: var(--xg-text) !important;
        }
        .option.option-1,
        .option.option-2,
        .option.option-3 {
            font-size: 11px !important;
            font-weight: 700 !important;
            color: var(--xg-text-dim) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.07em !important;
        }
        /* PayPal badge */
        .xpal-badge-paypal {
            background: rgba(0, 112, 186, 0.15);
            color: #0070ba;
        }
        /* PayPal redirect button wrapper */
        .xpal-pp-buttons-wrap {
            width: 100%;
            max-width: 400px;
            margin: 16px auto 0;
            text-align: center;
        }
        .xpal-paypal-redirect-btn {
            width: 100%;
            padding: 15px;
            background: #96A2F6;
            color: #fff;
            border: none;
            border-radius: 40px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .xpal-paypal-redirect-btn:hover  { background: #5048E8; }
        .xpal-paypal-redirect-btn:active { background: #5048E8; }
        .xpal-paypal-redirect-btn:disabled {
            opacity: 0.7;
            cursor: wait;
        }
        .pp-plan-container {
            width: 100%;
        }
        .xpal-pix-panel {
            background: #1c1c1c;
            border: 1px solid #2a2a2a;
            border-radius: 16px;
            padding: 22px;
        }
        .xpal-pix-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: #96A2F6;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .xpal-pix-title {
            color: #f0f0f0;
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 8px;
        }
        .xpal-pix-copy,
        .xpal-pix-meta {
            color: #888;
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .xpal-pix-summary {
            background: #141414;
            border: 1px solid #2a2a2a;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
        }
        .xpal-pix-label {
            display: block;
            color: #f0f0f0;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .xpal-required-asterisk {
            color: #e05c5c;
        }
        .xpal-pix-input,
        .xpal-pix-copycode {
            width: 100%;
            background: #141414;
            border: 1px solid #2a2a2a;
            border-radius: 10px;
            color: #f0f0f0;
            font-size: 14px;
            padding: 14px 16px;
            margin-bottom: 14px;
        }
        .xpal-pix-copycode {
            min-height: 130px;
            resize: vertical;
            word-break: break-all;
        }
        .xpal-pix-disclaimer {
            color: #888;
            font-size: 12px;
            line-height: 1.6;
            margin-bottom: 18px;
        }
        .xpal-pix-disclaimer a {
            color: #fff;
        }
        .xpal-pix-qr-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #ffffff;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 18px;
        }
        .xpal-pix-qr {
            width: 220px;
            max-width: 100%;
            height: auto;
            display: block;
        }
        .xpal-pix-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 14px;
        }

        /* Stripe Pay button */
        #submit {
            width: 100% !important;
            padding: 14px !important;
            background: #96A2F6 !important;
            color: #fff !important;
            border: none !important;
            border-radius: 40px !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            margin-top: 16px !important;
            transition: background 0.2s !important;
        }
        #submit:hover { background: #5048E8 !important; }

        /* Crypto wallet boxes */
        .qr-scan-div {
            background: var(--xg-surface2) !important;
            border: 1px solid var(--xg-border) !important;
            border-radius: var(--xg-radius-sm) !important;
            padding: 14px !important;
            margin-bottom: 12px !important;
        }
        .qr-scan-div .para-3 { font-size: 11px !important; color: var(--xg-text-muted) !important; }
        .qr-scan-div .para-4 { font-size: 12px !important; color: var(--xg-text) !important; word-break: break-all !important; }
        .qr-scan-div .para-5 { font-size: 11px !important; color: var(--xg-text-muted) !important; text-align: center !important; }
        .qr-scan-div .qrImg {
            width: 110px !important;
            height: 110px !important;
            object-fit: contain !important;
            border-radius: 6px !important;
            background: #fff !important;
            padding: 4px !important;
            image-rendering: pixelated;
        }
        .qr-scan-div .bitcoin-icon { width: 34px !important; margin-right: 10px !important; }

        /* Step list */
        #coinbase-main ol { padding-left: 18px !important; margin-top: 14px !important; }
        #coinbase-main ol li {
            font-size: 13px !important;
            color: var(--xg-text-muted) !important;
            margin-bottom: 8px !important;
            line-height: 1.6 !important;
        }
        #coinbase-main ol li p { margin: 3px 0 0 !important; }

        /* NOWPayments generate button */
        #npGenerateBtn {
            width: 100% !important;
            padding: 14px !important;
            background: var(--xg-purple) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 40px !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            margin-top: 10px !important;
            transition: background 0.2s !important;
        }
        #npGenerateBtn:hover:not(:disabled) { background: var(--xg-purple-h) !important; }
        #npGenerateBtn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
        #npStatusBar {
            margin-top: 14px !important;
            padding: 12px 16px !important;
            background: var(--xg-surface2) !important;
            border: 1px solid var(--xg-border) !important;
            border-radius: var(--xg-radius-sm) !important;
            font-size: 13px !important;
            color: var(--xg-text-muted) !important;
        }

        /* Coinbase crypto wallet button */
        #crypto-0 {
            background: var(--xg-purple) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 8px !important;
            padding: 10px 18px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            transition: background 0.2s !important;
        }
        #crypto-0:hover { background: var(--xg-purple-h) !important; }
        .CoinBaseWalletDiv .para-1 { font-size: 12px !important; color: var(--xg-text-muted) !important; margin: 0 !important; }
        .CoinBaseWalletDiv .para-2 { font-size: 11px !important; color: var(--xg-text-dim) !important; margin: 0 !important; }

        /* Hide gold-membership floating header (design no longer uses it) */
        #gold-membership { display: none !important; }

        /* Secure label */
        .secure-row { color: var(--xg-text-dim) !important; font-size: 12px !important; }

        @media (max-width: 480px) {
            .buttons-wrapper .mainCryptoBtn span:not(.mainCryptoBtn) { font-size: 10px !important; }
        }

/* ── xPal Gold card/stepper design (index.html layout) ── */
        *, *::before, *::after { box-sizing: border-box; }
        .xpal-upgrade-section {
            background: #0a0a0a;
            display: flex; flex-direction: column; align-items: center;
            padding: 36px 16px 72px;
            min-height: calc(100vh - 140px);
        }
        .xpal-card {
            background: #141414; border: 1px solid #2a2a2a;
            border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
            width: 100%; max-width: 560px; overflow: hidden;
        }
        /* Stepper */
        .xpal-stepper { display: flex; align-items: center; padding: 24px 28px 0; }
        .xpal-step {
            display: flex; flex-direction: column; align-items: center;
            gap: 6px; flex: 1; position: relative;
        }
        .xpal-step:not(:last-child)::after {
            content: ''; position: absolute; top: 14px;
            left: calc(50% + 14px); right: calc(-50% + 14px);
            height: 1px; background: #2a2a2a; transition: background 0.3s;
        }
        .xpal-step.done:not(:last-child)::after,
        .xpal-step.active:not(:last-child)::after { background: #3631C6; }
        .xpal-step-dot {
            width: 28px; height: 28px; border-radius: 50%;
            border: 2px solid #2a2a2a; background: #141414;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 700; color: #555; transition: all 0.3s; z-index: 1;
            font-family: Arial, sans-serif;
        }
        .xpal-step.active .xpal-step-dot { border-color:#3631C6; background:#96A2F6; color:#fff; }
        .xpal-step.done  .xpal-step-dot  { border-color:#3631C6; background:#3631C6; color:#fff; }
        .xpal-step-label {
            font-size:10px; font-weight:600; color:#555;
            text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;
        }
        .xpal-step.active .xpal-step-label { color:#fff; }
        .xpal-step.done  .xpal-step-label { color:#888; }
        /* Panels */
        .xpal-panel { display:none; padding:28px; }
        .xpal-panel.active { display:block; animation:xpalFadeIn 0.25s ease; }
        @keyframes xpalFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        .xpal-panel-title { font-size:22px; font-weight:600; color:#f0f0f0; margin-bottom:6px; }
.xpal-payment-medium-title {
    font-size: 20px;
    font-weight: 400;
    color: #f0f0f0;
    margin-top: 26px;
    margin-bottom: 5px;
}
        .xpal-panel-sub   { font-size:14px; color:#888; margin-bottom:10px; }
        /* Arial for numerics only */
        @font-face {
            font-family: 'NumericArial';
            src: local('Arial');
            unicode-range: U+0030-0039;
        }

        /* xID input */
        .xpal-xid-row { display:flex; gap:10px; margin-bottom:12px; position:relative; align-items:center; }
        .xpal-xid-row input {
            flex:1; background:#1c1c1c; border:1.5px solid #2a2a2a; border-radius:8px;
            padding:14px 52px 14px 16px; font-size:16px; color:#f0f0f0;
            font-family: 'NumericArial', 'Nunito Sans', sans-serif;
            letter-spacing:0.05em; outline:none; transition:border-color 0.2s;
        }
        .xpal-xid-row input:focus { border-color:#3631C6; }
        .xpal-xid-row input::placeholder { color:#555; }
        .xpal-xid-hint { font-size:12px; color:#555; margin-bottom:16px; }
        .xpal-xid-hint.err { color:#e05c5c; }
        .upgrade .business-error-message {
            position: static !important;
            top: auto !important;
            right: auto !important;
            left: auto !important;
            transform: none !important;
            width: auto !important;
            margin: 0 0 12px !important;
            text-align: left !important;
            line-height: 1.4 !important;
            letter-spacing: normal !important;
        }
        /* xID tags */
        .xpal-xid-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; min-height:4px; }
        .xpal-xid-tag {
            display:flex; align-items:center; gap:8px;
            background:#1c1c1c; border:1px solid #2a2a2a; border-radius:6px;
            padding:7px 12px; font-size:14px; font-weight:600; color:#f0f0f0; letter-spacing:0.05em;
            font-family: 'NumericArial', 'Nunito Sans', sans-serif;
        }
        .xpal-remove-btn {
            background:none; border:none; color:#555; cursor:pointer;
            font-size:16px; line-height:1; padding:0; transition:color 0.2s;
        }
        .xpal-remove-btn:hover { color:#e05c5c; }
        /* Plan grid */
        .xpal-plan-grid { display:flex !important; flex-direction:column !important; gap:10px !important; margin-bottom:20px !important; }
        /* Reset ALL gold.css/additional.css .subscritionDetail interference on our cards */
        .xpal-plan-grid .xpal-plan-card {
            position:relative !important; background:#1c1c1c !important; border:2px solid #2a2a2a !important;
            border-radius:14px !important; padding:16px 18px !important; cursor:pointer !important; transition:all 0.2s !important;
            display:flex !important; align-items:center !important; gap:14px !important;
            justify-content:flex-start !important; width:100% !important;
            margin:0 !important; overflow:visible !important;
        }
        .xpal-plan-grid .xpal-plan-card:hover { border-color:#444 !important; }
        .xpal-plan-grid .xpal-plan-card.green { border-color:#3631C6 !important; background:rgba(150,162,246,0.15) !important; }
        .xpal-plan-grid .xpal-radio {
            width:20px !important; height:20px !important; border-radius:50% !important; border:2px solid #555 !important;
            background:#141414 !important; flex-shrink:0 !important;
            display:flex !important; align-items:center !important; justify-content:center !important; transition:all 0.2s !important;
            position:relative !important; margin:0 !important;
        }
        .xpal-plan-grid .xpal-plan-card.green .xpal-radio { border-color:#3631C6 !important; background:#3631C6 !important; }
        .xpal-plan-grid .xpal-radio::after {
            content:'' !important; width:8px !important; height:8px !important; border-radius:50% !important; background:#000 !important; display:none !important;
        }
        .xpal-plan-grid .xpal-plan-card.green .xpal-radio::after { display:block !important; }
        .xpal-plan-info { flex:1; min-width:0; }
        .xpal-plan-name {
            font-size:14px; font-weight:600; color:#f0f0f0;
            display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:5px;
        }
        .xpal-plan-name h3 { font-size:14px !important; font-weight:600 !important; color:#f0f0f0 !important; margin:0 !important; }
        .xpal-plan-original { font-size:12px; color:#555; text-decoration:line-through; font-family: Arial, sans-serif; }
        .xpal-price-row { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
        .xpal-price { font-size:24px; font-weight:500; color:#f0f0f0; font-family: Arial, sans-serif; }
        .xpal-period { font-size:13px; color:#888; }
        .xpal-plan-badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em; }
        .xpal-badge-gold { background:#3631C6; color:#fff; }
        .xpal-badge-red  { background:#e05c5c; color:#fff; }
        /* Completely hide old checkbox elements — use !important to beat gold.css media queries */
        .xpal-plan-grid .xpal-plan-card .webCheckBox,
        .xpal-plan-grid .xpal-plan-card .mobileCheckBox,
        .xpal-plan-grid .xpal-plan-card .webCheckBox *,
        .xpal-plan-grid .xpal-plan-card .mobileCheckBox * { display:none !important; visibility:hidden !important; }
        /* Summary pill */
        .xpal-summary {
            background:#1c1c1c; border:1px solid #2a2a2a; border-radius:8px;
            padding:14px 16px; margin-bottom:20px;
            display:flex; justify-content:space-between; align-items:center;
        }
        .xpal-summary-label { font-size:13px; color:#888; }
        .xpal-summary-total { font-size:18px; font-weight:700; color:#fff; font-family: Arial, sans-serif; }
        /* Buttons */
        .xpal-btn {
            width:43%; padding:15px; border:none; border-radius:40px;
            font-size:16px; font-weight:700; cursor:pointer;
            transition:background 0.2s, transform 0.1s;
            display:flex; align-items:center; justify-content:center; gap:8px;
            margin-left:auto; margin-right:auto;
        }
        .xpal-btn-purple { background:#5b4cf5; color:#fff; }
        .xpal-btn-purple:hover { background:#6d5ef7; }
        .xpal-btn-gold { background:#96A2F6; color:#fff; }
        .xpal-btn-gold:hover { background:#5048E8; }
        .xpal-btn-full { width:100%; }
        .xpal-btn:disabled { opacity:0.5; cursor:not-allowed; }
        .xpal-btn:active { transform:scale(0.98); }
        /* continueBtn enabled/disabled states (additional.js uses .enabled class) */
        #continueBtn:not(.enabled) { opacity:0.45; pointer-events:none; }
        #continueBtn.enabled { opacity:1; pointer-events:unset; }
        #continueBtn { width: 40%; margin-left: auto; margin-right: auto; }
        .xpal-btn-back {
            background:none; border:none; color:#888; font-size:13px; cursor:pointer;
            display:flex; align-items:center; gap:4px; padding:0; margin-bottom:20px; transition:color 0.2s;
        }
        .xpal-btn-back:hover { color:#f0f0f0; }
        /* Method tabs */
        .xpal-method-tabs {
            display:flex; gap:8px; margin-bottom:20px;
            background:#1c1c1c; border-radius:8px; padding:4px;
        }
        .xpal-method-tabs form { flex:1; display:flex; }
        .xpal-method-tab {
            flex:1; padding:12px 8px; border:none; background:none; border-radius:6px;
            cursor:pointer; color:#888; font-size:13px; font-weight:600;
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
            transition:all 0.2s; width:100%;
        }
        .xpal-method-tab .xpal-tab-icon { font-size:18px; line-height:1; order:0; }
        .xpal-method-tab img.xpal-tab-icon {
            width:24px;
            height:24px;
            object-fit:contain;
            display:block;
        }
        .xpal-method-tab .xpal-tab-label { order:1; }
        .xpal-method-tab:hover { color:#f0f0f0; background:rgba(255,255,255,0.04); }
        .xpal-method-tab.active { background:#141414; color:#f0f0f0; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
        /* Pay panels */
        .xpal-pay-panel { display:none; }
        .xpal-pay-panel.active { display:block; animation:xpalFadeIn 0.2s ease; }
        #coinbase-main .xpal-crypto-options {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        #coinbase-main .xpal-crypto-option {
            background: #1c1c1c;
            border: 1px solid #2a2a2a;
            border-radius: 16px;
            overflow: hidden;
        }
        #coinbase-main .xpal-crypto-option.is-link,
        #coinbase-main .xpal-crypto-accordion-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px 20px;
            background: transparent;
            border: 0;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        #coinbase-main .xpal-crypto-option.is-link:hover,
        #coinbase-main .xpal-crypto-accordion-toggle:hover {
            background: rgba(255,255,255,0.02);
        }
        #coinbase-main .xpal-crypto-option-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            flex: 0 0 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 700;
            color: #fff;
        }
        #coinbase-main .xpal-crypto-option-icon.is-coinbase {
            background: radial-gradient(circle at 35% 35%, #79b8ff 0%, #3b82f6 45%, #1e3a8a 100%);
        }
        #coinbase-main .xpal-crypto-option-icon.is-nowpayments {
            background: linear-gradient(135deg, #2457ff 0%, #4d8dff 100%);
            position: relative;
        }
        #coinbase-main .xpal-crypto-option-icon.is-nowpayments::before {
            content: "N";
            font-size: 24px;
        }
        #coinbase-main .xpal-crypto-option-icon.is-bitcoin {
            background: #96A2F6;
            color: #fff;
        }
        #coinbase-main .xpal-crypto-option-copy {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        #coinbase-main .xpal-crypto-option-title {
            font-size: 16px;
            font-weight: 700;
            color: #f0f0f0;
        }
        #coinbase-main .xpal-crypto-option-sub {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        #coinbase-main .xpal-crypto-option-sub .option {
            margin: 0 !important;
        }
        #coinbase-main .xpal-crypto-option-sub .option-name {
            margin: 0 !important;
            color: #888 !important;
            font-weight: 500 !important;
        }
        #coinbase-main .xpal-crypto-option-indicator {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid #555;
            flex: 0 0 28px;
            position: relative;
        }
        #coinbase-main .xpal-crypto-accordion.is-open > .xpal-crypto-accordion-toggle .xpal-crypto-option-indicator,
        #coinbase-main .xpal-crypto-option.is-link:hover .xpal-crypto-option-indicator {
            border-color: #3631C6;
        }
        #coinbase-main .xpal-crypto-accordion.is-open > .xpal-crypto-accordion-toggle .xpal-crypto-option-indicator::after {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: #3631C6;
        }
        #coinbase-main .xpal-crypto-accordion.is-open {
            border-color: #3631C6;
            background: rgba(150,162,246,0.15);
        }
        #coinbase-main .xpal-crypto-accordion-panel {
            padding: 0 20px 20px;
        }
        #coinbase-main .xpal-crypto-accordion-panel[hidden] {
            display: none !important;
        }
        #coinbase-main .xpal-crypto-accordion-panel > :first-child {
            margin-top: 0 !important;
        }
        #coinbase-main .xpal-crypto-accordion-panel > :last-child {
            margin-bottom: 0 !important;
        }
        #stripe-main {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }
        #payment-form,
        #payment-element {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }
        /* Stripe submit */
        #submit {
            width:100% !important; padding:14px !important; background:#96A2F6 !important;
            color:#fff !important; border:none !important; border-radius:40px !important;
            font-size:15px !important; font-weight:700 !important; cursor:pointer !important;
            margin-top:16px !important; transition:background 0.2s !important;
        }
        #submit:hover { background:#5048E8 !important; }
        /* NP generate */
        #npGenerateBtn {
            width:100%; padding:14px; background:#96A2F6; color:#fff;
            border:none; border-radius:40px; font-size:15px; font-weight:700;
            cursor:pointer; margin-top:10px; transition:background 0.2s;
        }
        #npGenerateBtn:hover:not(:disabled) { background:#5048E8; }
        #npGenerateBtn:disabled { opacity:0.5; cursor:not-allowed; }
        /* Wallet boxes */
        .xpal-wallet-box {
            background:#1c1c1c; border:1px solid #2a2a2a;
            border-radius:8px; padding:14px 16px; margin-bottom:12px;
        }
        /* Crypto steps */
        .xpal-steps {
            list-style:none; counter-reset:xpal-step;
            display:flex; flex-direction:column; gap:10px; padding:0; margin:0 0 8px;
        }
        .xpal-steps li {
            counter-increment:xpal-step; display:flex; gap:10px;
            font-size:13px; color:#888; line-height:1.5;
        }
        .xpal-steps li::before {
            content:counter(xpal-step); min-width:22px; height:22px;
            border-radius:50%; background:#1c1c1c; border:1px solid #2a2a2a;
            display:flex; align-items:center; justify-content:center;
            font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
        }
        .xpal-secure {
            display:flex; align-items:center; justify-content:center;
            gap:6px; margin-top:16px; font-size:12px; color:#555; text-align:center;
        }
        /* Success */
        .xpal-success { text-align:center; padding:20px 0 8px; }
        .xpal-success-icon {
            width:72px; height:72px; background:rgba(76,175,125,0.15); border:2px solid #4caf7d;
            border-radius:50%; display:flex; align-items:center; justify-content:center;
            font-size:32px; margin:0 auto 20px;
        }
        .xpal-success h2 { font-size:22px; font-weight:700; margin-bottom:8px; color:#f0f0f0; }
        .xpal-success p  { font-size:14px; color:#888; line-height:1.6; }
        .xpal-divider { border:none; border-top:1px solid #2a2a2a; margin:20px 0; }
        /* NP status */
        #npStatusBar {
            margin-top:14px; padding:12px 16px; background:#1c1c1c;
            border:1px solid #2a2a2a; border-radius:8px; font-size:13px; color:#888;
        }
        .form-loader-container {
            display:none;
            justify-content:center;
            align-items:center;
            min-height:220px;
            padding:24px 0;
        }
        .form-loader-container .formloader {
            position: relative !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            top: auto !important;
            margin: 0 auto !important;
        }
        /* Loader — hidden by default; additional.js shows it via .upgrade .additional-icon-container */
        .xpal-xid-input-wrap { position:relative; }
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .additional-icon-container {
            display:none; position:absolute; right:14px !important; top:calc(50% + 2px) !important; bottom:auto !important; margin:0 !important; transform:translateY(-50%) !important;
            width:24px; height:24px;
            align-items:center; justify-content:center; pointer-events:none;
        }
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .additional-icon-container[style*="display: block"],
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .additional-icon-container[style*="display:block"] {
            display:flex !important;
        }
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .loader {
            position: absolute !important;
            inset: 0 !important;
            width: 18px !important;
            height: 18px !important;
            display: block !important;
            margin: auto !important;
            transform: none !important;
        }
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .loader::before,
        .upgrade.xpal-xid-input-wrap .xpal-xid-row .loader::after {
            border-width: 2px;
            border-color: #3631C6 #5048E8 transparent transparent;
        }
        /* xID tags list — styled as dark chips */
        .upgrade #xIDBusinessList {
            display:flex !important;
            flex-wrap:wrap;
            gap:8px;
            width:auto !important;
            max-height:none !important;
            overflow:visible !important;
            padding:0 !important;
            background:transparent !important;
        }
        .upgrade #xIDBusinessList li {
            display:inline-flex !important; align-items:center; justify-content:flex-start !important; gap:10px;
            background:#1c1c1c; border:1px solid #2a2a2a; border-radius:8px;
            padding:8px 14px; font-size:14px; font-weight:600; color:#f0f0f0;
            font-family: 'NumericArial', 'Nunito Sans', sans-serif !important;
            letter-spacing:0.08em; line-height:1 !important;
            margin-top: 15px;
        }
        /* Remove button — subtle × icon style */
        .upgrade #xIDBusinessList .removeButton {
            background:none !important; border:none !important; padding:0 !important;
            color:#777 !important; font-size:20px !important; line-height:1 !important;
            cursor:pointer; font-family:sans-serif; transition:color 0.2s; border-radius:0 !important;
        }
        .upgrade #xIDBusinessList .removeButton:hover { color:#e05c5c !important; }
        @media (max-width:480px) {
            .xpal-method-tab .xpal-tab-label { display:none; }
            .xpal-method-tab { padding:12px; }
            .xpal-pix-actions {
                grid-template-columns: 1fr;
            }

            .xpal-panel { display:none; padding:10px; }

            .xpal-upgrade-section {
                background: #0a0a0a;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 36px 16px 72px;
                min-height: calc(100vh - 250px);
            }

            #coinbase-main ol {
                padding-left: 0px !important;
                margin-top: 14px !important;
            }

            /* Fix li-no-2: multiple <p> tags become flex items and create columns —
               switch to block so they stack vertically */
            .xpal-steps li {
                display: block !important;
                position: relative;
                padding-left: 32px;
                min-height: 24px;
            }
            .xpal-steps li::before {
                position: absolute !important;
                left: 0;
                top: 1px;
            }
            .xpal-steps li p {
                display: block;
                margin: 3px 0 0;
            }

            /* Manual Bitcoin/USDT wallet boxes — stack vertically on mobile */
            .qr-scan-div > div {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            .qr-scan-div > div > div:last-child {
                margin-left: 0 !important;
                margin-top: 12px;
                align-self: center;
                width: 100%;
                text-align: center !important;
            }
            .qr-scan-div .para-4 {
                word-break: break-all !important;
                overflow-wrap: anywhere !important;
                width: 100%;
            }
            .bitCoinContainer {
                width: 100% !important;
            }
        }

        .upgrade .mb-4 {
            margin-bottom: 0.9rem !important;
        }
        .upgrade h1 {
            font-weight: 300;
            color: #FBF8D8;
            font-size: 1.4rem;
            margin-bottom: 5px !important;
            line-height: 25px;
        }
        .upgrade p {
            font-size: 13px;
            letter-spacing: 1px;
            font-weight: 300;
            margin-bottom: 0rem;
            color: #E4E2D1;
        }
        .business-flex {
            padding-top: 60px;
            padding-bottom: 0px;
            text-align: center;
        }