/* ============================================
   BUY ARX MODAL - DARK THEME
   ============================================ */

.arx-buy-modal .modal-content {
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.arx-buy-modal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 40px 40px 20px !important;
}

.arx-buy-modal .modal-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #fff 0%, #2DD98F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.arx-buy-modal .modal-body {
    padding: 20px 40px 40px !important;
    background: transparent !important;
}

.arx-form-label {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.arx-form-input {
    background: rgba(15, 20, 25, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

    .arx-form-input:focus {
        border-color: #2DD98F !important;
        background: rgba(15, 20, 25, 0.9) !important;
    }

    .arx-form-input.arx-readonly {
        background: rgba(45, 217, 143, 0.05) !important;
        border-color: rgba(45, 217, 143, 0.2) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

.arx-rate {
    color: rgba(255, 255, 255, 0.5) !important;
}

    .arx-rate span {
        color: rgba(255, 255, 255, 0.7) !important;
    }

.arx-connect-btn {
    background: linear-gradient(135deg, #2DD98F 0%, #26c17f 100%) !important;
    color: #0f1419 !important;
}

    .arx-connect-btn:hover {
        background: linear-gradient(135deg, #26c17f 0%, #22ad6f 100%) !important;
    }