Card

/**

 * Shane Cakes - Complete WooCommerce Account Dashboard (With Animated Delivery Bike Tracking)

 */

// 1. Keep default menu structure intact

add_filter( 'woocommerce_account_menu_items', 'shane_custom_my_account_menu_order' );

function shane_custom_my_account_menu_order( $menu_links ) {

    return $menu_links;

}

// 2. Hook directly into the main account endpoint to render our custom classy dashboard cleanly

remove_action( 'woocommerce_account_dashboard', 'woocommerce_account_dashboard' );

add_action( 'woocommerce_account_dashboard', 'shane_render_clean_custom_dashboard' );

function shane_render_clean_custom_dashboard() {

    if ( ! is_user_logged_in() ) {

        return;

    }

    $current_user = wp_get_current_user();

    $user_id      = $current_user->ID;

    $display_name = $current_user->display_name;

    // WooCommerce Customer Data

    $customer    = new WC_Customer( $user_id );

    $total_spent = wc_price( $customer->get_total_spent() );

    $orders      = wc_get_orders( array( 'customer' => $user_id, 'limit' => -1 ) );

    $order_count = count( $orders );

    // Fetch Saved Cards via WooCommerce Tokenization

    $saved_tokens        = WC_Payment_Tokens::get_customer_tokens( $user_id );

    $card_number_display = 'No Saved Card';

    $card_expiry         = '--/--';

    $card_brand_label    = 'NO SAVED CARD';

    if ( ! empty( $saved_tokens ) ) {

        foreach ( $saved_tokens as $token ) {

            if ( 'cc' === $token->get_type() ) {

                $card_number_display = '•••• •••• •••• ' . $token->get_last4();

                $card_expiry         = $token->get_expiry_month() . '/' . substr( $token->get_expiry_year(), -2 );

                $brand               = strtolower( $token->get_card_type() );

                if ( strpos( $brand, 'visa' ) !== false ) {

                    $card_brand_label = 'VISA';

                } elseif ( strpos( $brand, 'master' ) !== false || strpos( $brand, 'mc' ) !== false ) {

                    $card_brand_label = 'MASTERCARD';

                } else {

                    $card_brand_label = strtoupper( $brand );

                }

                break;

            }

        }

    }

    // Fetch Latest Order for Live Tracking

    $latest_orders = wc_get_orders( array(

        'customer' => $user_id,

        'limit'    => 1,

        'orderby'  => 'date',

        'order'    => 'DESC',

    ) );

    $latest_order = ! empty( $latest_orders ) ? $latest_orders[0] : null;

    // Fallback to standard payment methods page

    $add_card_url = wc_get_endpoint_url( 'payment-methods' );

    ?>

    <div class="shane-classy-dash">

        <!-- Top Classy Welcome Banner -->

        <div class="shane-classy-banner">

            <div class="banner-welcome-text">

                <span class="home-path">Home &bull; My Account Dashboard</span>

                <h2>Welcome back, <?php echo esc_html( $display_name ); ?>!</h2>

            </div>

            <div class="banner-top-stats">

                <div class="stat-pill"><span>Loyalty Status</span> <span class="trend-up">Active Member</span></div>

                <div class="stat-pill"><span>Rewards</span> <span class="trend-gold"><?php echo esc_html( $order_count * 10 ); ?> Pts</span></div>

            </div>

        </div>

        <!-- Main Grid Layout -->

        <div class="shane-main-grid">

            <!-- Left Side Area -->

            <div class="dash-left-col">

                <div class="dash-row-top">

                    <!-- Dynamic White Virtual Membership Card with Modal Trigger -->

                    <div class="card-column-wrapper">

                        <div class="fintech-virtual-card">

                            <div class="vc-top">

                                <div class="vc-chip">💳</div>

                                <span class="vc-brand"><?php echo esc_html( $card_brand_label ); ?></span>

                            </div>

                            <div class="vc-number"><?php echo esc_html( $card_number_display ); ?></div>

                            <div class="vc-details">

                                <div>

                                    <small>Card Holder</small>

                                    <span><?php echo esc_html( strtoupper( $display_name ) ); ?></span>

                                </div>

                                <div>

                                    <small>Valid Thru</small>

                                    <span><?php echo esc_html( $card_expiry ); ?></span>

                                </div>

                            </div>

                        </div>

                        <button type="button" class="add-card-action-btn" id="open-add-card-modal">

                            <span>+ Add New Card</span>

                            <span>→</span>

                        </button>

                    </div>

                    <!-- Total Spent Box -->

                    <div class="fintech-box balance-box">

                        <div class="box-head">

                            <span>Total Spent</span>

                            <a href="<?php echo esc_url( wc_get_endpoint_url( 'orders', '', wc_get_page_permalink( 'myaccount' ) ) ); ?>" class="add-card-link">View Orders</a>

                        </div>

                        <div class="balance-amount"><?php echo wp_kses_post( $total_spent ); ?></div>

                        <div class="balance-sub text-gold">★ Lifetime Purchases</div>

                        <div class="income-expense-row">

                            <div>

                                <small>Total Orders</small>

                                <strong><?php echo intval( $order_count ); ?> Orders</strong>

                            </div>

                            <div>

                                <small>Account ID</small>

                                <strong>#<?php echo intval( $user_id ); ?></strong>

                            </div>

                        </div>

                    </div>

                    <!-- Statistics Box -->

                    <div class="fintech-box stats-box">

                        <div class="box-head">

                            <span>Account Insights</span>

                        </div>

                        <div class="stats-mini-row">

                            <div>

                                <small>User Role</small>

                                <strong>Customer</strong>

                            </div>

                            <div>

                                <small>Status</small>

                                <strong class="text-gold">Verified</strong>

                            </div>

                        </div>

                        <div class="stats-mini-row" style="margin-top: 14px;">

                            <div>

                                <small>Member Since</small>

                                <strong><?php echo date('Y', strtotime( get_userdata( $user_id )->user_registered )); ?></strong>

                            </div>

                            <div>

                                <small>Security</small>

                                <strong>Tokenized</strong>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Live Animated Order Tracking Widget -->

                <div class="fintech-box tracking-section">

                    <div class="box-head">

                        <span>Live Order Tracking</span>

                        <?php if ( $latest_order ) : ?>

                            <a href="<?php echo esc_url( $latest_order->get_view_order_url() ); ?>" class="add-card-link">Order #<?php echo $latest_order->get_id(); ?> →</a>

                        <?php endif; ?>

                    </div>

                    <?php 

                    if ( $latest_order ) :

                        $status = $latest_order->get_status();

                        $step1 = 'completed'; 

                        $step2 = 'pending';   

                        $step3 = 'pending';   

                        $step4 = 'pending';   

                        // Calculate progress width percentage for the animated road line

                        $progress_width = '0%';

                        if ( in_array( $status, array( 'processing', 'on-hold' ) ) ) {

                            $step2 = 'active';

                            $progress_width = '33%';

                        } elseif ( $status === 'completed' ) {

                            $step2 = 'completed';

                            $step3 = 'completed';

                            $step4 = 'completed';

                            $progress_width = '100%';

                        } elseif ( $status === 'pending' ) {

                            $progress_width = '0%';

                        }

                    ?>

                        <div class="tracking-status-info">

                            <div>

                                <span class="track-label">Current Status:</span>

                                <span class="track-status-badge <?php echo esc_attr( $status ); ?>"><?php echo ucfirst( $status ); ?></span>

                            </div>

                            <div class="track-date">

                                Date: <strong><?php echo $latest_order->get_date_created()->date('Y-m-d H:i'); ?></strong>

                            </div>

                        </div>

                        <?php if ( $status !== 'cancelled' && $status !== 'failed' && $status !== 'refunded' ) : ?>

                            <div class="shane-delivery-track-wrapper">

                                <!-- Background Road Line -->

                                <div class="road-base-line">

                                    <div class="road-progress-fill" style="width: <?php echo $progress_width; ?>;">

                                        <!-- Animated Delivery Bike riding along the line -->

                                        <div class="delivery-bike-icon">🏍️</div>

                                    </div>

                                </div>

                                <!-- Steps Nodes -->

                                <div class="tracking-progress-container">

                                    <div class="track-step <?php echo $step1; ?>">

                                        <div class="step-icon">📦</div>

                                        <span>Placed</span>

                                    </div>

                                    <div class="track-step <?php echo ($step2 === 'completed' || $step3 === 'completed') ? 'completed' : ($step2 === 'active' ? 'active' : 'pending'); ?>">

                                        <div class="step-icon">🎂</div>

                                        <span>Baking</span>

                                    </div>

                                    <div class="track-step <?php echo ($step3 === 'completed') ? 'completed' : ($step2 === 'active' ? 'active' : 'pending'); ?>">

                                        <div class="step-icon"> 🚚 </div>

                                        <span>Dispatched</span>

                                    </div>

                                    <div class="track-step <?php echo $step4; ?>">

                                        <div class="step-icon">✨</div>

                                        <span>Delivered</span>

                                    </div>

                                </div>

                            </div>

                        <?php else : ?>

                            <div style="padding: 15px; background: #fef2f2; color: #991b1b; border-radius: 10px; font-size: 13px; text-align: center; font-weight: 600; margin-top: 10px;">

                                This order was cancelled, failed, or refunded. Please contact support if you need assistance.

                            </div>

                        <?php endif; ?>

                    <?php else : ?>

                        <div style="text-align: center; padding: 20px; color: #888; font-size: 13px;">

                            You haven't placed any orders yet. Once you place an order, you can track it live here!

                        </div>

                    <?php endif; ?>

                </div>

                <!-- Recent Orders Table -->

                <div class="fintech-box portfolio-section">

                    <div class="box-head">

                        <span>Past Order History</span>

                        <a href="<?php echo esc_url( wc_get_endpoint_url( 'orders', '', wc_get_page_permalink( 'myaccount' ) ) ); ?>" class="add-card-link">All Orders</a>

                    </div>

                    <table class="portfolio-table">

                        <thead>

                            <tr>

                                <th>Order ID</th>

                                <th>Date</th>

                                <th>Status</th>

                                <th>Total</th>

                            </tr>

                        </thead>

                        <tbody>

                            <?php

                            $customer_orders = wc_get_orders( array(

                                'customer' => $user_id,

                                'limit'    => 3,

                                'orderby'  => 'date',

                                'order'    => 'DESC',

                            ) );

                            if ( ! empty( $customer_orders ) ) {

                                foreach ( $customer_orders as $order ) {

                                    echo '<tr>';

                                    echo '<td><strong>#' . $order->get_id() . '</strong></td>';

                                    echo '<td>' . $order->get_date_created()->date('Y-m-d') . '</td>';

                                    echo '<td><span class="badge-status">' . ucfirst( $order->get_status() ) . '</span></td>';

                                    echo '<td><strong>' . $order->get_formatted_order_total() . '</strong></td>';

                                    echo '</tr>';

                                }

                            } else {

                                echo '<tr><td colspan="4" style="text-align:center; color:#888;">No recent orders found.</td></tr>';

                            }

                            ?>

                        </tbody>

                    </table>

                </div>

            </div>

            <!-- Right Side: Quick Concierge Box -->

            <div class="dash-right-col">

                <div class="fintech-box exchange-box">

                    <div class="box-head">

                        <span>Quick Concierge</span>

                        <span>✦</span>

                    </div>

                    <div class="exchange-input-card">

                        <div class="ex-label-row">

                            <span>Need assistance?</span>

                            <span class="ex-avail">Instant Reply</span>

                        </div>

                        <div class="ex-control-row" style="padding: 6px 0;">

                            <span style="font-size: 13px; font-weight: 600; color: #333;">Chat with our support team directly via WhatsApp.</span>

                        </div>

                    </div>

                    <div class="exchange-details-list" style="margin: 20px 0;">

                        <div class="ed-item">

                            <span>Delivery Zone</span>

                            <span>Colombo & Suburbs</span>

                        </div>

                        <div class="ed-item">

                            <span>Standard Prep</span>

                            <span>24 - 48 Hours</span>

                        </div>

                        <div class="ed-item">

                            <span>Support Status</span>

                            <span class="text-gold">Online Now</span>

                        </div>

                    </div>

                    <a href="https://wa.me/94771234567" target="_blank" class="exchange-submit-btn" style="text-decoration: none; display: block; text-align: center;">

                        Chat on WhatsApp

                    </a>

                </div>

            </div>

        </div>

    </div>

    <!-- Interactive Add Card Modal Popup -->

    <div id="shane-card-modal" class="shane-modal-overlay">

        <div class="shane-modal-content">

            <div class="shane-modal-header">

                <h3>Add New Payment Card</h3>

                <button type="button" id="close-add-card-modal" class="modal-close-btn">&times;</button>

            </div>

            <div class="shane-modal-body">

                <p style="font-size: 13px; color: #666; margin-bottom: 20px;">

                    To securely add and save your Visa or Mastercard for future checkout, please proceed to your secure payment methods manager.

                </p>

                <div style="background: #fcf9f6; border: 1px solid #ebdcd0; padding: 15px; border-radius: 12px; margin-bottom: 20px; font-size: 13px; color: #333;">

                    <strong>Secure Gateway Verification:</strong> You will be directed to the official secure card management portal to tokenize your card safely.

                </div>

                <a href="<?php echo esc_url( $add_card_url ); ?>" class="exchange-submit-btn" style="text-decoration: none; display: block; text-align: center;">

                    Proceed to Secure Card Manager →

                </a>

            </div>

        </div>

    </div>

    <style>

        /* Account Wrapper Layout */

        .woocommerce-account .woocommerce {

            display: grid !important;

            grid-template-columns: 260px 1fr !important;

            gap: 40px !important;

            align-items: start !important;

            margin-top: 45px !important;

            margin-bottom: 50px !important;

        }

        .woocommerce-account nav.woocommerce-MyAccount-navigation {

            float: none !important;

            width: 100% !important;

            margin: 0 !important;

        }

        .woocommerce-account nav.woocommerce-MyAccount-navigation ul {

            margin-top: 0 !important;

        }

        .woocommerce-account .woocommerce-MyAccount-content {

            float: none !important;

            width: 100% !important;

            margin: 0 !important;

        }

        .woocommerce-MyAccount-content > p {

            display: none !important;

        }

        @media(max-width: 991px) {

            .woocommerce-account .woocommerce {

                grid-template-columns: 1fr !important;

                margin-top: 25px !important;

            }

        }

        /* Dashboard Styles */

        .shane-classy-dash {

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

            background: #fcf9f6;

            padding: 25px;

            border-radius: 24px;

            color: #222222;

            box-sizing: border-box;

            width: 100%;

            border: 1px solid #ebdcd0;

        }

        .shane-classy-dash * { box-sizing: border-box; }

        .shane-classy-banner {

            background: #ffffff;

            border: 1px solid #ebdcd0;

            border-radius: 18px;

            padding: 24px 28px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 22px;

            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

        }

        .home-path { font-size: 11px; color: #888888; font-weight: 600; display: block; margin-bottom: 4px; letter-spacing: 0.5px; }

        .shane-classy-banner h2 { margin: 0; font-size: 24px; font-weight: 800; color: #111111; letter-spacing: -0.5px; }

        .banner-top-stats { display: flex; gap: 10px; }

        .stat-pill {

            background: #fcf9f6;

            border: 1px solid #ebdcd0;

            padding: 8px 14px;

            border-radius: 30px;

            font-size: 11px;

            font-weight: 600;

            display: flex;

            gap: 8px;

            color: #555555;

        }

        .trend-gold { color: #d97706; font-weight: 700; }

        .shane-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }

        .dash-left-col { display: flex; flex-direction: column; gap: 22px; }

        .dash-row-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }

        .fintech-box {

            background: #ffffff;

            border: 1px solid #ebdcd0;

            border-radius: 18px;

            padding: 20px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.02);

        }

        .box-head {

            display: flex;

            justify-content: space-between;

            align-items: center;

            font-size: 12px;

            font-weight: 700;

            color: #666666;

            margin-bottom: 14px;

            letter-spacing: 0.5px;

            text-transform: uppercase;

        }

        .add-card-link { color: #111111; text-decoration: none; font-weight: 700; font-size: 11px; transition: color 0.2s; }

        .add-card-link:hover { color: #d97706; }

        /* Animated Delivery Bike Tracking Styles */

        .tracking-status-info {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 15px;

            font-size: 12px;

            color: #555;

        }

        .track-label { font-weight: 600; color: #888; margin-right: 6px; }

        .track-status-badge {

            background: #fef3c7;

            color: #92400e;

            padding: 4px 10px;

            border-radius: 6px;

            font-weight: 700;

            font-size: 11px;

            text-transform: uppercase;

        }

        .track-status-badge.completed { background: #ecfdf5; color: #065f46; }

        .track-status-badge.processing { background: #eff6ff; color: #1e40af; }

        .track-date strong { color: #111; }

        .shane-delivery-track-wrapper {

            background: #fcf9f6;

            border: 1px solid #ebdcd0;

            border-radius: 14px;

            padding: 20px 15px 10px 15px;

            position: relative;

        }

        /* Road Line with Moving Bike */

        .road-base-line {

            position: absolute;

            top: 45px;

            left: 12%;

            right: 12%;

            height: 4px;

            background: #ebdcd0;

            z-index: 1;

            border-radius: 4px;

        }

        .road-progress-fill {

            position: absolute;

            top: 0;

            left: 0;

            height: 100%;

            background: #111111;

            border-radius: 4px;

            transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);

        }

        .delivery-bike-icon {

            position: absolute;

            right: -15px;

            top: -18px;

            font-size: 20px;

            background: #ffffff;

            border: 2px solid #111111;

            border-radius: 50%;

            width: 34px;

            height: 34px;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 3px 10px rgba(0,0,0,0.15);

            animation: bikeBounce 0.8s infinite alternate ease-in-out;

        }

        @keyframes bikeBounce {

            0% { transform: translateY(0); }

            100% { transform: translateY(-3px); }

        }

        .tracking-progress-container {

            display: flex;

            align-items: center;

            justify-content: space-between;

            position: relative;

            z-index: 2;

        }

        .track-step {

            display: flex;

            flex-direction: column;

            align-items: center;

            text-align: center;

            flex: 1;

            opacity: 0.4;

            transition: opacity 0.3s;

        }

        .track-step.completed, .track-step.active {

            opacity: 1;

        }

        .step-icon {

            width: 38px; height: 38px;

            background: #ffffff;

            border: 2px solid #ebdcd0;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 15px;

            margin-bottom: 6px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.03);

        }

        .track-step.active .step-icon {

            border-color: #d97706;

            background: #fffbeb;

            animation: pulseGlow 1.5s infinite;

        }

        .track-step.completed .step-icon {

            background: #111111;

            color: #fff;

            border-color: #111111;

        }

        .track-step span {

            font-size: 10px;

            font-weight: 700;

            color: #444;

            text-transform: uppercase;

        }

        @keyframes pulseGlow {

            0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }

            70% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }

            100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }

        }

        /* Card Column & Add Action Button */

        .card-column-wrapper {

            display: flex;

            flex-direction: column;

            gap: 10px;

        }

        .fintech-virtual-card {

            background: linear-gradient(135deg, #ffffff 0%, #f7f4ee 100%);

            color: #111111;

            border-radius: 18px;

            padding: 20px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            box-shadow: 0 8px 25px rgba(0,0,0,0.05);

            border: 1px solid #ebdcd0;

            height: 165px;

        }

        .vc-top { display: flex; justify-content: space-between; align-items: center; }

        .vc-chip { font-size: 18px; }

        .vc-brand { font-size: 11px; font-weight: 900; background: #111111; padding: 4px 10px; border-radius: 6px; color: #ffffff; letter-spacing: 1.5px; }

        .vc-number { font-size: 15px; font-family: monospace; font-weight: 700; letter-spacing: 2px; color: #111111; margin: 12px 0; }

        .vc-details { display: flex; justify-content: space-between; font-size: 10px; }

        .vc-details small { display: block; color: #777777; text-transform: uppercase; font-size: 9px; font-weight: 600; }

        .vc-details span { font-weight: 700; color: #111111; font-size: 11px; }

        .add-card-action-btn {

            background: #111111;

            color: #ffffff;

            border: none;

            padding: 10px 14px;

            border-radius: 12px;

            font-size: 11px;

            font-weight: 700;

            display: flex;

            justify-content: space-between;

            align-items: center;

            cursor: pointer;

            transition: background 0.2s;

            box-shadow: 0 4px 10px rgba(0,0,0,0.05);

            width: 100%;

        }

        .add-card-action-btn:hover {

            background: #d97706;

            color: #ffffff;

        }

        /* Modal Styles */

        .shane-modal-overlay {

            position: fixed;

            top: 0; left: 0; width: 100%; height: 100%;

            background: rgba(0, 0, 0, 0.6);

            backdrop-filter: blur(4px);

            display: none;

            justify-content: center;

            align-items: center;

            z-index: 99999;

        }

        .shane-modal-content {

            background: #ffffff;

            border-radius: 20px;

            width: 90%;

            max-width: 420px;

            padding: 25px;

            box-shadow: 0 20px 40px rgba(0,0,0,0.2);

            border: 1px solid #ebdcd0;

            animation: modalFadeIn 0.3s ease;

        }

        @keyframes modalFadeIn {

            from { opacity: 0; transform: translateY(15px); }

            to { opacity: 1; transform: translateY(0); }

        }

        .shane-modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 15px;

            border-bottom: 1px solid #f3f4f6;

            padding-bottom: 10px;

        }

        .shane-modal-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: #111; }

        .modal-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #888; }

        .modal-close-btn:hover { color: #111; }

        .balance-amount { font-size: 22px; font-weight: 900; color: #111111; margin-bottom: 2px; letter-spacing: -0.5px; }

        .balance-sub { font-size: 11px; font-weight: 700; margin-bottom: 14px; }

        .income-expense-row { display: flex; justify-content: space-between; border-top: 1px solid #f3f4f6; padding-top: 10px; font-size: 11px; }

        .income-expense-row small { display: block; color: #888888; font-size: 9px; text-transform: uppercase; }

        .income-expense-row strong { color: #222222; }

        .stats-mini-row { display: flex; justify-content: space-between; font-size: 11px; }

        .stats-mini-row small { color: #888888; display: block; font-size: 9px; text-transform: uppercase; }

        .stats-mini-row strong { color: #222222; font-weight: 700; }

        .portfolio-table { width: 100%; border-collapse: collapse; font-size: 12px; }

        .portfolio-table th { text-align: left; color: #888888; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid #ebdcd0; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }

        .portfolio-table td { padding: 12px 0; border-bottom: 1px solid #f9f6f0; color: #333333; }

        .badge-status { background: #ecfdf5; color: #065f46; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }

        .exchange-box { display: flex; flex-direction: column; height: 100%; justify-content: space-between; }

        .exchange-input-card { background: #fcf9f6; border: 1px solid #ebdcd0; border-radius: 14px; padding: 14px; }

        .ex-label-row { display: flex; justify-content: space-between; font-size: 11px; color: #666666; margin-bottom: 4px; font-weight: 600; }

        .exchange-details-list { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: #666666; }

        .ed-item { display: flex; justify-content: space-between; }

        .ed-item span:last-child { font-weight: 700; color: #111111; }

        .exchange-submit-btn {

            background: #111111;

            color: #ffffff;

            border: none;

            border-radius: 14px;

            padding: 14px;

            font-size: 13px;

            font-weight: 700;

            cursor: pointer;

            width: 100%;

            letter-spacing: 0.5px;

            transition: background 0.2s ease;

        }

        .exchange-submit-btn:hover { background: #333333; }

        .text-gold { color: #d97706; }

        @media(max-width: 991px) {

            .shane-main-grid { grid-template-columns: 1fr; }

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

            .shane-classy-banner { flex-direction: column; align-items: flex-start; gap: 14px; }

        }

    </style>

    <!-- Modal Toggle Script -->

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const modal = document.getElementById('shane-card-mail') || document.getElementById('shane-card-modal');

            const openBtn = document.getElementById('open-add-card-modal');

            const closeBtn = document.getElementById('close-add-card-modal');

            if (openBtn && modal) {

                openBtn.addEventListener('click', function() {

                    modal.style.display = 'flex';

                });

            }

            if (closeBtn && modal) {